【javaScript随笔】07 从vueBus到观察者

从vueBus到观察者

文 / 三和小钢炮


本文所要阐述的知识有以下

  • 面向对象编程
  • js模块化多规范兼容
  • vue的插件编写
  • js分层编程
  • 观察者模式
  • 生产者/消费者

前言

如果没有vueBus,那就自己写一个。

01 观察者模式

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

一个观察者应该具有以下接口:

public interface IObserver {
    /**
     * 发布信息接口
     */
    public void fire();
    /**
     * 注册信息接口
     */
    public void regist();
    /**
     * 移除信息接口
     */
    public void remove();
}

02 实现一个观察者

function Event(type, args) {
  this.type = type || 'default';
  this.args = args || {};
}

function Observer() {
  var _msg = {};
  this.regist = function(type, fn) {
    if (typeof _msg[type] === 'undefined') {
      _msg[type] = [fn];
    } else {
      _msg[type].push(fn);
    };
  };
  this.fire = function(type, args) {
    if (typeof _msg[type] === 'undefined') {
      return;
    };
    for (var i = 0, len = _msg[type].length; i < len; i++) {
      _msg[type][i].call(this, new Event(type, args));
    };
  };
  this.remove = function(type, fn) {
    if (_msg[type] instanceof Array) {
      for (var i = _msg[type].length - 1; i >= 0; i--) {
        if (_msg[type][i] === fn) {
          _msg[type].splice(i, 1);
        };
      };
    };
  };
};

03 适配主流js规范

任何一个插件都要适应于主流规范
常用的规范有:CommonJS、CMD、AMD
我们做以下适配,保证它在任何环境下都可以正常运行

Observer.js文件如下:

/* eslint-disable */
;(function(global, factory) {
  if (typeof module !== 'undefined') {
    // nodeJs端
    module.exports = factory();
  } else if (typeof define === 'function') {
    if (define.amd) {
      // amd规范
      define(factory);
    } else if (define.cmd) {
      // cmd规范
      define(function(require, exports, module) {
        module.exports = factory();
      });
    }
  } else {
    global.Observer = factory();
  }
})(this, function () { 'use strict';

function Event(type, args) {
  this.type = type || 'default';
  this.args = args || {};
}

function Observer() {
  // 此消息应该为私有变量
  // 考虑到_msg不对外暴露,不采用prototype
  var _msg = {};
  this.regist = function(type, fn) {
    if (typeof _msg[type] === 'undefined') {
      _msg[type] = [fn];
    } else {
      _msg[type].push(fn);
    };
  };
  this.fire = function(type, args) {
    if (typeof _msg[type] === 'undefined') {
      return;
    };
    for (var i = 0, len = _msg[type].length; i < len; i++) {
      _msg[type][i].call(this, new Event(type, args));
    };
  };
  this.remove = function(type, fn) {
    if (_msg[type] instanceof Array) {
      for (var i = _msg[type].length - 1; i >= 0; i--) {
        if (_msg[type][i] === fn) {
          _msg[type].splice(i, 1);
        };
      };
    };
  };
};

return new Observer();

});

04 包装成vue插件

封装任何一个工具,最忌讳的就是和其他第三方耦合,大凡是依赖es6、jquery、vue等等,我们只能称之为组件或者插件。所以要把核心模块和其他适配模块抽离,核心模块不应该依赖任何东西。
这里,我们编写一个vue的包裹层,这里我们只需要保证它能够在vuejs里面适用。

ObserverServer.js文件:

/* eslint-disable */
/**
 * vue适配层
 */
import Observer from './Observer.js';
const ObserverServer = {};

ObserverServer.install = function (Vue, options) {
  Vue.Observer = Observer;
  Vue.prototype.$Observer = Observer;
}
export default ObserverServer;

05 在vue中使用

经过上面的操作,我们实际上是实现了一个vueBus,我们可以如下使用:

index.js文件:

import Observer from '~js/observer/ObserverServer.js';
Vue.use(Observer);

a.vue文件:

this.$Observer.regist('type1', function(msg) {
  console.log(msg);
});

this.$Observer.regist('type2', function(msg) {
  console.log(msg);
});

this.$Observer.fire('type1', '你好');
this.$Observer.fire('type2', 'hello');

06 问题

上面的观察者,看似完美,实际上存在一个非常严重的问题:
注册和发布的加载次序问题

在js中经常存在下面的情况:
注册往往会在发布之后


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Documenttitle>
  <script src="./Observer.js">script>
head>
<body>
  <button onclick="fn()">点击button>
  <script>
    Observer.fire('type1', '你好');
    function fn() {
      Observer.regist('type1', function (msg) {
        console.log(msg);
      });
    };
  script>
body>
html>

其实我们可以寻求下面的解决:


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Documenttitle>
  <script src="./Observer.js">script>
head>
<body>
  <button onclick="fn()">点击button>
  <script>
    // 采用两次发布,构成一次通信
    Observer.regist('type1.before', function(msg) {
      Observer.fire('type1', '你好');
    });

    var isRegist = false;
    function fn() {
      // 防止多次注册
      if (!isRegist) {
        Observer.regist('type1', function (msg) {
          console.log(msg);
          isRegist = true;
        });
      }
      Observer.fire('type1.before', 'ready');
    };
  script>
body>
html>

07 生产者/消费者

我们上面的设计,是利用一个注册容器,将{type, fn} (消息类型和函数) 装入其中,一旦消息发布,便会回调触发函数。

实际上,上面的设计存在一个问题:
消息发布者和消息注册者都不应该关心消息被如何调用。

我们之前的结构为:
注册者 –> 注册表 <– 发布者

此时发布者需要处理和他不相干的消息,我们可以把消息发布者看作生产者,而注册者则是消费者,于是我们可以做如下调整。

注册者 –> 注册表 <==> 消息列表 <–发布者

注册者只关心到注册表里面注册,发布者只要关心将消息推送到消息列表里面。
至于注册表和消息列表之间的消费关系,用一个中间的消费机制去处理。
此时如果有消息发布未被消费,我们就采取将消息保留,直到被消费为止。

实现逻辑如下:

/* eslint-disable */
(function(global, factory) {
  if (typeof module !== 'undefined') {
    // nodeJs端
    module.exports = factory();
  } else if (typeof define === 'function') {
    if (define.amd) {
      // amd规范
      define(factory);
    } else if (define.cmd) {
      // cmd规范
      define(function(require, exports, module) {
        module.exports = factory();
      });
    }
  } else {
    global.Observer = factory();
  }
})(this, function () { 'use strict';

// 消息实体类
function Msg(type, args) {
  this.type = type || 'default';
  this.args = args || {};
  this.time = new Date().getTime();
}

function Observer() {
  var _registTable = {}; // 注册表
  var _msgQueue = []; // 消息队列

  //消费机制
  function consume() {
    for (var i = 0; i < _msgQueue.length; i++) {
      var msg = _msgQueue[i];
      var registList = _registTable[msg.type];
      if (registList instanceof Array) {
        for (var j = 0; j < registList.length; j++) {
          registList[j].call(this, msg);
        }
        _msgQueue.splice(i, 1);
        i--;
      }
    }
  }

  // 注册
  this.regist = function(type, fn) {
    if (typeof _registTable[type] === 'undefined') {
      _registTable[type] = [fn];
    } else {
      _registTable[type].push(fn);
    };
    consume();
  };

  // 发布
  this.fire = function(type, args) {
    _msgQueue.push(new Msg(type, args));
    consume();
  };

  // 注销
  this.remove = function(type, fn) {
    if (_registTable[type] instanceof Array) {
      for (var i = _registTable[type].length - 1; i >= 0; i--) {
        if (_registTable[type][i] === fn) {
          _registTable[type].splice(i, 1);
        };
      };
    };
  };
};

return new Observer();

});

这样我们前后依赖的问题就解决了。


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Documenttitle>
  <script src="./Observer.js">script>
head>
<body>
  <button onclick="fn()">点击button>
  <script>
    Observer.fire('type1', '你好');
    function fn() {
      Observer.regist('type1', function (msg) {
        console.log(msg);
      });
    };
  script>
body>
html>

08 消费记录

上面的实现的设计想法是:保证消息要全部被消费
这里又会有一个问题:

<script src="./Observer.js">script>
<script>
  Observer.fire('type1', '你好');
  Observer.regist('type1', function (msg) {
    console.log('No1', msg);
  });
  Observer.regist('type1', function (msg) {
    console.log('No2', msg);
  });
script>

此时只会有一个注册者能收到消息。因为消息一旦被消费,就会被删除~。

那么我们需要保留每个消息的消费记录,每次消费消息的时候,先去查询是否有消费记录。
代码如下:


/* eslint-disable */
(function(global, factory) {
  if (typeof module !== 'undefined') {
    // nodeJs端
    module.exports = factory();
  } else if (typeof define === 'function') {
    if (define.amd) {
      // amd规范
      define(factory);
    } else if (define.cmd) {
      // cmd规范
      define(function(require, exports, module) {
        module.exports = factory();
      });
    }
  } else {
    global.Observer = factory();
  }
})(this, function () { 'use strict';

// 消息实体类
function Msg(type, args) {
  this.type = type || 'default';
  this.args = args || {};
  this.timeId = new Date().getTime() + '_' + Msg.ID++;
}
// 消息id
Msg.ID = 0;

function Observer() {
  var _registTable = {}; // 注册表
  var _msgQueue = []; // 消息队列
  var _consumeHistory = {}; // 消费历史

  // 增加消费记录
  function addConsumeHistory(fnID, msgID) {
    if (typeof _consumeHistory[msgID] === 'undefined') {
      _consumeHistory[msgID] = [fnID];
    } else {
      _consumeHistory[msgID].push(fnID);
    };
  };

  // 查询消费记录
  function getConsumeHistory(fnID, msgID) {
    var isConsume = false;
    if (typeof _consumeHistory[msgID] === 'undefined') return isConsume;
    var historyList = _consumeHistory[msgID];
    if (historyList.indexOf(fnID) > -1) {
      isConsume = true;
    }
    return isConsume;
  };

  //消费机制
  function consume() {
    for (var i = 0; i < _msgQueue.length; i++) {
      var msg = _msgQueue[i];
      var registList = _registTable[msg.type];
      if (registList instanceof Array) {
        for (var j = 0; j < registList.length; j++) {
          if (!getConsumeHistory(registList[j].registID, msg.timeId)) {
            registList[j].call(this, msg);
            addConsumeHistory(registList[j].registID, msg.timeId);
          }
        }
      }
    }
  }

  function regist(type, fn) {
    if (typeof _registTable[type] === 'undefined') {
      _registTable[type] = [fn];
    } else {
      _registTable[type].push(fn);
    };
    fn.registID = regist.ID++;
  }
  // 注册id
  regist.ID = 0;

  // 注册
  this.regist = function(type, fn) {
    regist(type, fn);
    consume();
  };

  // 发布消息
  this.fire = function(type, args) {
    _msgQueue.push(new Msg(type, args));
    consume();
  };

  // 注销
  this.remove = function(type, fn) {
    if (_registTable[type] instanceof Array) {
      for (var i = _registTable[type].length - 1; i >= 0; i--) {
        if (_registTable[type][i] === fn) {
          _registTable[type].splice(i, 1);
        };
      };
    };
  };
};

return new Observer();

});

09 消息过期

运行上面的代码

<script src="./Observer.js">script>
<script>
  Observer.fire('type1', '你好');
  Observer.regist('type1', function (msg) {
    console.log('No1', msg);
  });
  Observer.regist('type1', function (msg) {
    console.log('No2', msg);
  });
script>

上面就能收到两条消息。

那么问题来了:
虽然页面的注册数有限,但是一直长期保存历史记录,必然损耗性能。
我们需要设置一个消息的过期时间。

代码如下:

/* eslint-disable */
(function(global, factory) {
  if (typeof module !== 'undefined') {
    // nodeJs端
    module.exports = factory();
  } else if (typeof define === 'function') {
    if (define.amd) {
      // amd规范
      define(factory);
    } else if (define.cmd) {
      // cmd规范
      define(function(require, exports, module) {
        module.exports = factory();
      });
    }
  } else {
    global.Observer = factory();
  }
})(this, function () { 'use strict';

// 消息实体类
function Msg(type, args) {
  this.type = type || 'default';
  this.args = args || {};
  this.timeId = new Date().getTime() + '_' + Msg.ID++;
  this.getTime = function() {
    return this.timeId.split('_')[0];
  }
}
Msg.ID = 0;

function Observer() {
  var _registTable = {}; // 注册表
  var _msgQueue = []; // 消息队列
  var _consumeHistory = {}; // 消费历史

  // 增加消费记录
  function addConsumeHistory(fnID, msgID) {
    if (typeof _consumeHistory[msgID] === 'undefined') {
      _consumeHistory[msgID] = [fnID];
    } else {
      _consumeHistory[msgID].push(fnID);
    };
  };

  // 查询消费记录
  function getConsumeHistory(fnID, msgID) {
    var isConsume = false;
    if (typeof _consumeHistory[msgID] === 'undefined') return isConsume;
    var historyList = _consumeHistory[msgID];
    if (historyList.indexOf(fnID) > -1) {
      isConsume = true;
    }
    return isConsume;
  };

  // 清理过期消息 过期时间为五分钟
  function removeMsg() {
    var now = new Date().getTime();
    for (var i = 0, len = _msgQueue.length; i < len; i++) {
      if (now - _msgQueue[i].getTime() > 1000 * 60 * 5) {
        _msgQueue.splice(i, 1);
      }
    }
  }

  //消费机制
  function consume() {
    removeMsg();
    for (var i = 0; i < _msgQueue.length; i++) {
      var msg = _msgQueue[i];
      var registList = _registTable[msg.type];
      if (registList instanceof Array) {
        for (var j = 0; j < registList.length; j++) {
          if (!getConsumeHistory(registList[j].registID, msg.timeId)) {
            registList[j].call(this, msg);
            addConsumeHistory(registList[j].registID, msg.timeId);
          }
        }
      }
    }
  }

  function regist(type, fn) {
    if (typeof _registTable[type] === 'undefined') {
      _registTable[type] = [fn];
    } else {
      _registTable[type].push(fn);
    };
    fn.registID = regist.ID++;
  }
  regist.ID = 0;

  // 注册表
  this.regist = function(type, fn) {
    regist(type, fn);
    consume();
  };

  // 发布消息
  this.fire = function(type, args) {
    _msgQueue.push(new Msg(type, args));
    consume();
  };

  // 注销
  this.remove = function(type, fn) {
    if (_registTable[type] instanceof Array) {
      for (var i = _registTable[type].length - 1; i >= 0; i--) {
        if (_registTable[type][i] === fn) {
          _registTable[type].splice(i, 1);
        };
      };
    };
  };
};

return new Observer();

});

10 看似完美

到现在为止,看似完美的解决了一切问题。实际上引入了很多概念。也增加了性能的负担,但js本身存在的环境并不会有很多消息存在。这些是足够用了。

要完全解这些问题,我们需要一个统一的东西来兼容这一切问题。
我个人觉得已经超过了观察者这个范围了。等我下次详细讲述。


你可能感兴趣的:(javaScript,设计模式)