功能⑩ 小程序跨页面通信解决思路 -- event.js

• 在小程序里，每个 Page 都是一个模块，有着独立的作用域，因此 Page 间需要有一种通信策略。

小程序登录&注册之后会自动切换首页角色+内容展示

发布／订阅模式

• 发布／订阅模式由一个发布者、多个订阅者以及一个调度中心所组成。

发布 / 订阅模式如何实现解耦？

1. 订阅者和发布者并不需要关心对方的状态

2. 订阅者只管订阅事件并注册回调

3. 发布者只管发布事件

4. 其余一切交给调度中心来调度

代码实现

1 实现一个event.js

var events = {};

function on(name, self, callback) {
    var tuple = [self, callback];
    var callbacks = [];
        callbacks = events[name];
    if (Array.isArray(callbacks)) {
        callbacks.splice(name,1)
        callbacks.push(tuple);
    }
    else {
        events[name] = [tuple];
    }
}

function remove(name, self) {
    var callbacks = events[name];
    if (Array.isArray(callbacks)) {
        events[name] = callbacks.filter((tuple) => {
            return tuple[0] != self;
        })
    }
}

function emit(name, data) {
    var callbacks = events[name];
    if (Array.isArray(callbacks)) {
        callbacks.map((tuple) => {
            var self = tuple[0];
            var callback = tuple[1];
            callback.call(self, data);
        })
    }
}


exports.on = on;
exports.remove = remove;
exports.emit = emit;

2 具体调用

2.1 将events挂载到App中，方便每个Page调用

const event = require('./utils/event')
App({
    event,
    ...
})

2.2 在首页onLoad生命周期中订阅 kLoginSuccessEventName 事件

// index.js
var app = getApp()
Page({
    onLoad: function(){
        app.event.on('kLoginSuccessEventName', this, 
        () => {
            ...
        })
    },
    ...
})

2.3 在登录页中发布 kLoginSuccessEventName 事件

// login.js
var app = getApp()
Page({
    kLoginSuccessEventName() {
        ...
        event.emit(event.kLoginSuccessEventName,true)
    },
    ...
})   

2.4 在首页onUnLoad生命周期中销毁之前订阅的 kLoginSuccessEventName 事件

// index.js
var app = getApp()
Page({
    onUnLoad: function(){
        app.event.remove('kLoginSuccessEventName', this)
    },
    ...
})