设计模式

设计模式

总体来说设计模式分为三大类：

创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。

结构型模式，共七种：适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。

行为型模式，共十一种：策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模式、解释器模式。

介绍下单列模式

  class Person {
            constructor(name) {
                this.name = name;
                this.instance = null; //自定义的一个条件
            }
            showname() {
                return this.name;
            }
        }
        Person.getsingle = function(name) { //静态方法。
                //如果存在这个实例对象，直接返回，不存在，再实例化对象。
                if (!this.instance) {
                    this.instance = new Person(name)
                }
                return this.instance;
            }
            //思路：new Person 产生一个不同的实例。new一次
        let p1 = Person.getsingle('zhangsan');
        let p2 = Person.getsingle('lisi');
        console.log(p1 == p2); //true
        console.log(p1 === p2); //true

单列模式中有个特别的叫惰性单例：

et box = (function() {
            let cDiv = null;
            return function() {
                if (!cDiv) { //不存在，创建
                    cDiv = document.createElement('div');
                    cDiv.innerHTML = '我是创建出来的盒子';
                    cDiv.style.display = 'none';
                    document.body.appendChild(cDiv);
                }
                return cDiv; //存在，直接返回
            }
        })();
        oBtn.onclick = function() {
            let box1 = box(); //执行函数，返回创建的盒子。
            box1.style.display = 'block';
        }

发布订阅模式：

 class Observer {
            constructor() {
                    this.message = [];
                }
                //this.message = ['买车'：[fn(奥迪),fn(宝马),fn(奔驰)],'买房'：[fn(100),fn(200)...]]
                //添加自定义事件 - 订阅
            on(etype, fn) { //etype:自定义的事件   fn：事件处理函数
                    //如果是第一次发生的事件，创建事件类型和事件处理函数
                    //如果是第二次发生的事件，追加到对应的事件下面
                    if (!this.message[etype]) { //第一次发生
                        this.message[etype] = [fn];
                    } else { //发生的事件
                        this.message[etype].push(fn);
                    }
                }
                //发布 - 执行订阅的信息
            excute(etype) {
                    if (!this.message[etype]) return; //如果不存在事件，退出。
                    this.message[etype].forEach(item => {
                        item();
                    });
                }
                //取消事件
            off(etype, fn) { //etype:自定义的事件   fn：事件处理函数
                if (!this.message[etype]) return; //如果不存在事件，退出。
                for (let i = 0; i < this.message[etype].length; i++) {
                    let eventfn = this.message[etype][i];
                    if (eventfn === fn) {
                        this.message[etype].splice(i, 1); //splice会改变原数组。
                        i--;
                    }
                }
            }

        }


        let buy = new Observer();

        //事件绑定
        buy.on('buycar', fn1);
        buy.on('buycar', fn2);
        buy.on('buycar', fn3);

        buy.on('buyhouse', fnn1);
        buy.on('buyhouse', fnn2);
        buy.on('buyhouse', fnn3);


        //触发事件
        buy.excute('buycar');
        buy.excute('buyhouse');



        //取消fn2
        buy.off('buycar', fn1);
        buy.off('buycar', fn2);
        buy.off('buycar', fn3);
        buy.off('buyhouse', fnn1);
        buy.off('buyhouse', fnn2);

        buy.excute('buycar');
        buy.excute('buyhouse');



        function fn1() {
            console.log('宝马');
        }

        function fn2() {
            console.log('奥迪');
        }

        function fn3() {
            console.log('奔驰');
        }

        function fnn1() {
            console.log('平层')
        }

        function fnn2() {
            console.log('平排屋层')
        }

        function fnn3() {
            console.log('商城')
        }