这次给大家带来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门面模式使用案例详解的详细内容。