javascript设计模式

锦锦ZJin
282 阅读12分钟

前言

1、什么是设计模式

设计模式是一种能够被反复使用，符合面向对象特性的代码设计经验的总结，合理的使用设计模式能够让你得代码更容易维护和可靠设计模式的类型共分为创建型模式，结构型模式，行为型模式三种。

2、创建型模式

今天我主要讲的是创建型模式的几种，先看看创建型模式的定义：
创建型模式是对一个类的实例化过程进行了抽象，把对象的创建和对象的使用进行了分离。

一、单例模式

单例就是保证一个类只有一个实例，实现方法一般是先判断实例存在与否，如果存在就直接返回，这样就确保了一个类只有一个实例对象，在Javascript中，单例作为一个命名空间提供者，从全局命名空间里提供一个唯一的访问点来访问该对象。

1、传统的单例模式

  • 和new 创建对象的调用不一样

  • 调用者要调用xxx.getInstance才能获得该单例

    function Singleton(name) { this.name = name; } Singleton.getInstance = function (name) { if(this.instace){ return this.instace; }else { this.instace = new Singleton(name); return this.instace; } }; var a = Singleton.getInstance('a'); var b = Singleton.getInstance('b'); console.log(a===b); //true

2、"透明"的单例模式

  • 透明”的单例类，用户从这个类中创建对象的时候，可以像使用其他任何普通类一样

  • 直接 new 一个对象

  • 不能new 多个对象，扩展性不好

    var instace; function Person(name) { this.name = name; if (!instace) { instace = this; } return instace; }

    Person.prototype.getName = function () { console.log(this.name); }; var a = new Person('a'); var b = new Person('b'); console.log(a===b);

3、代理模式创建单例模式

  • 代理模式:自己不去做，委托中间人做

  • Person是一个普通类，通过new Person可以创建一个对象

  • 用代理模式创建CreateSinglePerson方法，通过new CreateSinglePerson可以创建一个单例

    function Person(name) { this.name = name; } Person.prototype.getName = function () { console.log(this.name); }; var CreateSinglePerson = (function (name) { var instance; return function () { if (!instance) { instance = new Person(name); } return instance; }; })(); var a = new CreateSinglePerson('a'); var b = new CreateSinglePerson('b'); console.log(a === b); var c = new Person('c'); var d = new Person('d'); console.log(c === d);

通过引入代理类的方式，我们同样完成了一个单例模式的编写，与之前不同的是，现在我们把负责管理单例的逻辑移到了代理类CreateSinglePerson中，这样一来Person就变成了一个普通的类，它跟CreateSinglePerson组合起来可以达到单例模式的效果。

4、惰性单例

惰性单例是指在需要的时候才创建，调用render方法，创建A对象，可以多次调用render方法，A对象是单例的

var createA = (function () {
    var instance;
    return function () {
        if(!instance){
            //xxx
            instance = 'A';
        }
        return instance;
    };
})();
function render() {
    createA();
    console.log('b');
}
render();
render();

如果要创建B对象，B也是单例

var createB = (function () {
    var instance;
    return function () {
        if(!instance){
            //xxx
            instance = 'B';
        }
        return instance;
    };
})();

我们看到createA和createB的核心代码是相同的，所以可以抽离出通用创建的惰性单例的代码

function getSingleton(fn) {
  var result;
  return function() {
    return result||(result = fn.apply(this,arguments));
  }
} 
var createA = function () {
    var instance;
    if(!instance){
        //xxx
        instance = 'A';
    }
    return instance;
};
var createB = function () {
    var instance;
    if(!instance){
        //xxx
        instance = 'B';
    }
    return instance;
};
var createASingle = getSingleton(createA);
var createBSingle = getSingleton(createB);
function render() {
    createASingle();
    createBSingle();
}
render();
render();

5、JavaScript中的单例模式（ES5和ES6实现方式）

（1）es5实现方式

var Singleton = function(name) {

    this.name = name;

    //一个标记，用来判断是否已将创建了该类的实例

    this.instance = null;

}

// 提供了一个静态方法，用户可以直接在类上调用

Singleton.getInstance = function(name) {

    // 没有实例化的时候创建一个该类的实例

    if(!this.instance) {

        this.instance = new Singleton(name);

    }

    // 已经实例化了，返回第一次实例化对象的引用

    return this.

用户可以通过一个广为人知的接口，对该实例进行访问。

我们尝试对该对象进行两次实例化，观察两次实例化结果是否指向同一个对象。

var a = Singleton.getInstance('sven1');

var b = Singleton.getInstance('sven2');

// 指向的是唯一实例化的对象

console.log(a ===

返回结果是：true。说明a、b之间是引用关系。

（2）es6实现方式

创建Singleton类。class关键字和静态函数都是es6新增的。

class Singleton {

    constructor(name) {

        this.name = name;

        this.instance = null;

    }

    // 构造一个广为人知的接口，供用户对该类进行实例化

    static getInstance(name) {

        if(!this.instance) {

            this.instance = new Singleton(name);

        }

        return this.instance;

6、小结

单例模式，因为他的实例是唯一的，所以完全可以通过创建的时候，严格的去控制怎么去创建和访问或者说抛出错误，如果存在频繁的创建和销毁的操作的时候，单例模式是可以提高性能的。

但是同样的，单纯的单例模式中是没有抽象操作的，所以说单例模式是一个不便于扩展的模式。

7、js单例模式小题目

历史存在问题： 在开发中，动态创建一个弹层（暂且命名为box）是很常见的需求。因为如果在html中始终渲染这些box，代价可能会比较高，如果是纯文字还好，复杂点的涉及到ajax，图片，那就不太好了。然而如果每次用户一个动作（click或者mouseover）就动态创建一个box，移出就删除box,那么效率也不算很高，需要频繁绘制dom,性能不好。那么，如何比较高效、完美地创建一个弹窗呢？用单例模式创建就可以解决这个问题，那么js中如何用单例模式创建一个弹窗？

二、工厂模式

前一部分介绍了下单例模式，这一篇介绍一下工厂模式和抽象工厂模式，为什么把这两个放在一起说，因为他们两个是有关联的，简单工厂模式可以看做是工厂模式的简洁版，然后工厂模式可以看做是抽象工厂模式的简洁版。

1、简单工厂

定义：简单工厂模式中，可以根据参数的不同返回不同类的实例。简单工厂模式专门定义一个类来负责创建其他类的实例，被创建的实例通常都具有共同的父类。

比如你去专门卖鼠标的地方你可以买各种各样的鼠标

最通俗的理解就是封装，简单带过一下

    function mouse(color,long){

    　　　　var o = new Object();

    　　　　o.color= color;

    　　　　o.long= long; 

    　　　　o.Explain= function(){

    　　　　　　console.log(this.color，this.long);

    　　　　}

    　　　　return o;

    　　}

    var mouseA = mouse('黑色',3);

2、工厂模式

定义：工厂方法模式中，工厂父类负责定义创建产品对象的公共接口，而工厂子类则负责生成具体的产品对象，这样做的目的是将产品类的实例化操作延迟到工厂子类中完成，即通过工厂子类来确定究竟应该实例化哪一个具体产品类。

比如去旁边还有个专门卖键盘的和耳机的然后他和卖鼠标的组成了一个门店

你要进如这个门店然后买鼠标或者键盘或者耳机

你可以把这个工厂模式理解成是 进化版的简单工厂模式

   let shop = function (val) {
    if(this instanceof shop) {
        var s = new this[val]();
        return s;
    } else {
        return new shop(val);
    }
  }

    shop.prototype = {
        mouse: function() {
           console.log('买了个鼠标')
        },
        keyboard: function () {
            console.log("买了个键盘")
        },
        headset: function () {
            console.log("买了个耳机")
        }
    }

let mouse = shop('mouse');
// let keyboard = new shop('keyboard');
// let headset = new shop('headset

3、抽象工厂模式

定义：抽象工厂模式是指当有多个抽象角色时，使用的一种工厂模式。抽象工厂模式可以向客户端提供一个接口，使客户端在不必指定产品的具体的情况下，创建多个产品族中的产品对象。

前边的两个都是直接生产实例的，开始以为抽象工厂也是但是后来发现抽象工厂更像是生产工厂，其实抽象工厂是实现子类继承父类的方法。

说白了 抽象工厂模式就是工厂功能模式的扩充版，简单工厂生产实例 ，工厂功能模式生产实例的接口，抽象工厂呢生产的是工厂。

比如说上边他们有了个电脑店的门店 现在电脑店火了 又开了一个电脑店 然后这两个电脑店一个是联想的 一个是戴尔的

     核心代码
    let agency = function(subType, superType) {
      //判断抽象工厂中是否有该抽象类
      if(typeof agency[superType] === 'function') {
        function F() {};
        //继承父类属性和方法
        F.prototype = new agency[superType]();
        //将子类的constructor指向子类
        subType.constructor = subType;
        //子类原型继承父类
        subType.prototype = new F();

      } else {
        throw new Error('抽象类不存在!')
      }
    }


    这是创建工厂的类   好比专卖店

    //鼠标抽象类
    agency.mouseShop = function() {
      this.type = '鼠标';
    }
    agency.mouseShop.prototype = {
      getName: function() {
        return new Error('抽象方法不能调用');
      }
    }

    //键盘抽象类
    agency.KeyboardShop = function() {
      this.type = '键盘';
    }
    agency.KeyboardShop.prototype = {
      getName: function() {
        return new Error('抽象方法不能调用');
      }
    }

    //普通鼠标子类
    function mouse(name) {
      this.name = name;
      this.item = ['买我，我线长',"玩游戏贼溜"]
    }
    //抽象工厂实现鼠标类的继承
    agency(mouse, 'mouseShop');
    //子类中重写抽象方法
    mouse.prototype.getName = function() {
      return this.name;
    }

    //普通键盘子类
    function Keyboard(name) {
      this.name = name;
      this.item = ['行，你买它吧',"没键盘看你咋玩"]
    }
    //抽象工厂实现键盘类的继承
    agency(Keyboard, 'KeyboardShop');
    //子类中重写抽象方法
    Keyboard.prototype.getName = function() {
      return this.name;
    }

最后放一下全部代码

    let agency = function(subType, superType) {
      //判断抽象工厂中是否有该抽象类
      if(typeof agency[superType] === 'function') {
        function F() {};
        //继承父类属性和方法
        F.prototype = new agency[superType] ();
        //将子类的constructor指向子类
        subType.constructor = subType;
        //子类原型继承父类
        subType.prototype = new F();

      } else {
        throw new Error('抽象类不存在!')
      }
    }

    //鼠标抽象类
    agency.mouseShop = function() {
      this.type = '鼠标';
    }
    agency.mouseShop.prototype = {
      getName: function() {
        return new Error('抽象方法不能调用');
      }
    }

    //键盘抽象类
    agency.KeyboardShop = function() {
      this.type = '键盘';
    }
    agency.KeyboardShop.prototype = {
      getName: function() {
        return new Error('抽象方法不能调用');
      }
    }

    //普通鼠标子类
    function mouse(name) {
      this.name = name;
      this.item = ['买我，我线长',"玩游戏贼溜"]
    }
    //抽象工厂实现鼠标类的继承
    agency(mouse, 'mouseShop');
    //子类中重写抽象方法
    mouse.prototype.getName = function() {
      return this.name;
    }

    //普通键盘子类
    function Keyboard(name) {
      this.name = name;
      this.item = ['行，你买它吧',"没键盘看你咋玩"]
    }
    //抽象工厂实现键盘类的继承
    agency(Keyboard, 'KeyboardShop');
    //子类中重写抽象方法
    Keyboard.prototype.getName = function() {
      return this.name;
    }    

    //实例化鼠标
    let mouseA = new mouse('联想');
    console.log(mouseA.getName(), mouseA.type); //联想 鼠标
    let mouseB = new mouse('戴尔');
    console.log(mouseB.getName(), mouseB.type); //戴尔 鼠标

    //实例化键盘
    let KeyboardA = new Keyboard('联想');
    console.log(KeyboardA.getName(), KeyboardA.type); //联想 键盘
    let KeyboardB = new Keyboard('戴尔');
    console.log(KeyboardB.getName(), KeyboardB.type); //戴尔 键盘

这个抽象工厂的话 相对前两种而言 组合比较灵活

抽象工厂不直接创建实例，在大型项目的话应该蛮实用的。

4. 工厂模式的作用和注意事项

模式作用：

1、对象构建十分复杂---我们穿鞋很简单，但是制作鞋子的过程十分复杂

2、需要依赖具体的环境创建不同的实例---工厂可以做鞋子，做衣服，工厂可以做我需要的鞋子（鞋子不同），然后送到指定的地方(地方可以不同）可以理解为不同的实例。

3、处理大量具有相同属性的小对象--比如买一双鞋，没必要找工厂生产

注意事项：

不滥用运用工厂模式，有时候仅仅只是给代码增加了不必要的复杂度，同时使得测试难度加大。

5、小结：

工厂模式的作用是解耦了产品的生产和使用部分，让使用需要的产品的时候只需要调用对应的接口即可，减少冗余代码。

优点：1、隐藏了生产过程，只需调用相应接口；2、扩展性好，当需要添加一类产品时，只需添加对应工厂类即可。

与建造者模式区别：工厂模式不需要客户端关心构建过程，只需要了解产品对应的工厂即可；建造者模式更多的是构建拥有复杂的内部结构的对象，过程由Derector控制。

四、建造者模式

上面介绍完了工厂模式，下面我们来看看创建型设计模式的另一个，建造者模式。

1、建造者模式的定义

将一个复杂对象的构建与它的表示分离，使得同样的构建过程可以创建不同的表示。

很官方哈，举个例子，就拿他的名字来说，建房子，你尽管告诉开发商，我有钱我要一个这样的房子，然后开发商就会去找到工人，然后进行一些列的工作，最后工人干完之后，你住进去了，不关心过程，只要结果就是建造者模式。总之建造者模式就是通过一步步构建多个组成部分，直到构建一个对象。

2、建造者模式实现

根据上边的例子来实现一下建造者

首先你的需求就是你需要一个你想要的房子，那么你肯定不能自己去建造，首先你会找到开发商

    class Developer {
        constructor() {
            this.need = ['卧室', '厨房', '客厅'];
            console.log("我需要这样的房间");
        }

        construct() {
            console.log("开始建造");
            let workerOk=this.need.map(el=>{
                let builder = new CreatDiagram();
                builder.build(el);
                return builder.getResult();
            })

            console.log("房子不错");
            console.log(workerOk);
        }
    }
    // 要求产品
    let home = new Developer();
    // 生成产品
    home.construct();

这是最终的目的，在我们new这个开发商类的时候，我们告诉他我们需要什么样的房子，需要有什么，然后开发商也不是自己去建造，他需要一个设计图，并且需要一些工人来帮助他实现建造

   /**
     * @information: 设计图抽象类
     */
   class Diagram {
        constructor() {
          console.log('拿到图纸')
        }

        build(partName) {
            console.log(`观察${partName}图纸`);
        }
    }

    /**
     * @information: 设计图实现
     */
    class CreatDiagram extends Diagram {
        constructor() {
            super();
        }

        build(partName) {
            super.build(partName);
            console.log(`建造开始${partName}`);
            this.worker = new worker(partName);
        }
        getResult() {
            console.log('完工');
            return this.worker;
        }
    }

ok 设计图到手，开始招人干活

    class worker {
        constructor(material) {
            console.log(`我建造了${material}`);
            this.data = material
        }
    }

最后放一下全部代码

    class Diagram {
        constructor() {
          console.log('拿到图纸')
        }

        build(partName) {
            console.log(`观察${partName}图纸`);
        }
    }

    /**
     * @information: 设计图实现
     */
    class CreatDiagram extends Diagram {
        constructor() {
            super();
        }

        build(partName) {
            super.build(partName);
            console.log(`建造开始${partName}`);
            this.worker = new worker(partName);
        }
        getResult() {
            console.log('完工');
            return this.worker;
        }
    }

    /**
     * @information: 工人类
     */
    class worker {
        constructor(material) {
            console.log(`我建造了${material}`);
            this.data = material
        }
    }

    /**
     * @information: 开发商
     */
    class Developer {
        constructor() {
            this.need = ['卧室', '厨房', '客厅'];
            console.log("我需要这样的房间");
        }

        construct() {
            console.log("开始建造");
            let workerOk=this.need.map(el=>{
                let builder = new CreatDiagram();
                builder.build(el);
                return builder.getResult();
            })

            console.log("房子不错");
            console.log(workerOk);
        }
    }
    // 要求产品
    let home = new Developer();
    // 生成产品
    home.construct();

具体打印结果如下

3、建造者模式的优缺点

优点

  • 在建造者模式里边， 你不需要知道建造的过程是怎么样的，创建的实例将会与过程解耦。
  • 而且建造者模式里边可以根据不同的的具体实现来得到不同的实例
  • 建造者模式对于扩展来说很方便，不需要改变原有的代码

缺点

  • 同样的，如果类内部的差异比较大，或者变化复杂的话，你就会增加很多对应的实现类，会使得代码比较臃肿

4、总结

上一篇介绍的抽象工厂，相比较而言，抽象工厂返回的就好比是房子的一些类的房屋，返回的是具体的小类，比较灵活，随意组装，但是像一些复杂的组成，则有些啰嗦，而建造者则返回的是这些类组装好的一个对象，各有各的应用场景，建造者模式可以比较适用与那些有固定生成顺序的对象，或者对象内部有复杂结构的情况

avatar
文章
阅读
粉丝