JavaScript 的14种设计模式

一、单例模式

简单的说就是一个类只能有一个实例。

例：

function A(name) {
        this.name = name;
    }
    var proxyA=(function(name) {
        var available;
        return function () {
            if(!available){
                available = new A(name);
            };
            return available;
        }
    })();
    var a=new proxyA('wxp');
    var b=new proxyA('jack');
    console.log(a===b);

二、适配器模式

调用不同对象的统一接口，如果是外部提供的不同名的接口，就需要适配器来转换。

例：

let obj={
        show:function () {
            console.log('方法1')
        }
    };
    let obj1={
        show:function () {
            console.log('方法2')
        }
    };
    //1.调用统一的接口show
    function map(fn) {
        fn.show();
    };
    map(obj);
    map(obj1);
    //2.假设obj1对象是外部提供的对象，并且方法名不叫show，而叫display
    obj1={
        display:function () {
            console.log('方法2')
        }
    };
    //3.这时候就需要提供一个适配器接口
    obj1.show = obj1.display();
    //4.map方法可以不用任何改变
    map(obj);
    map(obj1);

三、代理模式

A与B之间的通信可借助C来完成而达到更好的效果。

例：我们经常所用的ngnix就是一种代理模式，ngnix配置可将a域名的访问指向b域名，也可借助这一特性来实现跨域

四、中介者模式

提供一个中介者来将对象与对象之间多对多的关系变成一对多的关系，以此来解耦对象的关联性。

例：与房屋中介类似，现在买卖房屋都是通过中介完成，这样买卖双方就不会有太多的联系，而是将精力放在自己更重要的事情上。

五、享元模式

一种优化方案，尽可能减少对象的创建。

六、策略模式

策略模式就是一种封装。

例：

btn1.onclick = function onLeftBtn(){
   console.log('确定');
};
btn2.onclick = function onRightBtn(){
   console.log('取消');
};
function btn(b1){
   if(b1.innerHTML == '确定'){
       console.log('确定');
   }else if(b1.innerHTML == '取消'){
       console.log('取消'); 
   }
};
btn1.onclick = btn('确定');
btn2.onclick = btn('取消');

七、命令模式

命令模式指的是执行某些特定事情的指令，或者说实现特定功能的接口约定。

例：

   function common1() {
        return {
            exec:function () {
                console.log('执行命令1')
            }
        }
    }
    function common2() {
        return {
            exec:function () {
                console.log('执行命令2')
            }
        }
    }
    let exec = (function () {
        var list = [];
        return function(){
            return {
                add:function(fn){
                    list.push(fn);
                },
                exec:function () {
                    for(let i=0;i<list.length;i++){
                        list[i]().exec();
                    }
                }
            }
        }
    })();
    exec().add(common1);
    exec().add(common2);
    exec().exec();

八、职责链模式

将一系列可以处理请求的对象组成一条链。

九、观察者模式

观察者模式，也叫订阅发布模式，指可以预先订阅事件，在需要的时候进行发布。

例：

var taskList = [];
    //订阅事件
    function sub(fn){
        taskList.push(fn);
    }
    //发布事件
    function dispatch() {
        for(let i = 0;i < taskList.length; i++){
            if(taskList[i]){
                taskList[i]()
            }
        }
    };
    sub(function () {
        console.log('事件1')
    });
    sub(function () {
        console.log('事件2')
    });
    dispatch();

十、状态模式

将某个状态和该状态下的行为抽象出独立的模块。

十一、装饰者模式

在不改变对象的基础上，给对象增加格外的功能。

十二、模板方法模式

模版方法是对封装的一种改造，把变化的逻辑增加到子类中，而不改动父类。

十三、迭代器模式

提供一种方法依次访问一个集合对象中的每个元素，并不关心对象的内部结合。

十四、组合模式

将对象组合成一个树形结构。