欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JS门面模式使用案例详解

程序员文章站 2022-06-07 09:23:15
...
这次给大家带来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门面模式使用案例详解的详细内容,更多请关注其它相关文章!