本文共 1580 字,大约阅读时间需要 5 分钟。
这段时间在看vue的双向绑定原理,知道了vue的核心三大件:Observer, Complie, Watcher。
Observer用于监听属性的变化,如有变动就通知 Watcher。
Compile负责解析元素节点的指令,如v-if,v-bind之类, 进行数据和回调函数的绑定。
Watcher收到属性变动的通知,就触发对应属性的回调函数,更新视图。
在学习 Watcher 的实现时,发现用的是发布订阅模式,也称观察者模式。
其实我们从开始用 js/jQuery 监听事件开始,就已经在用发布订阅模式了。
例如 DOM 中的 addEventListener, jquery 的 on 绑定事件。
发布订阅模式,比较好理解。举几个例子:
电饭煲煮饭,电饭煲本身并不知道要在什么时候跳到保温,它就只能等通知,等到饭烧好了,电饭煲的某个控制器就发出一个通知, 喂喂喂,饭熟了,不要再煮了。OK,电饭煲的电源控制器收到通知了,好,我跳保温。
dianfanbao.addEvent('煮好了', function(){ jumpTo('保温');});复制代码
生活中的烧水啊,空调定时啊,你要买房子需要等开盘消息呀,都可以算是发布订阅模式吧。
发布订阅的核心思想就是维护一个对象,对象里面存放着各种事件的数组,根据不同的事件遍历不同的数组,执行回调。
一言不合上代码
class EventModel { constructor() { this.events = {}; } on(eventType, fn) { if (!this.events[eventType]) { this.events[eventType] = []; } this.events[eventType].push(fn); } trigger(eventType, ...args) { let eventCallbacks = this.events[eventType]; if (Array.isArray(eventCallbacks)) { eventCallbacks.forEach( fn => fn.apply(this, args) ); } } off(eventType, fn) { let eventCallbacks = this.events[eventType]; if ( !fn ) { eventCallbacks.length = 0; } let idx = eventCallbacks.indexOf(fn); if (idx !== -1) { eventCallbacks.splice(idx, 1); } }}复制代码
测试
let event = new EventModel();let f = x => alert(x);event.on('click', f);event.trigger('click', 2); //alert(2);event.off('click', f);复制代码
这周末比较忙,就先简单记录一下,争取早日搞懂双向绑定原理,分享出来给有需要的人。
作者:jkCaptain 链接:https://juejin.im/post/5b13601c6fb9a01e8a43278b 来源:掘金 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。