Vue数据驱动模拟实现5


Posted in Javascript onJanuary 13, 2017

一、前言

在"模拟Vue之数据驱动4"中,我们实现了push、pop等数组变异方法。

但是,在随笔末尾我们提到,当pop、sort这些方法触发后,该怎么办呢?因为其实,它们并没有往数组中新增属性呢。

而且,当数据改动后,如果我们在变动数据处,就立即更改数据也未免性能不够,此时,走读Vue源码,发现他用了一个很巧妙的方法,就是职责链模式。当某个数据有所变动时,它会向上传递,通俗点就是冒泡至根结点,这样我们也可以在自己代码中使用事件代理咯,哇卡哇卡。

示意图如下所示:

Vue数据驱动模拟实现5

好了,说了这么多,我们下面就一起来实现下吧。

二、正文

注:以下代码皆编写在observer.js文件中。

首先,当数据变动,或者触发某个事件时,我们需要与变动数据关联一个自定义事件(自定义事件详情见here),如果触发某个事件,那么就执行,如下:

绑定事件方法:

//let p = Observer.prototype
p.on = function(eventName, fn){
 let listener = this.listener = this.listener || [];
 if(typeof eventName === 'string' && typeof fn === 'function'){
  if(!listener[eventName]){
   listener[eventName] = [fn];
  }else{
   listener[eventName].push(fn);
  }
 } 
}

取消事件方法:

//let p = Observer.prototype
p.off = function(eventName, fn){
 let listener = this.listener = this.listener || [];
 let actionArray = listener[eventName];
 if(typeof eventName === 'string' && Array.isArray(actionArray)){
  if(typeof fn === 'function'){
   actionArray.forEach( (func, i, arr) => {
    if(func === fn){
     arr.splice(i,1); 
    }
   });
  }
 }
}

触发事件方法:

//let p = Observer.prototype
p.emit = function(eventName){
 let listener = this.listener = this.listener || [];
 let actionArray = listener[eventName];
 if(Array.isArray(actionArray)){
  actionArray.forEach( func => {
   if(typeof func === 'function'){
    func(); 
   }
  }); 
 }
}

其次,就是当数据变动,触发自身相关事件后,怎么一路冒泡到根结点的处理了。

怎么冒泡到根结点呢?

那就自身结点关联父结点嘛,这样不就可以追溯到根节点了么。

所以,我们在Observer.walk时,就将自己的父节点记录即可,如下:

//let p = Observer.prototype
p.observe = function(key, data){
 if(typeof data === 'object'){
  let ob = new Observer(data); 
  //关联父节点
  ob._parent = {
   key,
   ob: this
  };
 } 
}

最后,有了子父结点的依赖关系,那么冒泡方法就OK啦,如下:

//let p = Observer.prototype
p.notify = function(eventName){
 let ob = this._parent && this._parent.ob;
 let key = ob && this._parent.key || 'root';
 console.log('parent--'+key+' event--'+eventName);
 this.emit(eventName);
 //判断节点是否有父节点,若有,就向上传递事件
 ob && ob.notify(eventName); 
}

Perfect,具体代码详见github.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
不一样的文字闪烁 轮番闪烁
Nov 11 Javascript
javascript天然的迭代器
Oct 29 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
Jan 20 Javascript
Bootstrap 网格系统布局详解
Mar 19 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
Dec 27 Javascript
微信小程序实现简单表格
Feb 14 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
jQuery 动画与停止动画效果实例详解
May 19 jQuery
vue渲染方式render和template的区别
Jun 05 Javascript
三步搞定:Vue.js调用Android原生操作
Sep 07 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
Jan 13 #Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
Jan 13 #Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 #Javascript
jQuery实现的简单排序功能示例【冒泡排序】
Jan 13 #Javascript
js实现淡入淡出轮播切换功能
Jan 13 #Javascript
js仿百度音乐全选操作
Jan 13 #Javascript
js实现tab选项卡切换功能
Jan 13 #Javascript
You might like
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
Laravel 5框架学习之Eloquent 关系
2015/04/09 PHP
php 批量查询搜狗sogou代码分享
2015/05/17 PHP
yii数据库的查询方法
2015/12/28 PHP
jquery多浏览器捕捉回车事件代码
2010/06/22 Javascript
jquery中的查找parents与closest方法之间的区别
2013/12/02 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
浅谈javascript 迭代方法
2015/01/21 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
vue.js项目打包上线的图文教程
2017/11/16 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
Python实现的检测网站挂马程序
2014/11/30 Python
Python下载网络小说实例代码
2018/02/03 Python
详解Python核心对象类型字符串
2018/02/11 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
django如何实现视图重定向
2019/07/24 Python
python的命名规则知识点总结
2019/10/04 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
python使用Word2Vec进行情感分析解析
2020/07/31 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
英国网上花店:Bunches
2016/11/29 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
股东合作协议书
2014/04/14 职场文书
教师三严三实心得体会
2014/10/11 职场文书
2014年团总支工作总结
2014/11/21 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
综治目标管理责任书
2015/05/11 职场文书
白银帝国观后感
2015/06/17 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS