美文网首页
观察者模式

观察者模式

作者: 狒狒神 | 来源:发表于2017-07-30 01:46 被阅读0次

    <strong>观察者模式(Observer)</strong>:又被称作发布-订阅者模式或消息机制,定义了一种依赖关系,解决了主体对象与观察者之间的功能的耦合。

    在观察者模式中,核心是三种方法:订阅, 取消订阅, 发送订阅。即:

    const Obsever = (function () {
      let message = {}; //将消息容器作为私有变量,防止被污染
      return {
        regist () {},
        fire () {},
        cancel () {} 
      }
    })();
    

    我们通过regist函数订阅注册某种类型的事件执行序列,通过fire函数去分发按序列执行某种类型的事件,通过cancel函数去取消订阅。

    接下来,我们分步完成这三个函数:

    regist (type, fn) {
      if (message[type] === undefined) {
        message[type] = [fn];
       } else {
         message[type].push(fn); // 若该类事件被注册过,则将函数推入执行序列
       }
      console.log('You han regist ' + type + ' 类型的 ' + fn.name + ' 事件');
    }
    
    fire (type, info) {
      if (message[type] === undefined || !(message[type] instanceof Array)) return;
      let len = message[type].length;
      message[type].forEach(fn => {
        fn(info);
      });
    }
    
    cancel (type, fn) { 
          if (message[type] !== undefined && message[type] instanceof Array) {
            let len = message[type].length;
            message[type].forEach((item, index) => {
              if (item === fn) { // 为了完成对象之间的解耦,能取消注册的函数必须就是注册的函数
                message[type].splice(index, 1);
                console.log('You had remove ' + fn.name);
              }
            })
          }
        } 
    

    上面的代码浅显易懂,接下来贴一下测试代码,看看我们是不是完成了整个流程控制:

    var obj = {
      say () {
        console.log('Hi~');
      }
    }
    Obsever.regist('onsay', obj.say);
    
    Obsever.fire('onsay');
    
    Obsever.cancel('onsay', obj.say);
    

    以上就是最基本的观察者模式,也是书上所提到的,那么接下来的文章将会对此进行扩展,并且谈谈现在流行库的设计方法。

    相关文章

      网友评论

          本文标题:观察者模式

          本文链接:https://www.haomeiwen.com/subject/tiqhlxtx.html