小程序系列--Event事件总线

EventBus

在Android开发中，有个非常还有的工具就是EventBus，可以轻松实现任意组件之间的通信，帮助代码解耦。EventBus如何使用就不介绍了，网上多的是。其主要的实现思路是：

用hashMap 记录了事件、事件的订阅者，已经订阅的方法。
当有事件发出时，就从hashMap 中找到事件对应的订阅者，再通过反射的方法调用订阅者的订阅方法。

wx小程序

在开发小程序的时候，有时需要做页面之间的数据局部刷新，这个逻辑就非常复杂。
比如A 页面显示了评论的数量，接下来进入B页面进行评论，接下来回到A页面，让评论的数量+1。

通常的做法是：
B页面每次评论完成的时候，用全局变量记录评论的数量。A 页面 onShow 的时候再修改评论的数量。
缺点是需要全局变量，如果这样的需求少还行，多的话就会有N个全局变量，代码不好管理。

所以试着把EventBus 搬到小程序里，没想到居然成功了。Page的页面管理非常像Android 的Activity栈，之前的Page只是存在栈中，并没有销毁掉，所以可以拿到Page对象，然后调用Page中的方法。

wxEvent

随便起个名字，叫什么无所谓。功能没有EventBus 那么强大，好用就行。

先定义个HashMap，js好像没有这玩意，方便记录事件对象与Page对象。

function HashMap() {
  //定义长度  
  var length = 0;
  //创建一个对象  
  var obj = new Object();

  /** 
  * 判断Map是否为空 
  */
  this.isEmpty = function () {
    return length == 0;
  };

  /** 
  * 判断对象中是否包含给定Key 
  */
  this.containsKey = function (key) {
    return (key in obj);
  };

  /** 
  * 判断对象中是否包含给定的Value 
  */
  this.containsValue = function (value) {
    for (var key in obj) {
      if (obj[key] == value) {
        return true;
      }
    }
    return false;
  };

  /** 
  *向map中添加数据 
  */
  this.put = function (key, value) {
    if (!this.containsKey(key)) {
      length++;
    }
    obj[key] = value;
  };

  /** 
  * 根据给定的Key获得Value 
  */
  this.get = function (key) {
    return this.containsKey(key) ? obj[key] : null;
  };

  /** 
  * 根据给定的Key删除一个值 
  */
  this.remove = function (key) {
    if (this.containsKey(key) && (delete obj[key])) {
      length--;
    }
  };

  /** 
  * 获得Map中的所有Value 
  */
  this.values = function () {
    var _values = new Array();
    for (var key in obj) {
      _values.push(obj[key]);
    }
    return _values;
  };

  /** 
  * 获得Map中的所有Key 
  */
  this.keySet = function () {
    var _keys = new Array();
    for (var key in obj) {
      _keys.push(key);
    }
    return _keys;
  };

  /** 
  * 获得Map的长度 
  */
  this.size = function () {
    return length;
  };

  /** 
  * 清空Map 
  */
  this.clear = function () {
    length = 0;
    obj = new Object();
  };
}

然后就可以往hashMap中放Event对象了。
以下代码仿EventBus 写的

var events  = new HashMap(); 

function register(page, event) {
  events.put(event, page);
}

function unregister(event) {
  events.remove(event);
}

function post(event, data) {
  var page = events.get(event);
  if (page && isHostMethod(page, 'refresh')) {
    page.refresh(data);
  }
}

module.exports = {
  register,
  unregister,
  post,
}

register 注册事件，传当前的Page对象与event对象
unregister 取消注册事件
post 发出事件与要传递的数据，可以看到其实只是调用了 Page 的 refresh() 方法
js中貌似没有反射，只能写死用refresh() 了。 ╮（╯＿╰）╭

使用

A页面

var eventUtils = require("../../utils/EventUtils.js");

Page({
  data: {
    text: '',
  },
  
  sencod:function(){
    wx.navigateTo({
      url: '../../pages/second/second',
    })
  },
  
  onLoad: function (options) {
    eventUtils.register(this,"666666");
  },

  onUnload: function () {
    eventUtils.unregister("666666");
  },

  refresh: function(data){
    this.setData({
      text:data,
    });
  }
})

B 页面

var eventUtils=require("../../utils/EventUtils.js");

Page({
  /**
   * 页面的初始数据
   */
  data: {
  },

  sendPost:function(){
    eventUtils.post("666666","真溜！");
  }
})