订阅发布模式

在开始之前先让大家看一段代码

wx.getUserInfo({
   success: res => {
     // 可以将 res 发送给后台解码出 unionId
     this.globalData.userInfo = res.userInfo
     // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
     // 所以此处加入 callback 以防止这种情况
     if (this.userInfoReadyCallback) {
       this.userInfoReadyCallback(res)
     }
   }
})
---------------------------------------------------
if (app.globalData.userInfo) {
   this.setData({
     userInfo: app.globalData.userInfo,
     hasUserInfo: true
   })
} else if (this.data.canIUse){
   // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
   // 所以此处加入 callback 以防止这种情况
   app.userInfoReadyCallback = res => {
     this.setData({
       userInfo: res.userInfo,
       hasUserInfo: true
     })
   }
}

想必开发过微信小程序的都认得吧。这是微信的一个回调方法，因为请求是异步的，可能存在延迟，当它还没有储存到 app.globalData 时，索引界面（第一个页面）的 onload 已经执行过了。此时，如果需要使用在 app.js 中的数据，极大概率是空值，因此，微信的做法是在索引界面的 onload 中判断是否存在，不存在则继续请求一次，然后将异步的值直接回调给自己。这种思路方法在我懵懂无知时简直如同凤姐得到那本规则世界的《故事会》一样激动，以至于我常常觉得自己是卢瑟界的 chosen one 。

收，回到主题。今天我们将使用一种更加简单，直观的模式去处理几个小程序中经常遇到的麻烦事。除了上面提到的，我想大家应该经常遇到的一项需求就是需要跳转页面的 自定义搜索 —— 在另一个页面中输入搜索的信息，点击确定后，wx.navigateBack() 返回上一页面并且根据搜索内容显示相应结果。我先来说一下我一开始的做法：

• 将自定义搜索页输入的数据储存在 app.globalData 中
• 跳转回上一页面，在 onshow 里获取app.globalData 中对应的数据，进行后续的查询操作
• 查询完成，清空刚才存在 app.globalData 中的数据

这样做虽然解决了这个问题，但是每次展示页面都需要onshow无疑会增大开销，数据重新setData也会造成屏闪。 这还仅仅是一个页面，如果消费页面有多个就更加麻烦。

另一个例子，在用户登录之后，根据 openid 创建一个 mqtt(socket) 长链接。当信息到达时由链接页面分别发给各个子页面。比如，此时，链接发送给我一条信息 “空调制冷24℃”，我首先需要将空调页组件化，在 properties 中创建一个入口用来接收信息,其次，使用observers 对入口进行监听，最后在链接页引入组件，把信息 setData 后通过传给空调组件。天啊，我都说晕了，如果我的链接页和空调页隔了多个页面呢，如：主页（链接页）——>房间页——> 设备列表页——>空调页。不敢想，层层去 setData 这是多大的开销啊。

铺垫了这么久，下面该主角登场了（要不是屏幕正上方出现了“您的上机时间只剩5分钟，请及时续费”，我还能扯到鸡吃尽米山，狗舔完面山）。

订阅者模式，是将所有事件调度到一起，然后将事件分发给对应的订阅者。

如图：

在这里插入图片描述

代码实现

话不多说，都在酒里了。

class envet{
    constructor(){
        this.msg = {} //首先创建一个集合用来储存所有订阅的事件
    }

    /**
     * subscribe 用来订阅要回调的事件
     * @param {*} key 事件的标识符
     * @param {*} fn  回调函数
     */
    subscribe(key, fn){
        if(typeof fn != 'function') return //订阅事件不是函数直接返回
        if(!this.msg[key]) this.msg[key] = [] //不存在的事件创建
        this.msg[key].push(fn)   //添加函数到事件集合中。
    }

    /**
     * 发布事件方法，用来通知订阅的事件
     */
    publish(){
        //可能会疑问，为什么这里没有key值。
        //下面这样获取arguments中的第一个值就是key
        let key = Array.prototype.shift.call(arguments) 
        let callBack = this.msg[key]
        if(!callBack || !callBack.length) return //集合为空就返回
        //来了，这是重点。
        callBack.forEach(item=>{
            item.apply(this,arguments) //遍历集合下的每个函数，依次将arguments回调给函数
            //其实，这里写成 item.apply(null,arguments) 也行，我们需要的仅仅是arguments
        })
    }

    /**
     * 事件删除，传入key值（fn选填）
     * @param {*} key 
     * @param {*} fn 
     */
    remove(key,fn){
        let fns = this.msg[key]
        if(!fns || !fns.length) return //空的话返回
        if(!fn) delete this.msg[key]  //fn不填的话直接把这个集合删了
        else{
            for(let i=0;i<fns.length;i++){
                let _item = fns[i]
                if(_item === fn || _item.fn === fn){
                    fns.splice(i,1)  //遍历集合，如果相同的话，splice
                    break
                }
            }
        }
    }
}

就是这么简单，原理就是将 arguments 回调给订阅的函数。

尝试效果

在 app.js 中创建：

在这里插入图片描述

在 pageA 页面订阅：

在这里插入图片描述

跳转 pageB 页面发布 test1：

在这里插入图片描述

打印台输出：

在这里插入图片描述

此时我们看到 app.envet 中 msg 里有我们刚订阅的两个函数。

我们继续跳转 pageC 发布一条信息：

在这里插入图片描述

此时打印台输出：

在这里插入图片描述