vue双向数据绑定原理探究(附demo)


Posted in Javascript onJanuary 17, 2017

昨天被导师叫去研究了一下vue的双向数据绑定原理。。。本来以为原理的东西都非常高深,没想到vue的双向绑定真的很好理解啊。。。自己动手写了一个。

传送门

双向绑定的思想

双向数据绑定的思想就是数据层与UI层的同步,数据再两者之间的任一者发生变化时都会同步更新到另一者。

双向绑定的一些方法

目前,前端实现数据双向数据绑定的方法大致有以下三种:

1.发布者-订阅者模式(backbone.js)

思路:使用自定义的data属性在HTML代码中指明绑定。所有绑定起来的JavaScript对象以及DOM元素都将“订阅”一个发布者对象。任何时候如果JavaScript对象或者一个HTML输入字段被侦测到发生了变化,我们将代理事件到发布者-订阅者模式,这会反过来将变化广播并传播到所有绑定的对象和元素。

2.赃值检测(angular.js)

思路:通过轮询的方式检测数据变动。才特定的事件触发时进入赃值检测。

大致如下:

•   DOM事件,譬如用户输入文本,点击按钮等。( ng-click )

•   XHR响应事件 ( $http )

•   浏览器Location变更事件 ( $location )

•   Timer事件( $timeout , $interval )

•   执行 $digest() 或 $apply()

3.数据劫持(vue.js)

思路:使用Object.defineProperty对数据对象做属性get和set的监听,当有数据读取和赋值操作时则调用节点的指令,这样使用最通用的=等号赋值就可以触发了。

wue双向数据绑定小demo思路

①  构造一个Wue对象,定义该对象的属性el、data,创建对象的时候传相应数据,并执行init()方法。

var Wue=function(params){
 this.el=document.querySelector(params.el);
 this.data=params.data;
 this.init();
};

②  Init方法中执行bindText和bindModel方法,这两个方法分别是解析dom中绑定了w-model、w-text指令的html,并作相应处理。

init:function(){
  this.bindText();
  this.bindModel();
 }

③  bindText方法,把带有w-text指令的元素放进一个数组中,如:w-text='demo',然后令其innerHTML的值等于传进来的data[demo]。

bindText:function(){
  var textDOMs=this.el.querySelectorAll('[w-text]'),
  bindText;
  for(var i=0;i<textDOMs.length;i++){
  bindText=textDOMs[i].getAttribute('w-text');
  textDOMs[i].innerHTML=this.data[bindText];
  }
 }

④  bindModel方法,把带有w-model指令的元素(一般为form相关元素)放进一个数组中,如:w-model='demo',为每一个元素绑定keyup事件(兼容浏览器写法)。

bindModel:function(){
 var modelDOMs=this.el.querySelectorAll('[w-model]'),
 bindModel;
 var _that=this;
 for(var i=0;i<modelDOMs.length;i++){
 bindModel=modelDOMs[i].getAttribute('w-model');
 modelDOMs[i].value=this.data[bindModel]||'';
 //数据劫持
 this.defineObj(this.data,bindModel);
 if(document.addEventListener){
 modelDOMs[i].addEventListener('keyup',function(event) {
  console.log('test');
  e=event||window.event;
  _that.data[bindModel]=e.target.value;
 },false);
 }else{
 modelDOMs[i].attachEvent('onkeyup',function(event){
  e=event||window.event;
  _that.data[bindModel]=e.target.value; 
 },false);
 }
 } 
}

⑤  使用Object.defineProperty,定义set和get方法,并在set方法中调用bindText方法。这是利用了一旦w-model的值在input中被改变,会自动执行set方法,所以只有在这个方法中调用更新w-text的方法即可。

defineObj:function(obj,prop,value){
  var val=value||'';
  var _that=this;
  try{
  Object.defineProperty(obj,prop,{
  get:function(){
  return val;
  },
  set:function(newVal){
  val=newVal;
  _that.bindText();
  }
  })
 
  }catch (err){
  console.log('Browser not support!')
  } 
 }

⑥使用

html:<br><h3>双向数据绑定demo</h3>
<div id="wrap">
 <input type="text" w-model='demo'>
 <h5 w-text='demo'></h5>
</div><br>js:
 <script src='../js/wue.js'></script>
 <script>
 new Wue({
 el:'#wrap',
 data:{
  demo:'winty'
 }
 })
 </script>

完整demo下载:https://github.com/LuckyWinty/two-way-data

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jquery 插件 人性化的消息显示
Jan 21 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
Oct 13 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
Dec 19 Javascript
动态显示可输入的字数提示还可以输入的字数
Apr 01 Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 Javascript
readonly和disabled属性的区别
Jul 26 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 Javascript
taro小程序添加骨架屏的实现代码
Nov 15 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 Javascript
vue 重塑数组之修改数组指定index的值操作
Aug 09 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
Jan 17 #Javascript
浅析vue数据绑定
Jan 17 #Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 #Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
Jan 17 #Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
Jan 17 #Javascript
详谈JavaScript的闭包及应用
Jan 17 #Javascript
用原生js做单页应用
Jan 17 #Javascript
You might like
在PHP中使用与Perl兼容的正则表达式
2006/11/26 PHP
php ss7.5的数据调用 (笔记)
2010/03/08 PHP
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
PHP学习笔记(二):变量详解
2015/04/17 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
php is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
php实现微信支付之现金红包
2018/05/30 PHP
JS中令人发指的valueOf方法介绍
2013/02/22 Javascript
jquery中加载图片自适应大小主要实现代码
2013/08/23 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
浅谈重写window对象的方法
2014/12/29 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
vue开发移动端底部导航条功能
2020/04/08 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
深入理解python中的闭包和装饰器
2016/06/12 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
python基于exchange函数发送邮件过程详解
2020/11/06 Python
Django celery异步任务实现代码示例
2020/11/26 Python
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
会话Bean的种类
2013/11/07 面试题
铭立家具面试题
2012/12/06 面试题
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
《中国的气候》教学反思
2014/02/23 职场文书
车队司机自我鉴定
2014/03/02 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
公司试用期员工自我评价
2014/09/17 职场文书
警告通知
2015/04/25 职场文书
结婚纪念日感言
2015/08/01 职场文书
高中班主任寄语
2019/06/21 职场文书
五年级作文之成长
2019/09/16 职场文书
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers