从单向到双向数据绑定0.前言1.单向数据（代表：react）2.观察者模式3.双绑的中间枢纽——Object.defineproperty（代表：vue）4. 脏值检测（代表：angular1）前面说

<input id="ipt" type="text" name="">
<p id="a"></p>
复制代码

var str = ''
a.innerHTML = str//初始化
ipt.oninput = function(){//点击触发action
	str = ipt.value//改变state状态值
	a.innerHTML = str//重新渲染
}
复制代码

<input id="ipt" type="text" name="">
<p id="a"></p>
复制代码

var $scope = {
	data:''
}
a.innerHTML = ''
setInterval(function(){
	a.innerHTML = $scope.data
},60)
ipt.oninput = function(){
	 $scope.data = ipt.value
}
复制代码

function Event(){
	this.list=[],
	this.on=function(key,cb){//订阅事件
		if(!this.list[key]){
			this.list[key] = []
		}
		this.list[key].push(cb)
	},
	this.emit = function(){//触发事件
		var key = Array.prototype.shift.call(arguments)
		var e = this.list[key]
		if(!e){
			return
		}
		var args = Array.prototype.slice.call(arguments)
		for(var i = 0;i<e.length;i++){
			e[i].apply(null,args)
		}
	}
}
复制代码

var a = new Event()
a.on('a',function(x){console.log(x)})
a.emit('a',1)//1
复制代码

var obj = {name:'pp'}
console.log(obj.name)//pp
Object.defineProperty(obj,'name',{
      get:function(){
        return 1
      },
      set:function(newVal){
		console.log(newVal)
      }
    })
console.log(obj.name)//1
obj.name = 2;//2
console.log(obj.name)//1
复制代码

<input id="ipt" type="text" name="">
<p id="a"></p>
复制代码

//js:
var data = {
	str:''
}
a.innerHTML = data.str//初始化
function E (){
	this.list=[],
	this.on=function(key,cb){//订阅事件
		if(!this.list[key]){
			this.list[key] = []
		}
		this.list[key].push(cb)
	},
	this.emit = function(){//触发事件
		var key = Array.prototype.shift.call(arguments)
		var e = this.list[key]
		if(!e){
			return
		}
		var args = Array.prototype.slice.call(arguments)
		for(var i = 0;i<e.length;i++){
			e[i].apply(null,args)
		}
	}
}
var e = new E()//实例化
e.on('change',function(x){//订阅change这个事件
	a.innerHTML = x
})
Object.defineProperty(data,'str',{
	set:function(newval){//当data.str被设置的时候，触发事件change
		e.emit('change',newval)
		return newval
	}
})
ipt.oninput = function(){
	data.str = ipt.value//用户的action
}
复制代码

    <input type="text" ng-bind="s" />
    <div ng-bind="s"></div>
复制代码

function Scope(){
        this.$$watchers=[];         //监听器
    }

    Scope.prototype.$watch=function(name,exp,listener){
        this.$$watchers.push({
            name:name,                              //数据变量名
            last:'',                                //数据变量旧值
            newVal:exp,                             //返回数据变量新值的函数
            listener:listener || function(){}       //监听回调函数，变量“脏”时触发
        })
    }

    Scope.prototype.$digest=function(){
        var bindList = document.querySelectorAll("[ng-bind]");      //获取所有含ng-bind的DOM节点
        var dirty=true;
        while(dirty){
            dirty=false;
            for(var i=0;i<this.$$watchers.length;i++){
                var newVal=this.$$watchers[i].newVal();
                var oldVal=this.$$watchers[i].last;
                if(newVal!==oldVal && !isNaN(newVal) && !isNaN(oldVal)){
                    dirty=true;
                    this.$$watchers[i].listener(oldVal,newVal);
                    this.$$watchers[i].last=newVal;
                    for (var j = 0; j < bindList.length; j++) {
                        //获取DOM上的数据变量的名称
                        var modelName=bindList[j].getAttribute("ng-bind");
                        //数据变量名相同的DOM才更新
                        if(modelName==this.$$watchers[i].name) {
                            if (bindList[j].tagName == "INPUT") {
                                //更新input的输入值
                                bindList[j].value = this[modelName];
                            }
                            else {
                                //更新非input的值
                                bindList[j].innerHTML = this[modelName];
                            }
                        }
                    }
                }
            }
        }
    };
        var $scope=new Scope();
        $scope.count=0;
        var inputList=document.querySelectorAll("input[ng-bind]");         
        for(var i=0;i<inputList.length;i++){
            inputList[i].addEventListener("input",(function(index){
                return function(){
                    $scope[inputList[index].getAttribute("ng-bind")]=inputList[index].value;
                    $scope.$digest();           //调用函数时触发$digest
                }
            })(i));
        }
        //绑定非函数数据
        for(var key in $scope){
            if(key!="$$watchers" && typeof $scope[key]!="function") {     
                $scope.$watch(key, (function (index) {
                    return function(){
                        return $scope[index];
                    }
                })(key))
            }
        }
        $scope.$digest();//第一次digest
复制代码

var scope = new $scope();
scope.a = 5;
scope.b = 1;
scope.$watch('a', function(scope) {
  return scope[this.name]
 },
 function(newValue, oldValue) {
  scope.b ++;
 })
 
scope.$watch('b', function(scope) {
  return scope[this.name]
 },
 function(newValue, oldValue) {
  scope.a ++;
 })
复制代码

$scope.prototype.$digest = function() {
        var dirty = true;
        var checkTimes = 0;
         while(dirty) {
            dirty = this.$$digestOnce();
            checkTimes++;
             if(checkTimes>10 &&dirty){
                   throw new Error();
         }
     };
};
复制代码