vlambda博客
学习文章列表

f1(); // f1为耗时任务f2(); // f2依赖f1的结果

function f1(cb) { setTimeout(() => { // f1 的逻辑代码 // 。。。 cb() })}f1(f2) // f1被转化为异步任务，f2在它之后执行

const EVENT = {};

Function.prototype.on = function (eventName, cb) { EVENT[eventName] = cb;};

Function.prototype.trigger = function (eventName) { EVENT[eventName]();};

function f1() { setTimeout(() => { console.log("f1 start"); // 触发事件 f1.trigger('done') }, 1000);}

function f2() { console.log("f2");}

f1.on("done", f2); // 添加监听f1()

/** * 发布订阅方式 * 维护一个事件中心进行通信 */

const event = { // 事件中心 eventList: [],

 // 订阅事件, 添加一个回调逻辑 on(type, fn) { if (!this.eventList[type]) { this.eventList[type] = []; } this.eventList[type].push(fn); },

 // 发布事件, 遍历事件列表，去执行所有事件 emit(type, ...args) { const cbList = this.eventList[type]; if (!cbList || cbList.length === 0) return;

 cbList.forEach((cb) => { cb.apply(event, args); }); },};

let data = {};

// 我们可以订阅多个事件, 并且相比回调, 订阅结合发布完全解耦了, 两者并无关联性event.on("change", (data) => { // 订阅者1的逻辑 console.log("订阅者1: data obj change", data);});

event.on("change", (data) => { // 订阅者2的逻辑 if (Object.keys(data).length === 2) { console.log('订阅者2: data s数据有两个了', data) }});

// 发布事件: 我们可以等待数据状态发生变化或者 异步执行完去发布setTimeout(() => { data.name = 'huhua' // 发布者, 我想在哪发就在哪发 event.emit('change', data)}, 1000);

setTimeout(() => { data.age = '26' event.emit('change', data)}, 2000);

/** * 观察者模式的简易实现 * 观察者对象: 需要在被观察者状态变化时触发更新逻辑 * 被观察者对象: 需要收集所有的对自己进行观测的观察者对象 */

// 被观察者// 对于一个被观察的人来说: 我要知道是哪些人在观察我, 我的状态怎么样class Sub { constructor(name) { this.name = name; this.state = "pending"; this.observer = []; // 存放所有观察者的集合 }

 // 添加观察者 add(ob) { this.observer.push(ob); } // 更改状态 setState(newState) { this.state = newState; // 状态改了不得告诉所有观察者啊, 其实就是执行观察者对象的更新函数 this.notify(); } // 通知 notify() { this.observer.forEach((ob) => ob && ob.update(this)); }}

// 观察者class Observer { constructor(name) { this.name = name; }

 update(sub) { console.log( `观察者${this.name} 已收到被观察者${sub.name}状态改变了: ${sub.state}` ); }}

let sub = new Sub('学生小麦')

let ob1 = new Observer('语文老师')let ob2 = new Observer('数学老师')let ob3 = new Observer('英语老师')

// 与发布订阅不同的是, 这里被观察者需要添加所有的观察者对象, 以便在自己状态改变时去执行观察者的更新逻辑// 二者有关联关系, 我要知道我被谁观察

// 发布订阅中, 发布者和订阅者之间没有关联关系, 通过事件中心来管理// 订阅不需要知道谁去发布sub.add(ob1)sub.add(ob2)sub.add(ob3)

sub.setState('fulfilled')// 观察者语文老师 已收到被观察者学生小麦状态改变了: fulfilled// 观察者数学老师 已收到被观察者学生小麦状态改变了: fulfilled// 观察者英语老师 已收到被观察者学生小麦状态改变了: fulfilled

sub.setState('rejected')// 观察者语文老师 已收到被观察者学生小麦状态改变了: rejected// 观察者数学老师 已收到被观察者学生小麦状态改变了: rejected// 观察者英语老师 已收到被观察者学生小麦状态改变了: rejected