标签： 观察者

最近项目中遇到一个小需求，需要用到on和emit的场景，夸两个项目。其中一个项目中已经集成rxjs，但是另一个项目没有。为了快速解决问题，避免杀鸡用牛刀（主要是没时间解释rxjs）。今天又写了一个简易的观察者实现。

需求是这样的：在子页面去订阅show和hide这2个事件，然后在父页面异步的去eimt这2个事件

实现原理：
1. 在2个页面中使用一个client对象作为中介；
2. 使用subObj最为一个订阅者来保存各种事件；
3. 然后client里面提供on方法让子页面可以调用，来把事件保存的subObj这个订阅者中为将来调用做准备；
4. 创建一个emit方法来触发subObj订阅者里面的各种事件；
5. 异步来调用emit方法来触发需要的事件

//father page(play)
var client = {}; // 中介(sdk)

var subObj = {}; //订阅者

// 订阅函数
function sub(name, cb) {
  subObj[name] = cb;
}
// 触发事件函数
function emit(name) {
  subObj[name]();
}

//执行触发事件
setTimeout(function () {
  emit("show");
}, 2000);

setTimeout(function () {
  emit("hide");
}, 4000);

client.on = function (name, cb) {
  sub(name, cb);
};

//children page (live ui)
function show() {
  console.log("ui was show");
}
function hide() {
  console.log("ui was hide");
}

// 订阅事件
this.client.on("show", function () {
  show();
});
this.client.on("hide", function () {
  hide();
});