网站前端与后台必须同时做吗,做网站用的各种图标大全,wordpress主页删除,go语言做的网站这段时间在看vue的双向绑定原理#xff0c;知道了vue的核心三大件#xff1a;Observer, Complie, Watcher。 Observer用于监听属性的变化#xff0c;如有变动就通知 Watcher。 Compile负责解析元素节点的指令#xff0c;如v-if#xff0c;v-bind之类, 进行数据和回调函数的…这段时间在看vue的双向绑定原理知道了vue的核心三大件Observer, Complie, Watcher。 Observer用于监听属性的变化如有变动就通知 Watcher。 Compile负责解析元素节点的指令如v-ifv-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);
复制代码这周末比较忙就先简单记录一下争取早日搞懂双向绑定原理分享出来给有需要的人。
