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(访问者)。

总结:

    1、功能复杂的时候,考虑扩展性的时候,模块解耦,就要考虑使用设计模式。设计模式,其实就是一种 代码套路。
  2、单例,发布订阅,适配器 用的比较多。
  3、基本是造轮子的时候会使用到,平时都不太考虑这个。

 

 


 

6、单例模式 :

  使用场景:

         单例模式是一种常用的模式,有一些对象我们往往只需要一个,比如全局缓存、浏览器的window对象、loading效果。在js开发中,单例模式的用途同样非常广泛。试想一下,当我们

         单击 右上角登录按钮的时候,页面中会出现一个登录框 (这个组件不能事先创建好,使用显隐控制。因为只有未登入的用户才会需要创建),而这个浮窗是唯一的,无论单击多少次登录按钮,这个浮窗只会被创建一次。因此这个登录浮窗就适合用单例模式。

var single = (function(){
    var unique;

    function getInstance(){
    // 如果该实例存在,则直接返回,否则就对其实例化
        if( unique === undefined ){
            unique = new Construct();
        }
        return unique;
    }

    function Construct(){
        // ... 生成单例的构造函数的代码
    }

    return {
        getInstance : getInstance
    }
})();
View Code

  上面是 参考链接中 构造函数单例模式的 创建。基于这种单例模式,可以变成只执行一次函数的  单例模式 。

    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

 

 

 

 

 


 

 
 
 
 
 
 
posted @ 2018-11-19 09:35  吴飞ff  阅读(179)  评论(0编辑  收藏  举报