vue双向数据绑定原理探究-js教程-PHP中文网

vue双向数据绑定原理探究

高洛峰

发布： 2017-01-20 10:17:16

原创

1723人浏览过

双向绑定的思想

双向数据绑定的思想就是数据层与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(&#39;[w-text]&#39;),
  bindText;
  for(var i=0;i<textDOMs.length;i++){
  bindText=textDOMs[i].getAttribute(&#39;w-text&#39;);
  textDOMs[i].innerHTML=this.data[bindText];
  }
 }

登录后复制

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

bindModel:function(){
 var modelDOMs=this.el.querySelectorAll(&#39;[w-model]&#39;),
 bindModel;
 var _that=this;
 for(var i=0;i<modelDOMs.length;i++){
 bindModel=modelDOMs[i].getAttribute(&#39;w-model&#39;);
 modelDOMs[i].value=this.data[bindModel]||&#39;&#39;;
 //数据劫持
 this.defineObj(this.data,bindModel);
 if(document.addEventListener){
 modelDOMs[i].addEventListener(&#39;keyup&#39;,function(event) {
  console.log(&#39;test&#39;);
  e=event||window.event;
  _that.data[bindModel]=e.target.value;
 },false);
 }else{
 modelDOMs[i].attachEvent(&#39;onkeyup&#39;,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||&#39;&#39;;
  var _that=this;
  try{
  Object.defineProperty(obj,prop,{
  get:function(){
  return val;
  },
  set:function(newVal){
  val=newVal;
  _that.bindText();
  }
  })
  
  }catch (err){
  console.log(&#39;Browser not support!&#39;)
  }
 }

登录后复制

⑥使用

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

登录后复制

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持PHP中文网！

更多vue双向数据绑定原理探究相关文章请关注PHP中文网！