JS设计模式之观察者模式

观察者模式，即发布与订阅模式，实现一对多的一种关系模式，当一种对象接受信号时其他所有依赖均有行为。我们在写code的时候总是会去自定义一些事件，这就是观察者常常使用的地方：

• JS中的观察者模式应用：

  var
  　　dom = document.getElementById('demo');
  dom.addEventListener('click',function(){
  　　console.log('demo is running.');
  });

  利用addEventListener添加一个click事件，然后点击Dom元素的时候触发这个click事件执行回调函数。

• Jquery中的观察者模式应用：

  var
  　　dom = $('#demo');
  dom.on('emit', function(){
  　　console.log('demo is running');
  });
  dom.trigger('emit');

  利用jquery中on来注册个事件，当trigger触发的时候执行回调函数。

• nodejs中观察者模式应用：

  var
      EventEmitter = require('events').EventEmitter,
      event = new EventEmitter();
  event.on('demo', function() {
      console.log('demo is running');
  });
  setTimeout(function() {
      event.emit('demo');
  }, 1000); 

  原理都是一个，定义事件与回调函数，然后触发事件执行回调函数。

• 观察者模式的具体实现(个人理解)：

  var
      event = {
          on: function (eventname, callback) {
              if (!this.handler) {
                  this.handler = {};
              }
              if (!this.handler[eventname]) {
                  this.handler[eventname] = [];
              }
              this.handler[eventname].push(callback);
          },
          emit: function (eventName) {
              var
                  handlers = this.handler[eventName];
              for (var i in handlers) {
                  if (handlers.hasOwnProperty(i)) {
                      handlers[i]();
                  }
              }
          }
      }
  event.on('demo', function () { console.log('demo is running') });
  $('#demo').click(function () {
      event.emit('demo');
  })

  其实原理很简单，我们的目标是什么？当然是调用函数，但是怎么调呢~多个函数怎么一起调用呢？我们可以将所有函数放在一个数组里，然后调用循环这个数据调用数据内的每一项不就达到目的了吗，这就是观察者的实现方式，数组名就是注册的事件名，数组中的每一项就是事件对应的回调函数喽~是不是so easy。