小程序之事件总线

一.主要原理

我把一些会被多个页面调用的事件放到一个集合里面，以事件名称为key，以事件及其回调函数的数组为值。大概的形式如下。

events={“event_name1”:[[o11,callback11],[o12,callback12]],"event_name2":[[o21,callback21],[o22,callback22]]}

然后其他的页面就可以从这个池子（集合）里面通过事件名称找到对应的事件元素，拿到他的callback函数，进行调用了。

二.主要代码

事件总线的主要代码如下：

let events = {};

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

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

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

module.exports = {
    on: on,
    remove: remove,
    emit: emit
}

首先我们定义了一个events对象，它的结构就是我们上面所说的那样。然后我们写了三个函数，分别是on,remove,emit。分别分别代表将事件注册，事件卸载，还有调用事件。

在on方法中，我们先检查当前name所对应的事件是否已存在（通过Array.isArray方法来判断其是否是数组，因为当callbacks为[]或者undifined的时候，该方法返回false）.如果不存在，则将当前的tuple置为二维数组中的第一个数组元素。

在remove方法中，我们先通过name获取到其对应的二维数组callbacks,还是先通过Array.isArray判断该二维数组是否存在，如果存在，开始遍历该二维数组，并且过滤掉第一个元素为self的数组。（这边使用到了数组的filter方法，该方法通过回调函数会保留判断为true的元素，剔除掉判断为false的元素）。然后我们把过滤后的二维数组重新赋值给events[name]。这样就实现了事件的卸载。

最重要的是emit函数，这也是我们做事件总线的主要原因：我们同样通过name来获取二维数组，然后执行该二维数组中的每一个回调函数，此处通过call方法来实现。

三.使用方法

onShow: function () {
    const _this = this;
    const key = app.config.amapkey;
    const initAmap = new amap.AMapWX({ key: key });
    events.on('locationData', this, function (data) {
      const origin = data.longitude + ',' + data.latitude;
      const destination = app.globalData.destination;
      initAmap.getDrivingRoute({
        origin: origin,
        destination: destination,
        success: function (data) {
          let points = [];
          if (data.paths && data.paths[0] && data.paths[0].steps) {
            const steps = data.paths[0].steps;
            for (var i = 0; i < steps.length; i++) {
              const poLen = steps[i].polyline.split(';');
              for (var j = 0; j < poLen.length; j++) {
                points.push({
                  longitude: parseFloat(poLen[j].split(',')[0]),
                  latitude: parseFloat(poLen[j].split(',')[1])
                })
              }
            }
          }
          if (data.paths[0] && data.paths[0].distance) {
            _this.setData({
              distance: data.paths[0].distance + '米'
            });
          }
          _this.setData({
            polyline: [{
              points: points,
              color: "#0091ff",
              width: 1,
              dottedLine: true
            }]
          });
        }
      })
      console.log(destination)

      const markersArray = [{
        iconPath: '/resources/image/yipin.png',
        id: 'pickUpAddress',
        longitude: parseFloat(destination.split(',')[0]),
        latitude: parseFloat(destination.split(',')[1]),
        width: 25,
        height: 25,
        title: '自提地点',
        label: {
          content: '厦门出口加工区\n海景东路18号2楼',
          bgColor: '#fff',
          padding: '5',
          borderRadius: '3'
        }
      }, {
        id: 'myLocation',
        longitude: data.longitude,
        latitude: data.latitude,
      }]
      _this.setData({
        markersArray, markersArray
      })
    })
  },

上述代码的第5行，注册了一个事件，名称叫做locationData，并且传入参数this，指代当前页面的page对象，还有一个匿名回调函数。

接下来看如何调用这个事件

  sendLocation: function () {
    const _this = this;
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        events.emit('locationData', res);
      }
    })
  },

调用emit函数，传入事件名称locationData，并且参数res（对应回调函数的参数data）

事件销毁方法如下：

  onUnload: function () {
    const _this = this;
    clearInterval(_this.data.locationTimer)
    events.remove('locationData', this);
  },