JS门面模式使用案例详解

这次给大家带来JS门面模式使用案例详解，JS门面模式使用的注意事项有哪些，下面就是实战案例，一起来看一下。

门面模式是一种流行的设计模式，它为一个已存在的对象创建一个新的接口。门面是一个全新的对象，其背后有一个已存在的对象在工作。门面有时也叫包装器，它们用不同的接口来包装已存在的对象。你的用例中如果继承无法满足要求，那么下一步骤就应该创建一个门面，这比较合乎逻辑。

jQuery和YUI的DOM接口都使用了门面。如上所述，你无法从DOM对象上继承，所以唯一的能够安全地为其新增功能的选择就是创建一个门面。下面是一个DOM对象包装器代码示例：

function DOMWrapper (element) {  this.element = element;
}
DOMWrapper.prototype.addClass = function (className) {  this.element.className += ' ' + className;
}
DOMWrapper.prototype.remove = function () {  this.element.parentNode.removeChild(this.element);
}// 用法var wrapper = new DOMWrapper(
document
.getElementById('my-div'));
wrapper.addClass('selected');
wrapper.remove();

DOMWrapper类型期望传递给其构造器的是一个DOM元素。该元素会保存起来以便以后引用，它还定义了一些操作该元素的方法。addClass()方法是为那些还未实现HTML5的classList属性的元素增加className的一个简单的方法。remove()方法封装了从DOM中删除一个元素的操作，屏蔽了开发者要访问该元素父节点的需求。

从JS的可维护性而言，门面是非常合适的方式，自己可以完全控制这些接口。你可以允许访问任何底层对象的属性或方法，反之亦然，也就是有效地过滤对该对象的访问。你也可以对已有的方法进行改造，使其更加简单易用（上段示例代码就是一个案例）。底层的对象无论如何改变，只要修改门面，应用程序就能继续正常工作。

门面实现一个特定接口，让一个对象看上去像另一个对象，就称作一个适配器。门面和适配器唯一的不同是前者创建新接口，后者实现已存在的接口。

相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！

推荐阅读：

web开发中如何避免空比较

web开发中怎样检测原始值

以上就是JS门面模式使用案例详解的详细内容，更多请关注其它相关文章！