动手来封装一个JS的发布订阅组件

提及发布订阅,我们都知道是一种比较经典的设计模式。比如像redux等比较流行的一些库或者一些前端框架底层都会用来作为通讯机制,那么我们今天就来封装一个基于发布订阅的组件。

设计一个发布订阅的类库jpslib

jpslib这个名字代表了简单的发布订阅模式的类库,是实现我们目的工具。
先打造好工具,然后我们打算使用这个工具从’猿’进化为’员’。

API设计及实现

  • 首先,我们需要抽象一个订阅者,just show me the code:

    /*** base class of subscriber*/jps.ISubscriber = function () {};/*** must be implemented* interface to observe subscriber's interested notification*/jps.ISubscriber.prototype.listNotificationInterested = function () {    return [];};/*** must be implemented* interface to execute a notification interested by the subscriber*/jps.ISubscriber.prototype.executeNotification = function (notification) {    };

订阅者的职责第一便是列出他感兴趣的主题listNotificationInterested,第二是对于收到订阅的主题消息的处理executeNotification

  • 其次,我们抽象一个消息模型,show me the code:

    /*** base class of notification*/ jps.INotification = function (name, body, type) {    if(name === null || name === undefined) {        throw new Error('notification must have a name');    }    if(typeof name !== 'string') {        throw new TypeError('notification name must be string type');    }    this._name = name;    this._body = body;    this._type = type;};/*** interface to get notification's name*/jps.INotification.prototype.getName = function () {    return this._name;};/*** interface to get notification's body*/jps.INotification.prototype.getBody = function () {    return this._body;};/*** interface to get notification's type*/jps.INotification.prototype.getType = function () {    return this._type;};

    消息对象需要有他的具体名字、消息体、消息类型,其实一般我们只需要只知道消息名便可,消息类型只是用来以后做扩展使用。

  • 最后,是一个管理者的实现

    /**  * interface to subscribe notification  */  jps.subscribe =  function (subscriber) {      if(subscriber.listNotificationInterested && typeof subscriber.listNotificationInterested === 'function' && subscriber.executeNotification && typeof subscriber.executeNotification === 'function') {          var names = subscriber.listNotificationInterested();          if(names instanceof Array) {              //check names type              names.forEach(function (name) {                  if(typeof name === 'string') {                      //do nothing                  } else {                      throw new Error('interested notification name must be String type');                  }              });              //clear              jps._removeSubscribersFromMap(subscriber);              //add              names.forEach(function (name) {                  jps._addSubscriberToMap(name, subscriber);              });          } else {              throw new Error('interface listNotificationInterested of subscriber must return Array type');          }      } else {          throw new Error('subscriber must implement ISubscriber');      }  };  /**  * interface to publish notification  */  jps.publish = function (notification) {      if(notification.getName && typeof notification.getName === 'function') {          var subs = jps._getSubscribersFromMap(notification.getName()).concat();          subs.forEach(function (ele) {              ele.executeNotification(notification);          });      } else {          throw new Error('notification must implement INotification');      }  };  /**  * interface to create new notification object  */  jps.createNotification = function (name, data, type) {      if(typeof name === 'string') {          var Notification = function (name, data, type) {              jps.INotification.call(this, name, data, type);          };          jps._utils.extendClass(Notification, jps.INotification);          return new Notification(name, data, type);      } else {          throw new Error('notification name must be String type');      }  };  /**  * interface to unsubscribe notification interested by subscriber  */  jps.unsubscribe = function (notificationname, subscriber) {      if(subscriber.listNotificationInterested && typeof subscriber.listNotificationInterested === 'function') {          if(typeof notificationname === 'string') {              jps._removeSubscriberFromMap(notificationname, subscriber);          } else {              throw new Error('interested notification name must be String type');          }      } else {          throw new Error('subscriber must implement ISubscriber');      }  };  /**  *  interface to unsubscribe all the notification interested by subscriber  */  jps.unsubscribeAll = function (subscriber) {      if(subscriber.listNotificationInterested && typeof subscriber.listNotificationInterested === 'function') {          if(typeof notificationname === 'string') {              jps._removeSubscribersFromMap(subscriber);          } else {              throw new Error('interested notification name must be String type');          }      } else {          throw new Error('subscriber must implement ISubscriber');      }  };  /**  * the map from notification name to subscriber  */  jps._notificationMap = {};  /**  * get the subscribers from map by the notification name  */  jps._getSubscribersFromMap = function (notificationname) {      if(jps._notificationMap[notificationname] === undefined) {          return [];      } else {          return jps._notificationMap[notificationname];      }   };  /**  * get the interested names from map by the subscriber  */  jps._getInterestedNamesFromMap = function (subscriber) {      var retArr = [];      var arr;      for(var name in jps._notificationMap) {          arr = jps._notificationMap[name].filter(function (ele) {              return ele === subscriber;          });          if(arr.length > 0) {              retArr.push(name);          }      }      return retArr;  };  /**  * check the name is subscribed by the subscriber from map  */  jps._hasSubscriberFromMap = function (name, subscriber) {      var names = jps._getInterestedNamesFromMap(subscriber);      var retArr = names.filter(function (ele) {          return ele === name;      });      return retArr.length > 0;  };  /**  *  add the subscriber to the map  */  jps._addSubscriberToMap = function (name, subscriber) {      if(jps._hasSubscriberFromMap(name, subscriber)) {          //do nothing      } else {          var subs = jps._getSubscribersFromMap(name);          if(subs.length === 0) {              subs = jps._notificationMap[name] = [];          }          subs.push(subscriber);      }      return true;  };  /**  * remove the subscriber from the map  */  jps._removeSubscriberFromMap = function (name, subscriber) {      var subs = jps._getSubscribersFromMap(name);      var idx = subs.indexOf(subscriber);      if(idx > -1) {          subs.splice(idx, 1);      } else {          //do nothing      }      return subs;  };  /**  * remove all observed notification for the subscriber  */  jps._removeSubscribersFromMap = function (subscriber) {      var subs;      var names = jps._getInterestedNamesFromMap(subscriber);      names.forEach(function (name) {          var subs = jps._removeSubscriberFromMap(name, subscriber);           if(subs && subs.length === 0) {              delete jps._notificationMap[name];          }      });      return true;  };  jps._utils = {      'extendClass': function (child, parent) {          if(typeof child !== 'function')              throw new TypeError('extendClass child must be function type');          if(typeof parent !== 'function')              throw new TypeError('extendClass parent must be function type');          if(child === parent)              return ;          var Transitive = new Function();          Transitive.prototype = parent.prototype;          child.prototype = new Transitive();          return child.prototype.constructor = child;      }  };

这里的代码有点长,我们仔细来看一遍:

  • 首先是一个工具对象jps._utils,里面是有一些辅助方法,目前我们需要的类继承。
  • 其次是一个key/value的map:jps._notificationMap,用来建立订阅主题名与订阅者的映射。
  • 最后是管理者的实现。

    在这些实现中,我们看到,无非是增删改查。但是我们需要对于异常进行检查并处理。
    还有便是一个习惯的约定,以_开头的方法,一般表示private,私有成员。

封装为类库jpslib

这里,我们可以借助类似于webpack之类的工具进行代码的处理。
最后发布为npm
这里的详细过程就省略了,代码可以到github上获取。

当然此处可以使用ES6来写,会更易读一些,建议读者亲自去实现一遍,会有深刻体会。

封装一个组件基类

还是先上代码,我们拿React组件来举例:

'use strict';import React from 'react';import jpslib from 'jpslib';class ComSubscriber extends jpslib.ISubscriber {    constructor(name, callback, scope) {        super();        this._name = name;        this._callback = callback;        this._scope = scope;    }    get name() {        return this._name;    }    get callback() {        return this._callback;    }    listNotificationInterested() {        return [this._name];    }    executeNotification(notice) {        this._callback.call(this._scope || {}, notice.getBody());    }}class PSComponent extends React.Component {    constructor(props) {        super(props);        this._subscribers = [];    }    hasSubscriber(name, callback) {        for(let i = 0; i < this._subscribers.length; i++) {            let sub = this._subscribers[i];            if(sub.name === name && sub.callback === callback) {                return true;            }        }        return false;    }    addSubscriber(name, callback) {        if(typeof name === 'string') {            if(typeof callback === 'function') {                if(this.hasSubscriber(name, callback)) {                    return false;                }                let subscriber = new ComSubscriber(name, callback, this);                jpslib.subscribe(subscriber);                this._subscribers.push(subscriber);                return true;             } else {                throw new Error('addSubscriber parameter callback should be type of function');            }        } else {            throw new Error('addSubscriber parameter name should be type of string');        }    }    removeSubscriber(name, callback) {        if(typeof name === 'string' && typeof callback === 'function') {            for(let i = 0; i < this._subscribers.length; i++) {                let sub = this._subscribers[i];                if(sub.name === name && sub.callback === callback) {                    const subscriber = this._subscribers.splice(i, 1)[0];                    jpslib.unsubscribe(name, subscriber);                    return true;                }            }        } else if(typeof name === 'string' && callback === undefined) {            for(let i = 0; i < this._subscribers.length; i++) {                let sub = this._subscribers[i];                if(sub.name === name) {                    const subscirber = this._subscribers.splice(i, 1);                    jpslib.unsubscribe(name, subscriber);                    i--;                }            }            return true;        }        return false;    }    sendNotification(name, body) {        if(typeof name === 'string') {            const notice = jpslib.createNotification(name, body);            jpslib.publish(notice);        }    }}export default PSComponent;

所有继承自PSComponent的组件,便可以使用jpslib的通讯了,例如:

先创造一个消息名的枚举:

'use strict';class NoticeTypes {    static ICONBUTTON_CLICK = 'iconbutton_click';}export default NoticeTypes;

然后进行消息的订阅及回调处理:

'use strict';import React from 'react';import PSComponent from './pscomponent';import ComNotice from './notice';class App extends PSComponent {    constructor(props) {        super(props);    }    componentDidMount() {        this.addSubscriber(ComNotice.ICONBUTTON_CLICK, this._iconbuttonClickHandler);    }        componentWillUnmount() {        this.removeSubscriber(COMNotice.ICONBUTTON_CLICK, this._iconbuttonClickHandler);    }        _iconbuttonClickHandler() {        console.log('救命啊,我被点了');    }        render() {        ...    }};export default App;

在需要的地方广播消息:

this.sendNotification(COMNotice.ICONBUTTON_CLICK, {});

这样封装之后,是不是我们在写代码的时候就会发现好用很多了,简单清晰。

相关项目源码,请浏览github。
如有错误,还望不吝赐教。
内容均为原创,需要转载,请与本人联系。

    原文作者:算法小白
    原文地址: https://juejin.im/entry/599a527cf265da249517792b
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞