需求:在任意一个页面上实时监听全局变量发生的改变。

第一步

  • 新建 utils 文件夹,并在文件夹中新建 onEvent.js 文件。
var events = {};
function on(name, self, callback) {
    var tuple = [self, callback];
    var callbacks = events[name];
    if (Array.isArray(callbacks)) {
        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;

第二步

  • 在需要监听的页面引入 onEvent.js 文件,并加入以下代码。
const event = require('../../utils/onEvent.js');
...
...
    onShow(){
        event.on('DataChanged', this, function (Rx_data) {
            console.log("接收数据发生改变");
            this.setData({infos:app.globalData.info})
        });
    },

第三步

  • 在数据改变页面加入以下代码。
const event = require('../../utils/onEvent.js');
...
event.emit('DataChanged', "wechat");
...