vue雙向數(shù)據(jù)綁定原理探究

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

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

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: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]||'';
 //數(shù)據(jù)劫持
 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);
 }
 }
}

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>雙向數(shù)據(jù)綁定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>