js 实现angylar.js view层和model层双绑定（改变view刷新 model，改变model自动刷新view）
近段时间研究了下angular.js 觉得它内部实现的view和model层之间存在很微妙的关系，如下图
如上图说的，view的改变会update 数据层model， 数据层会update视图层view,这双方之所以能实现互相的监听，就是通过中间层（理解为监听层），代码初始化的时候就会将view和model的相关状态都保存在监听层里面（可以理解为保存一个handler的函数到监听层里面），
view和model的改变都触发监听器里面的绑定的handler，实现状态的共享;
个人简单实现了下，可能实现得不太好，望拍砖(没有实现啥兼容性的哈，只在chrome下运行),希望各位大神给点意见!!
(function(win){ var doc = win.document, _bind_key = "data-bind-" , _event_prefix = "message-", _data = {};//存放数据的空间 /*生成唯一的gid*/ var gid = (function(){ var id =1; return function(){ return "ng-"+(id++); } })(); /*事件存放的容器*/ var publisher = { callbacks : {}, on : function( type , callback ){ this.callbacks[type] = this.callbacks[type]||[]; this.callbacks[type].push(callback); }, fire : function( type ){ var callback = this.callbacks[type]||[]; for(var i=0,len= callback.length;i<len;i++){ callback[i].apply( this , arguments ); } } }; var user = { set : function( id, key , value){ if(arguments<3){ return _data[object_id]; } this.setData( id,key,value ); publisher.fire(type,key, value); }, setData : function( id, key , value ){ _data[id][key] = value; } } /** * @param {Node} : elem it can be a nodeList or one item * @param {Function} callback : //数据层，view层改变后会触发此函数 */ win.twoWayBind = function( elem ,callback){ var id = gid(); this.attr(elem ,_bind_key+id , true); this.propoties = { "id" : id, "data-attr" : _bind_key+id, "type" : "message-"+id } this.init( callback ); } win.twoWayBind.prototype = { set : function(key , value){ this.propoties[key] = value; }, get : function(key){ return this.propoties[key]; }, attr : function( elems , key, value ){ //为elem元素设置相关属性 if(!elems){return;} if(elems.nodeName || elems.nodeType===1){ elems = [elems]; } for(var i =0 , len = elems.length;i<len;i++){ if( value ){ elems[i].setAttribute(key,value); }else{ return elems[i].getAttribute(key); } } }, /** * @description 次函数用于外层调用，以实现改变数据的时候能监听器里面的函数 */ setData : function( key , value ){ if(arguments.length<2){ return; } user.set( this.get('id'),key, value ); }, /*初始化*/ init : function( callback ){ var id = this.get('id'); this.domBinder(); this.dataBinder(); if(callback){ publisher.on(this.get('type'), callback); } }, domBinder : function(){ var object_id = this.get('id'), data_attr = this.get('data-attr'); /*view监听的事件*/ var handler = function( evt ){ var target = evt.target || evt.srcElement, prop_name = target.getAttribute(data_attr); if( prop_name ){ publisher.fire(type,prop_name,target.value); } } if(doc.addEventListener){ doc.addEventListener('change' , handler , false ); }else{ doc.attachEvent('change' , handler); } /*dom触发事件*/ publisher.on(this.get('type') , function( evt , prop_name ,newValue , current ){ if(!evt){ return; }//如果触发此事件的目标不是一个元素//则不执行下面的代码 var elems = doc.querySelectorAll("["+data_attr+"]"); for(var i=0,len= elems.length;i<len;i++){ elem = elems[i]; if(elem.nodeName.toLowerCase()==="input" || elem.nodeName.toLowerCase()=="textarea"){ elem.value = newValue; }else{ elem.innerHTML = newValue; } } }); }, dataBinder : function(){ var object_id = this.get('id'); _data[object_id] = _data[object_id] || {}; var data_attr = _bind_key+object_id; type = "message-"+object_id; /*dom触发事件*/ publisher.on(this.get('type') , function( evt , key ,value , isDataChange ){ user.setData(object_id,key,value); console.log(evt); }); } } })(window)
完整代码如下：
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input placeholder="按enter提交代码" type="text" id="text" /> <div> <button value="1" onclick="setData(this)">设置字段value的值为1</button> <button value="2" onclick="setData(this)">设置字段value的值为2</button> </div> <ul id='list'></ul> <script type="text/javascript"> (function(win){ var doc = win.document, _bind_key = "data-bind-" , _event_prefix = "message-", _data = {};//存放数据的空间 /*生成唯一的gid*/ var gid = (function(){ var id =1; return function(){ return "ng-"+(id++); } })(); /*事件存放的容器*/ var publisher = { callbacks : {}, on : function( type , callback ){ this.callbacks[type] = this.callbacks[type]||[]; this.callbacks[type].push(callback); }, fire : function( type ){ var callback = this.callbacks[type]||[]; for(var i=0,len= callback.length;i<len;i++){ callback[i].apply( this , arguments ); } } }; var user = { set : function( id, key , value){ if(arguments<3){ return _data[object_id]; } this.setData( id,key,value ); publisher.fire(type,key, value); }, setData : function( id, key , value ){ _data[id][key] = value; } } /** * @param {Node} : elem it can be a nodeList or one item * @param {Function} callback : //数据层，view层改变后会触发此函数 */ win.twoWayBind = function( elem ,callback){ var id = gid(); this.attr(elem ,_bind_key+id , true); this.propoties = { "id" : id, "data-attr" : _bind_key+id, "type" : "message-"+id } this.init( callback ); } win.twoWayBind.prototype = { set : function(key , value){ this.propoties[key] = value; }, get : function(key){ return this.propoties[key]; }, attr : function( elems , key, value ){ //为elem元素设置相关属性 if(!elems){return;} if(elems.nodeName || elems.nodeType===1){ elems = [elems]; } for(var i =0 , len = elems.length;i<len;i++){ if( value ){ elems[i].setAttribute(key,value); }else{ return elems[i].getAttribute(key); } } }, /** * @description 次函数用于外层调用，以实现改变数据的时候能监听器里面的函数 */ setData : function( key , value ){ if(arguments.length<2){ return; } user.set( this.get('id'),key, value ); }, /*初始化*/ init : function( callback ){ var id = this.get('id'); this.domBinder(); this.dataBinder(); if(callback){ publisher.on(this.get('type'), callback); } }, domBinder : function(){ var object_id = this.get('id'), data_attr = this.get('data-attr'); /*view监听的事件*/ var handler = function( evt ){ var target = evt.target || evt.srcElement, prop_name = target.getAttribute(data_attr); if( prop_name ){ publisher.fire(type,prop_name,target.value); } } if(doc.addEventListener){ doc.addEventListener('change' , handler , false ); }else{ doc.attachEvent('change' , handler); } /*dom触发事件*/ publisher.on(this.get('type') , function( evt , prop_name ,newValue , current ){ if(!evt){ return; }//如果触发此事件的目标不是一个元素//则不执行下面的代码 var elems = doc.querySelectorAll("["+data_attr+"]"); for(var i=0,len= elems.length;i<len;i++){ elem = elems[i]; if(elem.nodeName.toLowerCase()==="input" || elem.nodeName.toLowerCase()=="textarea"){ elem.value = newValue; }else{ elem.innerHTML = newValue; } } }); }, dataBinder : function(){ var object_id = this.get('id'); _data[object_id] = _data[object_id] || {}; var data_attr = _bind_key+object_id; type = "message-"+object_id; /*dom触发事件*/ publisher.on(this.get('type') , function( evt , key ,value , isDataChange ){ user.setData(object_id,key,value); console.log(evt); }); } } })(window) </script> <script type="text/javascript"> var tipsContainer = document.getElementById('list'); var binder = new twoWayBind( document.getElementById('text') ,function( e, key ,value ){ var li = document.createElement('li'); li.innerHTML = "当前input的值是:"+ value; tipsContainer.appendChild(li); }); function setData(elem){ var value = elem.value; binder.setData("key" , value); } </script> </body> </html>