观察者模式的项目实践

业务场景

项目是一个单页面web应用，有一个基础的websocket服务，用于和服务器通信。刚开始主要有两个作用：

1. 账号防重复登陆。当账号在另外的地方登陆时，websocket收到服务器消息，网站即时弹窗提示用户“当前账号在另外一个地方登陆”，然后网站清除登录信息并跳转到登录页面。

2. 当打开送货管理界面时，若有新的送货请求，websocket收到服务器消息，即时提示用户“您有新的送货请求，请及时处理”。若没有打开送货管理界面，不提示。

起初是这样的实现的：

//BasciWebsocket.js
 websocket.onmessage = function (event) {
   try{
        let {data} = event;
        let _data = JSON.parse(data);
        switch(_data.type){
          case 100:
            Modal.warning({
              title: '账号登录提醒',
              content: "您的账号已经在另外的地方进行登陆,请确认是否您本人操作。如有异常,请联系公司系统管理员。",
              okText: '知道了',
              onOk: ()=> {
                tool.clearUserCookie();
                window.location = "/login";
              }
            });
            break;
          case 101:
            let isPageShow = tool.ifDeliveryPageShow();
            if(isPageShow){
               //提示“您有新的送货请求，请及时处理”
            }
            break;
        }
      }catch(e){

      }
 };

看起来并没有什么问题。但是，随着项目越来越复杂，websocket负责通知的消息也越来越丰富。接收到消息后，往往还要改变具体的页面展现，跟具体的页面的关联性非常大。比如，用户停留在订单详情页时，如果收到新的订单反馈，那么订单详情页的评论列表区域就要动画出现新的反馈信息。

这个时候，你会发现，把这类跟具体页面强关联的逻辑写在基础的BasciWebsocket.js文件里不科学，BasciWebsocket.js也变得很臃肿，维护起来有些费劲。问题就在于基础的websocket服务与每个页面的消息处理逻辑不够解耦。

不难看出，在这个业务场景里，websocket服务其实就是一个消息发布者，而这些具体页面则是消息订阅者。很自然地，我想到了一根救命稻草——经典的发布-订阅模式（又叫观察者模式）。

观察者模式

观察者模式定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖它的对象都将得到通知。

如何实现观察者模式？

1. 指定好谁充当发布者（websocket服务）；

2. 为发布者添加一个缓存列表，用于存放回调函数以便通知订阅者（具体页面）；

3. 发布者对外提供消息订阅/退订方法，实质就是改变缓存列表的内容；

4. 发布消息时，发布者会遍历这个缓存列表，一次触发里面存放的订阅者回调函数；

实践

首先，把BasciWebsocket.js变身为消息发布者：

export default class BasicWebsocket{

  constructor() {
    if(typeof BasicWebsocket.instance === 'object') {
      return BasicWebsocket.instance;
    }
    //缓存列表
    this.listeners = {};
    this.init();
    
    BasicWebsocket.instance = this;
  }

  //消息订阅
  addListener = (key,func)=>{
     this.listeners[key] = func;
  };

  //取消订阅
  removeListener = (key)=>{
     delete this.listeners[key];
  };


  init = ()=>{
    //获取websocket对象,全局唯一
    let websocket = this.getWebsocket(); 

    let that = this;
    //监听websocket消息
    websocket.onmessage = function (event) {
      try{
        let {data} = event
        let _data = JSON.parse(data);
        //遍历缓存列表, 通知消息订阅者
        let keys = Object.keys(that.listeners);
        for(let i = 0,j = keys.length; i < j; i++){
          let func = that.listeners[keys[i]];
          func(_data);
        }
      }catch(e){

      }
    };
  };
  
  //其他代码
}

然后，在发货管理页加载时，可以进行发货消息的订阅；发货管理页卸载时，进行消息退订。其他页面如此类推。

class Distribution extends Component{
  // 构造
  constructor(props) {
    super(props);
    // 初始状态
    this.state = {
      newCount:0
    };
    this.websocket = new BasicWebsocket();
  }

  //组件加载完毕
  componentDidMount() {
    let that = this; 
    //消息订阅
    this.websocket.addListener("distribution",(d)=>{
      if(d.type == 101){
        that.showNotification(); //提示“您有新的送货请求，请及时处理”
        //在页面展示新的发货请求数量
        let {count} = d.data;
        let count = that.state.newCount + count;
        that.setState({
          newCount:count
        });
      }
    });
  }

  //组件即将卸载
  componentWillUnmount() {
    //消息退订
    this.websocket.removeListener("distribution");
  }
}

至此，通过观察者模式实现了基础websocket服务和具体页面逻辑的解耦，代码可维护性得到提高。