源码分析Vue.js的监听实现教程


Posted in Javascript onApril 23, 2017

前言

相信一说到监听,当然就离不了设计模式中鼎鼎大名的观察者模式。举个例子,你家后院着火了,可一定要等到烟雾很大火光很亮你才能发现啊,可是当你安装了一个火灾预警器,当发生火灾就立马能够通知到你了。这就是一个典型的观察者模式。当然也还有一些其他变种,比如发布/订阅(publish/subscribe)模式。

我们知道如果要将数据和视图关联起来,在数据变更的时候,同步视图,同理视图变更,数据也发生变化。vue.js是怎么实现这个的呢?下面我们来揭开它的神秘面纱。

demo:

<script src="../vue.js"> </script>
<div id="app">
 <p>
 {{ message }}
 </p>
 <input v-model="message">
</div>
<script type="text/javascript">
new Vue({
 el: '#app',
 data: {
 message: 'Hello Vue.js!'
 }
});
</script>




set: function reactiveSetter(newVal) {
 var value = getter ? getter.call(obj) : val;
 if (newVal === value) {
 return;
 }
 if (setter) {
 setter.call(obj, newVal);
 } else {
 val = newVal;
 }
 childOb = observe(newVal);
 dep.notify();
}

这段代码出现在解析data属性的时候,即调用Object.defineProperty方法配置data的属性。一旦属性发生变化,就notify发送广播。

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就关联在一起了。

图片描述

源码分析Vue.js的监听实现教程

观察者模式

林林总总的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 ? subscribers.length : 0;

 while(len--){
  var args = Array.prototype.slice.call(arguments, 1);
  args.unshift(topic);
  subscribers[len].callback.apply(this, args);
 }
 return this;
 };

 q.subscribe = function (topic, callback) {
 if(!topics[topic]){
  topics[topic] = [];
 }

 var subuid = (++subUid).toString();

 topics[topic].push({
  token: subuid,
  callback: callback
 });

 return subuid;
 };

 q.unsubscribe = function (subid) {
 for(var k in topics){
  if(topics[k]){
  for(var i = 0, j = topics[k].length; i < j; i++){
   if(topics[k][i].token === subid){
   topics[k].splice(i, 1);
   return subid;
   }
  }
  }
 }
 return this;
 };
})(PubSub);

这就是一个简单的订阅发布系统,每注册一个订阅者,其实就是将其回调处理的callback保存在一个字典对象的数组中,字典对象的key值可以随意定义,只要与发布时的key对应起来就好。

怎么使用呢?

<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>

最后一个将不会打印出来,因为已经取消订阅了。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
Jan 24 Javascript
jquery使用append(content)方法注意事项分享
Jan 06 Javascript
判断访客终端类型集锦
Jun 05 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
js实现自定义路由
Feb 04 Javascript
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 Javascript
详解javascript函数写法大全
Mar 25 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
Jun 24 Javascript
Vue scoped及deep使用方法解析
Aug 01 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 #Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 #Javascript
Node.js中的require.resolve方法使用简介
Apr 23 #Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 #Javascript
vue拦截器Vue.http.interceptors.push使用详解
Apr 22 #Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
Apr 22 #Javascript
Vue.use源码分析
Apr 22 #Javascript
You might like
PHP学习笔记之二
2011/01/17 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
Laravel 4 初级教程之Pages、表单验证
2014/10/30 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
PHP 实现重载
2021/03/09 PHP
添加JavaScript重载函数的辅助方法2
2010/07/04 Javascript
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
JS简单实现浮动窗口效果示例
2016/09/07 Javascript
Vue.js第二天学习笔记(vue-router)
2016/12/01 Javascript
JS排序之快速排序详解
2017/04/08 Javascript
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
阿望教你用vue写扫雷小游戏
2020/01/20 Javascript
详细分析React 表单与事件
2020/07/08 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
在Python中处理XML的教程
2015/04/29 Python
Python操作MySQL数据库9个实用实例
2015/12/11 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
PyQt5 QSerialPort子线程操作的实现
2018/04/21 Python
Python 列表的清空方式
2020/01/13 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
Python lxml库的简单介绍及基本使用讲解
2020/12/22 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
德国户外商店:eXXpozed
2020/07/25 全球购物
安全标准化汇报材料
2014/02/03 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
励志演讲稿600字
2014/08/21 职场文书
2014年图书馆个人工作总结
2014/12/18 职场文书
宇宙与人观后感
2015/06/05 职场文书