js实现页面之间的监听，触发通知-------类似于观察者模式

上次遇开发一个聊天的项目，遇到一个问题，用的是websocket开发的聊天项目，但是有一个问题就是，websocket文件是单独一个js文件，如图所示，websocket文件就是写的和服务器交互的聊天文件，但是我的聊天页面是在newChat文件夹里面的。对了  这是一个微信小程序。有一个问题就是

大家了解一下socket就知道，里面有一个监听方法，就是onSocketMessage方法，这个方法当你的好友发送信息的时候，它会收到这条信息，当你主动发一条信息的时候，你加载聊天信息的时候，你可以读一次信息，加载出来，但是当你的朋友给你发送信息的时候，你可以收到，但是你页面怎么取加载呢？总不能每两秒去缓存或者本地加载一次吧！这时候就需要一个监听方法，当好友给你发送信息的时候，这个监听通知你去onSocketMessage方法里面加载传过来的信息！所以我就自己封装了一个方法，实现监听。原理就是当有信息过来的时候，通知你去回调一次加载数据的方法！用的就是回调函数啦！就是图上面的event.js方法。下面我把代码给一下：

var _handle = Object.create(null);

/**
 * 绑定监听事件
 * @param {*String} type 绑定事件类型
 * @param {*Function} callback 事件处理函数
 * @param {*Object} target 事件处理函数执行的上下文环境
 */
function $on(type, callback, target) {
  _handle[type] = _handle[type] || [];
  _handle[type].push({ callback: callback, target: target, once: false });
}

/**
 * 移除监听事件
 * @param {*Stirng} type 移除事件类型
 * @param {*Function} callback 事件处理函数
 * @param {*Object} target 事件处理函数执行的上下文环境
 */
function $off(type, callback, target) {
  if (_handle[type] && _handle[type].length !== 0) {
    for (var i = _handle[type].length - 1; i >= 0; i--) {
      if (callback === _handle[type][i].callback && target === _handle[type][i].target) {
        _handle[type].splice(i, 1);
      }
    }
  }
}
/**
    * 触发指定事件类型的监听
    * @param {*String} type 触发事件类型
    * @param {*Object} params 传递数据
    */
function $fire(type, params) {
  if (_handle[type] && _handle[type].length !== 0) {
    for (var i = _handle[type].length - 1; i >= 0; i--) {
      _handle[type][i].callback.call(_handle[type][i].target, params);
      if (_handle[type][i].once) {
        _handle[type].splice(i, 1);
      }
    }
  }
}

function $stro(type, params) {
  if (_handle[type] && _handle[type].length !== 0) {
    for (var i = _handle[type].length - 1; i >= 0; i--) {
      _handle[type][i].callback.call(_handle[type][i].target, params);
      if (_handle[type][i].once) {
        _handle[type].splice(i, 1);
      }
    }
  }
}

module.exports = {
  $on: $on,
  $off: $off,
  $fire: $fire,
  $stro: $stro,
}

上面 on方法就在需要加载数据的地方写，fire就是主动触发的地方；

$on('custom-chat-event', (data) => {
      console.log("监听成功")
      wx.getStorage({
        key: that.data.gId,
        success: function (res) {
          console.log("数据是" + res.data);
          var scrollTop = that.data.scrollTop;
          var nowHeight = that.data.nowHeight;
          var nowTop = that.data.nowTop;
          var sssss = parseInt(scrollTop);
          console.log(new Date());
          that.setData({
            chatMsg: res.data.recordList,
            scrollTop: sssss + 1
          })


        }

      })
    });

fire：

wx.setStorage({
          key: stoKey,
          data: da,
          success() {
            $fire('custom-chat-event')
          }
        })

就这样的，至于括号里面的custom-chat-event是什么，其实就是两个方法的一个协议而已！必须写一样才会触发，大概就是这样，这是在小程序里面的写法，在web开发的时候写法不一样的，我下面吧代码上传一下，有需要的也可以留下你的邮箱

git地址：https://github.com/AndriodStudent/event