双向绑定----通过监听方式配合处理器方法实现

/**
* Created by vivo_yezhen on 2017/7/6.
*/
( (g,$,undefined) =>{
class yuAngel{
constructor(root){
this.init(root);
}
init(root){
//根节点
this.root=typeof(root)==='string'?$.querySelector(`#${root}`):root;
//存放所有监听模型
this._={};
//通知列表的集合，对象的每个成员都是一个通知列表，model变化则找出对应的通知列表，通知列表中所有节点更新view
this.bridge={};

}
execute(fun){
//执行页面处理方法，并将this._作为参数传入。所有this._中的属性将被绑定监听
fun.apply(g,[this._]);
//绑定监听 this._中所有属性
this.bindWatch(this);
//整理root中所有节点逐一处理成新的Node删除原node并映射监听，将整理后的node放在片段中，最后重新添加到root中
this.root.appendChild(this.tidyRoot(this.root));
}
//绑定监听 this._中所有属性//若没有viewKey则绑定由model发起，有则说明绑定由view发起
bindWatch(yu,viewKey){
//添加get/set的公共方法
let bind=(key)=>{
let keyValue=yu._[key];
Object.defineProperty(yu._,key,{
configurable:false,
get: () =>{
return keyValue;
},
set:(newValue)=>{
//如果值没变化则不执行
if(keyValue===newValue)return;
keyValue=newValue;
//第二个参数表示有数据跟新需要通过viewModel通知bridge
yu.viewModel(key,true);
}
});
}
//如果来自view
if(viewKey){
// if(this._[viewKey]!=='undefined')return;
bind(viewKey);
return;
}
else{
//遍历data
Object.keys(this._).forEach( (key)=> {
bind(key);
});
}
}
//this._变化通知viewModel进而通知bridge中的对应通知列表;from表示来源,true表示从来自model的变化通知，false表示来自view的添加通知列表
//node是元素节点,value是当前元素节点的y-value值，keyMatch是Key在value中的代位字符串,如果一个y-value中有多个key则keyMatch是这些key的代位字符串数组
viewModel(key,from,node,nodeValue,keyMatch){
//a（被通知体）需要被通知的元素的node节点，y-value属性，keyMatch组成的数组，不存在a，则被通知体本身是元素节点
let fixValue=(a)=>{
//a[2]如果是数组(对应元素的value绑定了超过1个变量)
if(a){
//a[2]是一个变量的代位字符串
if(typeof(a[2])==='string'){
let str='\\$\\`'+key+'\\`';
let reg=new RegExp(str,'g');
return a[1].replace(reg,this._[key]);
}
else{
let value=a[1];
a[2][0].forEach((key,index)=>{
value=value.replace(a[2][1][index],this._[key]||'');
});
return value;
}
}

else{
return this._[key];
}
};
let arr=null;
if(Object.prototype.toString.call(node)==='[object Array]'){
arr=node;
node=node[0];
}
if(from){
this.bridge[key].forEach( (node) =>{
if(Object.prototype.toString.call(node)==='[object Array]'){
arr=node;
node=node[0];
}
//根据当前通知对象类型执行通知。node是string则通知
switch (node.localName||node[0].localName){
case 'input':
node.value=fixValue(arr);
break;
default:
node.innerHTML=fixValue(arr);
break;
}

});
}
else{
//通知队列已经存在,node为value属性值node==='string'，否则为元素节点
if(this.bridge[key]){
if(nodeValue){
this.bridge[key].push([node,nodeValue,keyMatch]);
}
else{this.bridge[key].push(node);}
}
//新建通知队列
else{
if(nodeValue){
this.bridge[key]=[node,nodeValue,keyMatch];
}
else{
this.bridge[key]=[node];
}
//将需要监听的键值和view中初始值传入绑定
if(this._[key]===undefined)this.bindWatch(this,key);
}
//view改变更改model,以及初始化view中的绑定变量
switch (node.localName){
case 'input':
//添加监听事件，监听view的变化
let CL=false;
let inputChange=()=>{
if(CL)return;
this._[key]=node.value;
}
if("\v"=="v") {
node.onpropertychange =inputChange ;
}else{
node.addEventListener("input",inputChange,false);
}
//禁止中文输入拼音触发事件
node.addEventListener('compositionstart', ()=> {
CL=true;
});
node.addEventListener('compositionend', ()=>{
CL=false;
inputChange();
});
//根据view的初始数据初始化model中的对应变量值
let inputValue=node.value;
if(inputValue)this._[key]=inputValue;
break;
case 'div':
//初始化div值
let divInner=node.innerHTML;
break;
default:
break;

}
}
}
tidyRoot(root){
//node 片段
let node,fragment=$.createDocumentFragment();
//将reg写在此处作为参数传入实际使用的方法中。如果放在使用的方法中定义，会每次都重新创建分配该定义空间。
let  reg=/\$\`(.*?)\`/g;
//遍历root节点，处理后放入fragment，最后放回root
while(node=root.firstChild){
if(node.firstChild ){
node.appendChild(this.tidyRoot(node));
//过滤节点中的绑定并添加到对应通知中
this.leachNode(node,reg);
fragment.appendChild(node);
}
else {
//过滤节点中的绑定并添加到对应通知中
this.leachNode(node,reg);
fragment.appendChild(node);
}
}
return fragment;
}
//过滤节点中的绑定并添加到this.bridge对应的通知列表
leachNode(node,reg){
switch (node.nodeType){
case 1:
let model=node.getAttribute('y-model');
if(model){
//添加node到model的通知队列
this.viewModel(model,false,node);
break;
}
let value=node.getAttribute('y-value');
//匹配出满足$``的片段
let matchArr=value.match(reg);
//matchArr去重
matchArr=((oldArr)=>{
let arr=[],arrobj={};
oldArr.forEach(function (key) {
if(!arrobj[key]){
arrobj[key]=true;
arr.push(key);
}
});
return arr;

})(matchArr);
let keyArr=[];
if(value && matchArr){
matchArr.forEach((match)=>{
let key=match.substring(2,match.length-1);
if(matchArr.length===1){
this.viewModel(key,false,node,value,match);
this.viewModel(key,true);
}
else{
//this.viewModel(key,false,node,value,matchArr);
keyArr.push(key);
}

});
if(keyArr) {
keyArr.forEach((key) => {
this.viewModel(key, false, node, value, [keyArr, matchArr]);
})
this.viewModel(keyArr[0],true);
}
}
break;
default:
break;
}
}
}
g.yuAngel=yuAngel;
})(window,document);

使用方法：

HTML：/////////////////

<body id="app">
<div id="test1" class="test1" y-model="test">55</div>
<input  value="" y-model="test"/>
</body>

JS：

let app= new yuAngel('appid');
app.execute( (_)=> {
//业务逻辑
});

执行结果：

改变input值，div值会自动更新