前言
相信一说到监听,当然就离不了设计模式中鼎鼎大名的观察者模式。举个例子,你家后院着火了,可一定要等到烟雾很大火光很亮你才能发现啊,可是当你安装了一个火灾预警器,当发生火灾就立马能够通知到你了。这就是一个典型的观察者模式。当然也还有一些其他变种,比如发布/订阅(publish/subscribe)模式。
我们知道如果要将数据和视图关联起来,在数据变更的时候,同步视图,同理视图变更,数据也发生变化。vue.js是怎么实现这个的呢?下面我们来揭开它的神秘面纱。
demo:
<script src="/UploadFiles/2021-04-02/vue.js">Dep.prototype.notify = function () { // stablize the subscriber list first var subs = toArray(this.subs); for (var i = 0, l = subs.length; i < l; i++) { subs[i].update(); } };notify 最终是周知subscribe(订阅者)更新,那么上面的数据变更就是发布者。 subscribe是Watcher这个类的实例化对象,在实例化的时候,会传入回调函数来执行update,vue弄了一个队列来执行watcher的更新函数,具体可参考源码。
Watcher.prototype.run = function () { …… if (value !== this.value || (isObject(value) || this.deep) && !this.shallow) { …… } else { this.cb.call(this.vm, value, oldValue); } } this.queued = this.shallow = false; } };在Directive(指令)class中实例化了Watcher,_update函数负责来更新
var watcher = this._watcher = new Watcher(this.vm, this.expression, this._update, // callback { filters: this.filters, twoWay: this.twoWay, deep: this.deep, preProcess: preProcess, postProcess: postProcess, scope: this._scope });在解析模板的时候会解析Directive,然后绑定,实例化watcher,这样模板-data就关联在一起了。
图片描述
观察者模式
林林总总的mvc或者mvvm框架基本也都是利用了观察者模式,这个也非常有用,尤其在复杂的系统之中。
利用观察者模式,在典型的ajax应用中,回调的处理逻辑可以不跟请求耦合在一块,这样逻辑上也会更加清晰。如下是一个简单的发布/订阅模式的实现
var PubSub = {}; (function (q) { var topics = {}, subUid = -1; q.publish = function (topic) { if(!topics[topic]){ return false; } var subscribers = topics[topic], len = subscribers "htmlcode"><script> var messageLogger = function(){ console.log(JSON.stringify(arguments)); }; var subscription = PubSub.subscribe('/newMessage', messageLogger); // {"0":"/newMessage","1":"hello world"} PubSub.publish('/newMessage', 'hello world'); // {"0":"/newMessage","1":["test","a","b","c"]} PubSub.publish('/newMessage', ['test', 'a', 'b', 'c']); // {"0":"/newMessage","1":{"sender":"hello world","body":"hey man"}} PubSub.publish('/newMessage', { sender: 'hello world', body: 'hey man' }); PubSub.unsubscribe(subscription); PubSub.publish('/newMessage', ['test', 'a', 'b', 'c'], 1); </script>最后一个将不会打印出来,因为已经取消订阅了。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月27日
2024年09月27日
- 张学友.1999-有个人【宝丽金】【WAV+CUE】
- 纯音入心系列纯音乐《古筝佛曲》1CD[MP3][411.1MB]
- 纯音入心系列纯音乐《古筝世界名曲》1CD[MP3][38.9MB]
- 纯音入心系列纯音乐《古筝新奏-菩提妙音》1CD[MP3][112.3MB]
- 陈思安.1993-怀念福建金曲5CD【歌丽美】【WAV+CUE】
- 张学友.1999-有个人【宝丽金】【WAV+CUE】
- 许美静.1999-快乐无罪【上华】【WAV+CUE】
- 群星.2024-Jambo.Medley(BEYOND40周年·致敬2)【Kinns】【FLAC分轨】
- 林翠萍.1991-舞曲世界2辑【星河】【WAV+CUE】
- 关智斌.2007-In.Progress【英皇娱乐】【FLAC分轨】
- 群星.2000-电影主题曲原声带·琼瑶的世界【歌林】【WAV+CUE】
- 范世錡.2024-錡妙夜(EP)【天娱传媒】【FLAC分轨】
- 谭咏麟.2000-魅力千禧演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 纯音入心系列纯音乐《器乐古筝》1CD[MP3][239MB]
- 纯音入心系列纯音乐《华夏民乐之古筝篇》1CD[MP3][192MB]