javascript 的 设计模式【概念介绍】
1、为什么学习设计模式:http://www.iteye.com/news/32092 或 https://blog.csdn.net/pigpigpig4587/article/details/48630223 ( 设计模式的作用是让人们写出可复用和可维护的程序)
2、浅谈JS的一些设计模式 : https://www.jianshu.com/p/010071439eaa
3、Javascript设计模式 : https://www.cnblogs.com/chenxygx/p/5754101.html
4、常用的javascript设计模式 : https://www.cnblogs.com/xianyulaodi/p/5827821.html (这个比较详细) 或 https://www.cnblogs.com/imwtr/p/9451129.html
5、设计模式的分类:https://segmentfault.com/a/1190000017787537?utm_source=tag-newest 或 https://www.cnblogs.com/polk6/p/9369079.html
模式分类 | 名称 |
---|---|
创建型 | 工厂模式 |
单例模式 | |
原型模式 | |
结构型【或包装型,包装成另外一个对象】 | 适配器模式 |
代理模式 | |
行为型 | 策略模式 |
迭代器模式 | |
观察者模式(发布-订阅模式) | |
命令模式 | |
状态模式 |
说明:从表可以看出,设计模式并不是只有对象创建 或 函数 调用的 设计模式。设计模式是对程序开发中一些 代码 的总结 归纳 提炼出来的 一种 行之有效的 设计。
创建型设计模式:专注于处理对象创建的机制,以合适的方式创建对象,以此来降低创建对象过程的复杂性。
包含:Constructor(构造器)、Factory(工厂)、Abstract(抽象)、Prototype(原型)、Singleton(单例)、Builder(生成器)。
结构性设计模式:在不同对象之间寻找共同点,并建立一定的关系;确保在系统某一部分发生改变时,系统的整体结构不需要同时改变。
简单点说,基于原来的对象,变成另外一个新对象,后面对它的操作,都变成对新对象的操作。如,代理模式。
包含:Dectorator(装饰着)、Facade(外观)、Flyweight(享元)、Adapter(适配器)、Proxy(代理)。
行为型设计模式:改善或简化系统中不同对象之间的通信。
包含:Iterator(迭代器)、Mediator(中介者)、Observer(观察者)、Visitor(访问者)。
总结:
6、单例模式 :
使用场景:
单例模式是一种常用的模式,有一些对象我们往往只需要一个,比如全局缓存、浏览器的window对象、loading效果。在js开发中,单例模式的用途同样非常广泛。试想一下,当我们
单击 右上角登录按钮的时候,页面中会出现一个登录框 (这个组件不能事先创建好,使用显隐控制。因为只有未登入的用户才会需要创建),而这个浮窗是唯一的,无论单击多少次登录按钮,这个浮窗只会被创建一次。因此这个登录浮窗就适合用单例模式。
var single = (function(){ var unique; function getInstance(){ // 如果该实例存在,则直接返回,否则就对其实例化 if( unique === undefined ){ unique = new Construct(); } return unique; } function Construct(){ // ... 生成单例的构造函数的代码 } return { getInstance : getInstance } })();
上面是 参考链接中 构造函数单例模式的 创建。基于这种单例模式,可以变成只执行一次函数的 单例模式 。
var single = (function(){ var unique; // 返回的函数中有指向 unique变量,所以函数执行完毕后,这个变量还是保存在内存中的。 function getInstance(){ // 如果该实例存在,则直接返回,否则就对其实例化 if( unique === undefined ){ unique = construct(); } return unique; } function construct(){ // ... 执行一次 功能的代码 console.log('uu'); return true; } return getInstance; })();
个人总结:单例模式,利用了闭包的特性。函数执行完,但是函数内某些变量没有被回收的特点。 为什么闭包函数中 某些变量不被回收的原理 参考:https://www.cnblogs.com/wfblog/p/8951886.html