angularjs 数据双向绑定简洁源码实现

hello.html





    
    {{name}}
    



hello.js

var Scope = function( ) {
    this.$$watchers = [];   
};

Scope.prototype.$watch = function( watchExp, listener ) {
    this.$$watchers.push( {
        watchExp: watchExp,
        listener: listener || function() {}
    } );
};

Scope.prototype.$digest = function( ) {
    var dirty;
    do {
            dirty = false;

            for( var i = 0; i < this.$$watchers.length; i++ ) {
                var newValue = this.$$watchers[i].watchExp(),
                    oldValue = this.$$watchers[i].last;

                if( oldValue !== newValue ) {
                    this.$$watchers[i].listener(newValue, oldValue);

                    dirty = true;

                    this.$$watchers[i].last = newValue;
                }
            }
    } while(dirty);
};

//angularjs从这里开始
var $scope = new Scope();

//初始化的时候，我定义了一个name，我希望他显示在页面上
$scope.name = '';
//所以在页面上我写了一个{{name}},,我会找到{{name}},或者ng-model="name"等然后用$scope.name的值替换他们
var modelList1 = [];//ng-model
var modelList2 = [];//{{}}
var spanList = document.querySelectorAll('span');
for(var i =0;i$$watchers来实现模型到视图的数据变化


setTimeout(function(){
    updateScopeValue();
},3000);
var updateScopeValue = function updateScopeValue( ) {
    $scope.name = '我是自动三秒后变化的值';
    $scope.$digest();
};