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 相关文章推荐
js与运算符和或运算符的妙用
Feb 14 Javascript
jQuery实现跨域
Feb 03 Javascript
深入理解JavaScript中的并行处理
Sep 22 Javascript
js 判断附件后缀的简单实现方法
Oct 11 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 Javascript
Bootstrap简单表单显示学习笔记
Nov 15 Javascript
JS实现的简单图片切换功能示例【测试可用】
Feb 14 Javascript
javascript数据结构之串的概念与用法分析
Apr 12 Javascript
基于LayUI实现前端分页功能的方法
Jul 22 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 Javascript
Javascript数组及类数组相关原理详解
Oct 29 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 远程图片保存到本地的函数类
2008/12/08 PHP
实例介绍PHP的Reflection反射机制
2014/08/05 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
5 种JavaScript编码规范
2018/01/30 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
JS实现星星海特效
2019/12/24 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
django定期执行任务(实例讲解)
2017/11/03 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
Python判断变量名是否合法的方法示例
2019/01/28 Python
python join方法使用详解
2019/07/30 Python
python实现简易淘宝购物
2019/11/22 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
python3爬虫中引用Queue的实例讲解
2020/11/24 Python
C++和python实现阿姆斯特朗数字查找实例代码
2020/12/07 Python
CSS+jQuery+PHP+MySQL实现的在线答题功能
2015/04/25 HTML / CSS
Java的for语句中break, continue和return的区别
2013/12/19 面试题
文明教师事迹材料
2014/01/16 职场文书
迟到检讨书大全
2014/01/25 职场文书
给老师的一封建议书
2014/03/13 职场文书
小学校本培训方案
2014/06/06 职场文书
会计专业求职信
2014/08/10 职场文书
租房协议书
2014/09/12 职场文书
影视后期实训报告
2014/11/05 职场文书
2015年乡镇平安建设工作总结
2015/05/13 职场文书
恋恋笔记本观后感
2015/06/16 职场文书
《七律·长征》教学反思
2016/02/16 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js
PO模式在selenium自动化测试框架的优势
2022/03/20 Python
Python实现信息管理系统
2022/06/05 Python