极简js的观察者模式实现

最近项目中遇到一个小需求,需要用到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();
});

 

本站文章如未注明均为原创 | 文章作者:刘晓帆 | 转载请注明来自:前端印象

发表评论

邮箱地址不会被公开。 必填项已用*标注

浏览量:24 次浏览