• Angularjs-Dirty Checking


    Angularjs实现了数据双向绑定,就像下面这样:

    <!doctype html>
    <htnl ng-app>
    <head>
        <script src="js/angular.js"></script>
    </head>
    <body>
        <input type="text" ng-model="name">
        <h2>Hello {{name}}</h2>
    </body>
    </html>

    这使得在View和Model在变化的时候,都会更新对方:

    Angularjs是通过DirtyChecking实现的Two-Way Data Binding:

    $scope.$apply:当控制器或指令在Angularjs运行时,Angularjs内部会运行$scope.$apply函数,这个函数会接收一个函数参数并且运行它,在这之后才会在rootScope上运行$digest.

    $digest函数将会在$rootScope中被$scope.$apply所调用。它将会在$rootScope中运行digest循环,然后向下遍历每一个作用域并在每个作用域上运行循环。在简单的情形中,digest循环将会触发所有位于$$watchers变量中的所有watchExp函数,将它们和最新的值进行对比,如果值不相同,就会触发监听器。

    当digest循环运行时,它将会遍历所有的监听器然后再次循环,只要这次循环发现了”脏值”,循环就会继续下去。如果watchExp的值和最新的值不相同,那么这次循环就会被认为发现了脏值。理想情况下它会运行一次,如果它运行超10次,会看到一个错误。

    因此当$scope.$apply运行的时候,$digest也会运行,它将会循环遍历$$watchers,只要发现watchExp和最新的值不相等,变化触发事件监听器。 在AngularJS中,只要一个模型的值可能发生变化,$scope.$apply就会运行。这就是为什么当你在AngularJS之外更新$scope时,例如在一个setTimeout函数中,你需要手动去运行$scope.$apply():这能够让AngularJS意识到它的作用域发生了变化。 

    $scope.$watch:为了监视一个变量的变化,可以使用$scope.$watch函数。这个函数有三个参数,它指明了”要观察什么”(watchExp),”在变化时要发生什么”(listener),以及要监视的是一个变量还是一个对象。当在检查一个参数时,可以忽略第三个参数。$watch的第一个参数可以是字符串,也可以是函数。

    $$watchers:$scope中的$$watchers变量保存着所定义的所有的监视器。如果在控制台中打印$$watchers,会发现它是一个对象数组。$watch函数将会返回一个deregisterWatch函数。这意味着如果使用$scope.$watch对一个变量进行监视,也可以在以后通过调用某个函数来停止监视。

    简化版的Dirty-Checking:

    HTML:

    <input type="text" />
    
    <a href="#" onclick="updateScopeValue();">Set input value to Bob</a>

    Javascript:

    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);
    };
    
    
    var $scope = new Scope();
    
    $scope.name = 'Ryan';
    
    var element = document.querySelectorAll('input');
    
    element[0].onkeyup = function() {
        $scope.name = element[0].value;
    
        $scope.$digest();
    };
    
    $scope.$watch(function(){
        return $scope.name;
    }, function( newValue, oldValue ) {
        console.log('Input value updated - it is now ' + newValue);
        
        element[0].value = $scope.name;
    } );
    
    var updateScopeValue = function updateScopeValue( ) {
        $scope.name = 'Bob';
        $scope.$digest();
    };

    使用上面的代码,无论何时改变了input的值,$scope中的name属性都会相应的发生变化。这样就实现了数据双向绑定。

     参考:http://ryanclark.me/how-angularjs-implements-dirty-checking/

  • 相关阅读:
    php数据库常用函数
    什么是RESTful API
    RESTful API 设计指南
    json和jsonp的使用区别
    Memcached, Redis, MongoDB区别
    入门系列之在Nginx配置Gzip
    100行代码搞定抖音短视频App,终于可以和美女合唱了。
    游戏开发者注意!这个音频SDK可以完美兼容所有主流游戏引擎
    快速上手:在CVM上安装Apache
    聚焦小游戏技术生态,腾讯游戏云GAME-TECH落地厦门
  • 原文地址:https://www.cnblogs.com/linda586586/p/4645845.html
Copyright © 2020-2023  润新知