JavaScript的外观模式
注意
JavaScript设计模式系列github地址
深入系列文章部分是有先后顺序的,按照目录结构顺序阅读效果最好。
勘误及提问
如果有疑问或者发现错误,可以在相应的 issues 进行提问或勘误。
外观模式
概念:
为一组复杂的子系统接口提供一个更高级的统一接口,
通过这个接口使得对子系统接口的访问更容易
外观模式又被称作为门面模式
案例体现
有一个需求,要为document元素绑定一个点击事件,这时候我们就需要考虑到浏览器的兼容性问题,但是每次绑定事件都要去判断一些浏览器兼容,显然不是很合理,这时候我们就要用到外观模式了,封装一个统一的绑定事件方法,然后在这个方法里面去做浏览器兼容性的处理,统一暴露一个对外绑定事件的方法,
这就是我们所说的外观模式了
代码体现
// 外观模式实现 function addEvent(dom, type, fn){ // 对于支持dom2级事件处理程序 addEventListener 方法的浏览器 if(dom.addEventListener){ dom.addEventListener(type,fn,false); }else if(dom.attachEvent){// 对于不支持addEventListener 方法但支持attachEvent 方法的浏览器 dom.attachEvent('on'+type,fn); }else { dom['on'+ type] = fn; } } // 调用绑定事件 addEvent(document.getElementById('btn'),'click',function(){ console.log('我是点击事件'); });
外观模式的优点
提供统一对外接口,把复杂逻辑统一处理,对外调用更加容易
外观模式总结
在javascript中,外观模式是比较好理解的,jQuery当中就大量运用了这
样的思想去解决浏览器兼容性问题
相信看了这些案例你已经掌握了方法,更多精彩请关注其它相关文章!
相关阅读:
以上就是JavaScript的外观模式的详细内容,更多请关注其它相关文章!
推荐阅读
-
JavaScript常用对象的方法和属性小结_javascript技巧
-
javascript - 有关邮件筛选器的程序管道
-
win10夜灯模式在哪? win10打开夜灯模式的两种方法
-
Java开发中的23种设计模式详解
-
Javascript下的urlencode编码解码方法附decodeURIComponent
-
PHP实现设计模式中的抽象工厂模式详解,设计模式详解
-
javascript - jq 如何显示出来下拉框value的值
-
javascript require.js的具体使用方法
-
使用UglifyJS合并/压缩JavaScript的方法_基础知识
-
VO(DTO)模式在分层架构设计中是否需要的扯淡