• 在小程式裡，每個 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)
    },
    ...
})