使用angularjs1.x构建前台开发框架（十二）——脏检查

约定不等于承诺〃 2022-06-17 08:51 162阅读 0赞

上一章介绍了数据双向绑定，那么在angularjs1.x版本中是怎么做到这一点的呢？就是依赖Dirty Checking，即本章介绍的脏检查。那么什么是脏检查？简而言之，就是在angularjs作用域内定义的变量发生变化时（在作用域内定义的所有变量都有一个watch，用于监听变量的状态），触发所有变量的循环检查（从根作用rootscope开始向内检查，即按锚的深度检查，每一次独立的循环检查为一次digest cycle），当检查到数据变更时，则同步数据（如果model中的数据发生变更，则向view同步，如果view中的数据发生变更，则向model同步），直到所有数据稳定。当所有数据稳定后，还会执行一次额外的全量检查。

接下来我们构造一个无限循环的场景来看一下脏检查是如何实现的，顺便看看当发生无限循环时，脏检查是如何处理的。构造两个对象以及对应的监听，对象1的监听器功能为：监听到对象1变更时，则修改对象2，对象2的监听器功能为：监听到对象2变更时，则修改对象1。

在c2.js中定义对象及监听：

/**
     * Created by 李庆 on 2016/10/6.
     */
    define(["jquery","../../../framework/service/httpService"],function($,httpService){
        var c2Controller = ["$scope","maskService",function($scope,maskService){
            $scope.test = function(){
                console.log("enter controller");
            };
    
            $scope.getData = function(){
                maskService.show("get data");
                $.ajax({
                    "type":"GET",
                    "contentType":"application/json;charset=UTF-8",
                    //修改前为"url":"mock/test.json",
                    "url":httpService.getUrl("GET","/nova/test.json"),
                    "success":function(data){
                        console.log(JSON.stringify(data));
                        setTimeout(function(){
                            maskService.hide();
                        },6000);
                    },
                    "error":function(data){
                        console.log("error");
                    }
                });
            }
    
            $scope.user1 = 0;
            $scope.user2 = 0;
            $scope.$watch(function() {
                return $scope.user1;
            }, function(oldResult, newResult) {
                console.log("watch1 "+JSON.stringify($scope.user1));
                console.log(JSON.stringify($scope.user2));
                $scope.user2++;
            });
    
            $scope.$watch(function() {
                return $scope.user2;
            }, function(oldResult, newResult) {
                console.log("watch2 "+JSON.stringify($scope.user1));
                console.log(JSON.stringify($scope.user2));
                $scope.user1++;
            });
    
        }];
        return c2Controller;
    });

变更部分内容如下：

![20170421215817186][]

在c2.html中显示对象信息：

<div>
        <input type="button" value="test Controller" ng-click="test()">
        <button ng-click="getData()">request</button>
        <div>{
       {user1}}</div>
        <div>{
       {user2}}</div>
    </div>

变更部分内容如下：

![20170421220045846][]

然后来看一下页面的情况，user1和user2的值都是22：

![20170421220447539][]

那么，为什么值会是22呢？再看一下控制台信息（由于无限循环的原因，digest cycle理论上会一直执行下去，变量的值会一直递增，下图的控制台打印信息也可以看到前10次的digest cycle都正常执行）：

![20170421220937592][]

然而从第11次digest cycle开始时，angularjs认为我们的代码一定发生了问题，终止了脏检查：

![20170421221703149][]

也就是说脏检查的digest cycle循环次数是有上限的，也就是10次，第11次则会抛出异常（虽然值还是变更了）。

如本章开头所说，当所有数据稳定后，还会执行一次额外的全量检查，所以，第二轮的digest cycle又开始了（即使前一次digest cycle循环终止的原因是达到了循环次数上限）：

![20170421222207989][]

从第11次digest cycle开始时（即变量的值从21变更为22时），angularjs又终止了脏检查：

![20170421222419378][]

每一次独立的digest cycle都会从外向内检查所有变量并同步，当前一次的digest cycle触发了其他数据的变更，则会触发第二轮的digest cycle，直到第十一轮的digest cycle，达到digest cycle的循环上限，digest cycle循环终止。从这里可以看出，脏检查实际上是非常消耗资源的，在实际的项目开发过程中，需要尽量避免定义数据的多级联动，避免影响页面的可靠性和用户体验。

[20170421215817186]: /images/20220617/f5e4237b931d4140aaefd1f65870fb3f.png
[20170421220045846]: /images/20220617/ccb6e9d3a69345d9851e2046fdde26ab.png
[20170421220447539]: /images/20220617/2e6a61bcb9a14819995efbfe6837a317.png
[20170421220937592]: /images/20220617/f227b396ba0f49d888ff639068fd0096.png
[20170421221703149]: /images/20220617/3559cd30001b47bb97e8b4432ee062b7.png
[20170421222207989]: /images/20220617/5449ab48d82b4a6fa9702eba811dfeb8.png
[20170421222419378]: /images/20220617/97d40301ba3d48e99c06ea2b2db82c57.png