JavaScript设计模式系列四之外观模式(附案例源码)
文章初衷
设计模式其实旨在解决语言本身存在的缺陷,
目前javaScript一些新的语法特性已经集成了一些设计模式的实现,
大家在写代码的时候,没必要为了用设计模式而去用设计模式,
那么我这边为什么还写设计模式的文章呢,
一方面是自己的一个整理,然后记录出来,结合自己的理解,
一方面就是虽然语言特性本身已经实现这些模式,有了自己的语法,
但是我们何尝不能去了解一下它是通过什么样的思路去实现了
在我看来设计模式更多的是让我对于思考问题,有了一些更好的思路和想法
文章实现更多的表现为用一些简单的案例,帮助大家去理解这样的一种思路,
会存在故意把设计模式的实现往简单的案例靠拢,
大家在真实项目中不要刻意去用设计模式实现相同的代码
设计模式在平时的一些代码中都会有所体现,大家也许经常用到,
耐心看文章,也许你会发现自己平时的代码就不断在设计模式中体现
JavaScript设计模式系列
JavaScript设计模式系列,讲述大概20-30种设计模式在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设计模式系列github地址
深入系列文章部分是有先后顺序的,按照目录结构顺序阅读效果最好。
关于设计模式,更多的是结合我自己的一些理解,把他总结出来分享给大家,如果大家发现有什么不正确的地方,希望大家一定得提出来
,避免我这边误人子弟,感谢大家!!!
JavaScript设计模式系列四之外观模式(附案例源码)相关推荐
- JavaScript实现squareMatrixRotation方阵旋转算法(附完整源码)
JavaScript实现squareMatrixRotation方阵旋转算法(附完整源码) squareMatrixRotation.js完整源代码 squareMatrixRotation.test ...
- JavaScript实现levenshteinDistance字符串编辑距离算法(附完整源码)
JavaScript实现levenshteinDistance字符串编辑距离算法(附完整源码) levenshteinDistance.js完整源代码 # levenshteinDistance.te ...
- JavaScript实现ShellSort希尔排序算法(附完整源码)
JavaScript实现ShellSort希尔排序算法(附完整源码) Comparator.js完整源代码 Sort.js完整源代码 ShellSort.js完整源代码 Comparator.js完整 ...
- JavaScript实现SelectionSort选择排序算法(附完整源码)
JavaScript实现SelectionSort选择排序算法(附完整源码) Comparator.js完整源代码 Sort.js完整源代码 SelectionSort.js完整源代码 Compara ...
- JavaScript实现CountingSort计数排序算法(附完整源码)
JavaScript实现CountingSort计数排序算法(附完整源码) Comparator.js完整源代码 Sort.js完整源代码 CountingSort.js完整源代码 Comparato ...
- JavaScript实现Knapsack problem背包问题算法(附完整源码)
JavaScript实现Knapsack problem背包问题算法(附完整源码) Comparator.js完整源代码 Sort.js完整源代码 MergeSort.js完整源代码 Knapsack ...
- JavaScript实现fisherYates洗牌算法(附完整源码)
JavaScript实现fisherYates洗牌算法(附完整源码) fisherYates.js完整源代码 fisherYates.js完整源代码 export default function f ...
- JavaScript实现Linear search线性搜索算法(附完整源码)
JavaScript实现Linear search线性搜索算法(附完整源码) Comparator.js完整源代码 linearSearch.js完整源代码 linearSearch.test.js完 ...
- JavaScript实现jumpSearch跳转搜索算法(附完整源码)
JavaScript实现jumpSearch跳转搜索算法(附完整源码) Comparator.js完整源代码 jumpSearch.js完整源代码 jumpSearch.test.js完整源代码 Co ...
最新文章
- C#中自定义类数组和结构数组的使用
- Linux time ls命令:用户态内核态分别占用多长时间
- 香肠派对电脑版_香肠派对先行服s7赛季下载-香肠派对先行服s7赛季最新版下载...
- Linux内核设计的艺术
- python保存图片到指定路径_使用Python将不同大小照片制作为GIF动画2
- CCF推荐的A类、B类、C类中文科技期刊
- 设计师必备,素材网站如千图包图免费下载的方法
- win10重置进度条不动了_你好,我win10系统重置的进度条卡住了。一直在卡在17%近9个小时了。这要...
- windows控制台cmd乱码的解决办法
- CCNA考试题库中英文翻译版及答案17
- SQL SERVER数据库日常使用总结
- MyIM服务端聊天记录(网络编程作业)
- 微信默认表情符号的代码对照表(微信公众号使用到)
- php 微信授权 跨域,微信公众号支付 请求跳转code跨域
- 自然语言处理总复习(九)—— 机器翻译
- Boomer压测环境搭建(Windows)
- 微信小程序低功耗蓝牙BLE快速开发js
- 【项目实战】传智健康
- 二层基本知识点(二)
- 工控软件装机常规设置