首页 > web前端 > js教程 > 正文

JavaScript的外观模式

php中世界最好的语言
发布: 2017-11-27 14:15:48
原创
1587 人浏览过

这次和大家说一下JS的设计理念,需要注意哪些方面,后面对应的篇幅会陆续更新,欢迎大家提出建议,我们之前说过单例模式,有兴趣可以查看。

注意

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当中就大量运用了这

样的思想去解决浏览器兼容性问题

相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!


相关阅读:

CSS网页错位怎么处理

CSS3的loading特效怎么制作

CSS3怎么制作蝴蝶飞舞的动画

以上是JavaScript的外观模式的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板