我们在处理业务需求的时候，常常会遇到一些情况：

在二级或者三级页面进行某些操作或者变更后，需要将结果通知到上级页面去。比如：

• 选择了某些配置项，点击保存后，外部页面能够立即变更
• 在头像上传页面，上传完毕后，外部页面的头像能够立即显示为新头像

这个时候就涉及到如何在页面之间通信的问题了。跨页面通信，其实就是一个程序内部的事件通知机制问题，在其他平台或者 OS 上都一些相应的实现，比如:

• iOS SDK 自带的 NotificationCenter
• Android 平台著名的第三方库 EventBus

目前，微信小程序官方 SDK 还没有提供 Event API 来帮助开发者实现页面间通信。所以，今天知晓程序邀请到「云梦声音向导」小程序的开发者 Danny，教大家如何实现这样一个简单的小工具。

想和本文作者直接交流？现在就加入知晓程序的开发交流群吧。关注微信号 zxcx0101，点击菜单栏的「加群交流」即可。

Quick and Dirty

我们知道，在小程序里面一个页面的变化，是通过调用 setData函数来实现的。

所以，想做到在二级页面里让一级页面产生变化，最 quick 也最 dirty 的做法就是，把一级页面的 this传入到二级页面去。这样，我们在二级页面调用page1.setData(…)就可以立即引发外部的变化。

但是这并不是一个好的方案，不仅产生了页面的耦合，而且也并不能处理复杂的数据逻辑。因为，二级页面不并清楚也不应该关心一级页面想怎么处理当前数据。

所以，二级页面只应该把变更后的数据通知给一级页面即可，至于一级页面是想刷新界面，还是想本地存储或者发起网络通信，都与其他页面没有关系了。

简单的 Callback

如果只是想把数据通知给外部页面，那应该怎么做呢？现在，我们来考虑另一个方案。

如果需要产生一个通知，就需要用到 callback机制。它需要做到：

• 了解数据变化的页面，注册一个 callback函数到一个公共的地方（所有页面可以访问的地方）
• 而数据变更者在变更数据后，将新的数据放入同一个公共的地方
• 在放入数据时，同时调用这个 callback函数，让callback函数实现者接收到这个变化

那这个「公共的地方」在哪里呢？ 第一反应就是全局逻辑页面 app.js里面。

小程序提供了一个叫做 getApp的 API，它可以在page初始化时，通过var app = getApp来获取 app 实例，从而实现全局的数据共享。

而且，微信也很贴心的在新建项目之后的 quick start 代码里，留了一个 globalData字段，暗示开发者这里是可以用来存储全局数据的。

我们首先对全局逻辑代码 app.js动刀子，增加addListener方法。

	//app.js App({ addListener: function (callback) { this.callback = callback; }, setChangedData: function (data) { this.data = data; if (this.callback != null) { this.callback(data); } } })

然后，我们在其他页面合适的位置调用 addListener。

	//page1.js var app = getApp Page({ onLoad: function { app.addListener(function (changedData) { that.setData({ data: changedData }); }); } })

	//page2.js var app = getApp Page({ onBtnPress: function { app.setChangedData('page2-data'); } })

一个基本合格的方案

以上就是跨页面通信的最基本原理，但这也是一个很 dirty 的方案。

因为，上面的代码只能支持一种 Event的通知，而且也不能针对这个Event添加多个监听者（比如有多个页面需要同时知道某数据变更）。

一个基本合格的 Event管理器应该具备怎样的能力？

• 支持多种 Event的通知
• 支持对某一 Event可以添加多个监听者
• 支持对某一 Event可以移除某一监听者
• 将 Event的存储和管理放在一个单独模块中，可以被所有文件全局引用

根据以上的描述，我们来设计一个新的 Event模块，它应该具有如下三个函数：

• on函数：用来向管理器中添加一个Event的Callback，且每一个Event必须有全局唯一的EventName，函数内部通过一个数组来保存同一Event的多个Callback
• remove函数：用来向管理器移除一个Event的Callback
• emit函数：用来触发一个Event

我们现在就来动手构建这样一个新的模块。

首先，在小程序的 utils目录中，新建一个event.js文件。

	//event.js var events = {}; function on(name, callback) { var callbacks = events[name]; addToCallbacks(callbacks, callback); } function remove(name, callback) { var callbacks = events[name]; removeFromCallbacks(callbacks, callback); } function emit(name, data) { var callbacks = events[name]; emitToEveryCallback(callbacks, data); } exports.on = on; exports.remove = remove; exports.emit = emit;

之后在页面中，我们就可以使用这个 Event模块。

首先，我们在二级页面中触发事件。

	//page2.js var event = require('../../utils/event.js'); Page({ onBtnPress: function { event.emit('DataChanged', 'page2-data'); } });

然后，我们在一级页面中在 onLoad中监听事件、在onUnload中取消监听：

	//page1.js var event = require('../../utils/event.js'); Page({ onLoad: function { var that = this; event.on('DataChanged', function (changedData) { that.setData({ data: changedData }); }); }, onUnload: function { event.remove('DataChanged', ...); } });

咦，似乎哪里不对？

remove需要接受两个参数，第一个是EventName，第二个是Callback，但是我们的Callback以匿名函数的方式写在了event.on(...)的调用语句里面。

好吧，那我们不得不修改一下语句的调用方式：

	//page1.js var event = require('../../utils/event.js'); Page({ onDataChanged: function (changedData) { this.setData({ data: changedData }) }, onLoad: function { event.on('DataChanged', this.onDataChanged); }, onUnload: function { event.remove('DataChanged', this.onDataChanged); } });

这样就 OK 了么？NO NO NO NO！

熟悉 Javascript this这个大坑的朋友们一定会知道，在onDataChanged这个函数中调用的this，并不是我们Page中的那个this，所以根本不可能调用到this.setData(....)，于是我们用bind大法稍微调整一下：

	onLoad: function { event.on('DataChanged', this.onDataChanged.bind(this)); } onUnload: function { event.remove('DataChanged', this.onDataChanged.bind(this)); }

现在OK了么？NO NO NO NO！如果大伙敲代码试试，就会发现依然还是不行！

因为 this.onDataChanged.bind(this)会产生一个新的匿名函数，即bind的返回值是一个函数。

那么，在 onLoad和onUnload里面，各自调用了bind大法，从而产生了各自的匿名函数。

也就是说 event.remove(...)塞进去的那个函数，并不是event.on(...)塞进去的那个函数。这样就造成了remove时无法正确匹配。

removeFromCallbacks的伪代码大致如下：

	function removeFromCallbacks(callbacks, callback) { var newCallbacks = ; for (var item in callbacks) { if (item != callback) { newCallbacks.push(item); } } return newCallbacks; }

我们会发现 remove传入的callback，永远无法在callbacks数组中被匹配到，从而也就无法正确移除了。

最终的代码实现

当 EventName + Callback无法唯一决定需要移除的监听者时，那么自然想到的就是再增加一个key值，我们可以用Page自身的某个特性来做key，比如pageName，新的remove原型如下：

function remove(eventName, pageName, callback);

pageName 是一个字符串，如果开发者不能做到全局内 page name 唯一的话（比如开发者一不小心写错了），那就可能会出现后来监听者冲掉前面监听者的情况，从而造成无法收到通知的 bug。

所以，这里看起来还是用 page 的 this 做 key 比较靠谱，修改后的函数原型如下：

	function on(name, self, callback); function remove(name, self, callback);

让我们来看看内部具体怎么实现。以下是一个完整的 on函数实现：

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

第二行我们将 self（即page的this）和callback合并成一个tuple；第三行从events容器中，取出该EventName下的监听者数组callbacks。

如果该数组存在，则将 tuple加入数组；如果不存在，则新建一个数组。

remove的完整实现：

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

第二行从 events容器中，取出该EventName下的监听者数组callbacks。

如果 callbacks不存在，则直接返回；如果存在，则调用callbacks.filter(fn)方法。

filter方法的含义是通过fn来决定是否过滤掉callbacks中的每一个项。fn返回true则保留，fn返回false则过滤掉。

所以，我们调用 callbacks.filter(fn)后，callbacks中的每一个tuple都会被依次判定。

fn的定义为：

	(tuple) = & gt; { return tuple[0] != self; }

tuple中的第一个元素self和remove传入的self相比较。

如果不相等则返回 true被保留，如果相等则返回false被过滤掉。

callbacks.filter(fn)会返回一个新的数组，然后重新写入events[name]，最终达到移除callbacks中某一项的逻辑。

最后再来看看emit的实现：

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

第二行从 events容器中，取出该EventName下的监听者数组callbacks。

如果 callbacks不存在，则直接返回；如果存在，则调用callbacks.map(fn)方法。

和 filter的用法类似，map函数的作用相当于for循环，依次取出callbacks中的每一个项，然后对其执行fn(tuple)。

从其名字就可以看出 map就是映射变换的意思，将item变换为另外一种东西，这个映射关系就是fn。

fn的定义为：

	(tuple) = & gt; { var self = tuple[0]; var callback = tuple[1]; callback.call(self, data); }

对传入的 tuple，分别取出self和callback，然后调用 Javascript 的call大法：

fn.call(this, args)

从而最终实现调用到监听者的目的。

讲到这里就基本上差不多了，因为 Event模块持有了Page的this，所以一定要在Page的Unload函数中调用event.remove(…)，不然会造成内存泄露。