设计模式的初体验

单列模式

 // 单例模式,确保一个类或者构造函数,只被实例化一次,全局都能使用

    function Fn() {
      console.log(111);`
      if (!Fn.obj) {
        Fn.obj = {
          name: '小甜甜'
        };
      }

      return Fn.obj;
    }

    // let f1 = new Fn();
    // console.log(f1);

    // let f2 = new Fn();
    // console.log(f2);

    // 多次new返回的都是一个对象
    // console.log(f1 == f2);



    // ES6  中class的单例模式
    class A {
      obj = '';
      say() {
        console.log('平生不会相思,才会相思便害相思');
      }

      // 向外提供A的对象
      static getObj() {
        console.log(111);

        if (!this.obj) {
          console.log(222);

          this.obj = new A
        }
        return this.obj;
      }
    }
    let a1 = A.getObj();
    let a2 = A.getObj();

    console.log(a1 == a2);
   //只有a1的使用new A,a2再次调用的时候,直接返回第一次new的结果

组合模式

   //将多个小功能或任务,放到一个大的命令中,一次性调用,统一执行
    // 总开关,可以一次性调用所有的任务
    class Command {
      // 声明任务数组
      lists = [];
      // 添加任务的方法
      add(task) {
        this.lists.push(task)
      }

      //执行任务的方法
      execute() {
        // console.log(this.lists);
        this.lists.forEach(ele => {
          // console.log(ele);
          // ele 就是task1,task2,task3
          let t = new ele;
          // 调用每一个任务的init
          t.init();

        });

      }
    }



    // 任务1
    class task1 {
      init() {
        console.log('打开空调....');

      }
    }

    // 任务2
    class task2 {
      init() {
        console.log('打开冰饮..');

      }
    }

    // 任务3
    class task3 {
      init() {
        console.log('召唤女仆...');

      }
    }


    let c = new Command;
    // 向总开关中,添加任务
    c.add(task1);
    c.add(task2);
    c.add(task3);

    c.execute()

观察者模式

    // 绑定  触发  解绑
    // 存储事件的多个函数

    class Watch {
      // 存储事件函数
      obj = {};

      // 绑定事件
      bind(type, handle) {
        // 判断事件是否存在
        if (!this.obj[type]) {
          // 不存在就新增属性,以数组的形式赋值,一个属性就可以给多个值
          this.obj[type] = [handle];
        } else {  // 存在
          //console.log(this.obj[type]);
          this.obj[type].push(handle)
        }

      }
      // 触发事件
      touch(type, arr) {
        // 事件不存在,则停止
        if (!this.obj[type]) return;
        // 构造回调函数的参数
        let e = {
          type: type,
          args: arr
        }
        // 执行事件对相应的函数
        //console.log(this.obj[type]);
        this.obj[type].forEach(ele => {
          // console.log(ele);
          ele(e)
        });

      }
      // 解绑事件
      unbind(type, handle) {
        if (!this.obj[type]) {  // 不存在则停止
          return false;
        } else { // 存在就解绑
          // console.log(this.obj[type]);
          for (var i = 0; i < this.obj[type].length; i++) {
            //console.log(this.obj[type][i]);
            // 判断正在循环的函数,是我们要解绑的,进行删除
            if (this.obj[type][i] == handle) {
              this.obj[type].splice(i, 1)
            }

          }

        }
      }
    }

    let w = new Watch();
    w.bind('abc', fn1);
    w.bind('abc', fn2);
    // 事件和回调函数查看
    // console.log(w.obj);


    function fn1(eve) {
      console.log(eve);

      console.log('我是abc第一个回调函数');

    }
    function fn2(eve) {
      console.log(eve);
      console.log('我是abc第二个回调函数');

    }


    //触发事件
    // w.touch('abc', [11, 22])

    // 解绑
    w.unbind('abc', fn1);

    //触发事件
    w.touch('abc', [11, 22])

工厂模式

 // 按需传入参数,返回对象,可以快速批量的生产
    function createBook(name, time, type) {
      var obj = {};
      obj.name = name;
      obj.time = time;
      obj.type = type;
      obj.getName = function () {
        console.log(obj.name);

      }

      return obj;
    }

    var c1 = createBook('葵花宝典', 1120, '武功秘籍');
    var c2 = createBook('碧血剑谱', 668, '武功秘籍');

    //console.log(c1, c2);
    c1.getName();
    c2.getName();