脏值检测

作者: MGd | 来源:发表于2017-06-04 22:09 被阅读250次

自制前端前端框架 Day19. 完善脏值检测
脏值检测
Agular $watch机制
[angular]脏值检测：$watch, $watchColl
实现双向绑定的3种方法
双向绑定
Form元素使用笔记（节）
浏览器兼容性问题汇总
二元预测的灵敏度与特异度
惊！看完秒会MVVM

为什么更改数据的时候，页面上的东西就会跟着更改？
脏值检测是原理性的东西。（内部实现）
1.当事件触发时（属性改变事件，数据更新事件），会执行一个$digest循环
$digest循环：这个循环会去遍历$watchList，去询问里面的属性有没有被更改过。
2.$watchList里面的每一个属性都会被$watch来监听，如果被改变，会记录下新值是多少。
3.$digest遍历完毕之后，就知道那些属性被更改过。再去遍历$scope里面的所有属性（查看有没有新添加的属性，改变不是添加），如果$scope里面更新，会再次去找$watchList循环遍历。直到没有数据更新为止（最多执行10次）
4.调用$apply()更新页面
注意：$digest循环最少要遍历两次
看图
注意：异步操作的时候，需要进行强制$apply()更新页面。
例子：

       //1.创建模板
        var app = angular.module('app', []);
        //2.创建控制器
        app.controller('xmgController', ['$scope','$http','$q', function ($scope,$http,$q) {
           $scope.name = "xmg";
           $scope.age = 10;
           $scope.click = function () {   //触发事件（改变了name属性值，内部进行脏值检测）
               setInterval(function () {
                   $scope.name = "456";    
                   $scope.$apply();
               },1000);               //如果不强制调用$apply()更新页面，那么name是不会改变的 
           }
        }]);
        //3.绑定模块
        //4.绑定控制器
    </script>
<body ng-app="app" ng-controller="xmgController">
    <p>{{name}}</p>
    <button ng-click="click()">点击</button>            
</body>