设计模式

观察者模式

let Observer = (function () {
  let obj = {};
  return {
    add: function (name, fn) {
      (obj[name] || (obj[name] = [])).push(fn);
    },
    trigger: function (name, arr) {
      if (!obj[name] || obj[name].length === 0) {
        return false;
      }
      obj[name].forEach((value) => {
        value.apply(obj, arr);
      });
    },
    off: function (name, fn) {
      let len = arguments.length;
      if (len === 0) {
        obj = {};
      } else if (len === 1) {
        obj[name] = [];
      } else if (len === 2) {
        obj[name].forEach((value, index) => {
          // 引用类型全等或相等等于地址相同
          if (value === fn) {
            obj[name].splice(index, 1);
          }
        });
        console.log(obj);
      }
    },
    /* 
                一次性事件:用于添加事件的方法，执行一次之后就销毁
    */
    once: function (name, fn) {
      // 备份this
      var me = this;
      // 添加一个事件
      function xxoo() {
        // 运行一次
        fn();
        // 当其执行结束之后，自动销毁
        me.off(name, xxoo);
      }
      // 添加事件
      this.add(name, xxoo);
      /* 
        为什么要使用xxoo这个函数？
        因为fn传过来的有可能是一个函数体，移除事件的时候只能移除引用的函数，命名的函数
        达到移除的效果
       */
    },
  };
})();
Observer.add('click', function() {
    console.log('111');
});
Observer.add('click', function() {
    console.log('333');
});
Observer.once('click', function() {
    console.log('222');
});
Observer.trigger('click');
Observer.trigger('click');