📜  AngularJs中的摘要周期是多少?

📅  最后修改于: 2021-05-13 20:48:06             🧑  作者: Mango

    开始之前,我们需要了解与摘要循环相关的一些术语。它们是AngularJs的监视,监视计数和监视列表。
  • AngularJs监视:它是AngularJs Framework提供的,用于跟踪范围变量及其值的更改。手表由AngularJs Framework自动创建。它通常用于数据绑定,并且由AngularJs Framework决定哪些变量。为手表创建的自定义功能称为手表侦听器。

  • 观看次数:如果观看次数低于2000,则性能会更好。我们可以使用Angular watchers扩展来对它们进行计数。 Angular对数据绑定变量执行监视,但如果需要,我们也可以使用watch函数对普通变量执行监视。它使用参数我们明确要监视的变量。
  • 监视列表:维护与角度应用程序关联的所有监视的列表。即所有的数据绑定正在监视。将为所有范围(包括root)维护一个监视列表。

消化周期

    监视会不断更新新值并更新DOM,从而呈现更改。该过程负责遍历整个手表以进行更改,并对观察列表中的手表进行脏检查。脏检查是从以前的值中检查变量的当前值。

  • 每当摘要过程发现变量中有任何修改时,监视侦听器都会自动执行。它会记录更改,然后通知AngularJs Framework更新DOM。因此,在每个摘要过程结束时,都会更新DOM。
  • Angular Context是AngularJs Framework的运行时环境。
  • 首先摘要过程会对手表进行脏检查,并检查是否有任何修改
    监视侦听器,它再次在上一个周期执行第二个脏检查周期。因为可能有些变量已被其他人更改。最少执行2次迭代,最多可以运行10次。尽管最好使摘要周期最小化,以获得更好的性能。最大值之后引发错误。

一级和二级更新

  • 第一级更新:假设变量b被任何事件更新,然后在第一个周期中,摘要周期将有关更改通知AngularJs Framework,并在此之后经历第二个周期。由于没有更多更新,因此它将更新DOM并完成它。
  • 二级监视更新:每当在第一周期中遇到任何特定监视(例如c)的更改时,摘要过程都会为其执行监视侦听器。现在,观看监听器将变量a进一步修改为新值。在第一个周期之后,c得到更新。在第二个周期中,我们遇到a中的更改,因此更新a中发生。现在,发生第三个循环,不再遇到其他修改。 DOM得到更新。
    二级更新的示例:
    $scope.a = 1;
    $scope.b = 2;
    $scope.c = 3;
      
    $scope.$watch('a', function( newValue, oldValue ) {
           if( newValue != oldValue ) {
               console.log("a is modified to " +newValue );
    }
    });
      
    $scope.$watch('b', function( newValue, oldValue ) {
           if( newValue != oldValue ) {
               console.log("b is modified to " +newValue );
    }
    });
      
    $scope.$watch('c', function( newValue, oldValue ) {
           if( newValue != oldValue ) {
               console.log("c is modified to " +newValue );
                    if( $scope.c > 50 ) {
                         $scope.a = 1000;  
                     }
    }
    });
      
    $rootscope.$watch( function() {
           console.log(" digest iteration started ");
    });
    

    考虑范围变量a,b,c绑定了数据,并且符合摘要过程的条件。如果我们在浏览器中检查角度应用程序并打开控制台。我们可以跟踪更改,因为打印报表将对我们有所帮助。假设使用输入框绑定了c,我们可以很容易地跟踪它被修改的次数。实际上,我们也可以通过在$ rootscope上应用$ watch函数来检查摘要过程。
    $ watch:此函数采用三个参数-watch表达式,侦听器和对象相等。除表达式外,其他两个都是可选的。

  • 摘要过程从根范围开始,然后再标识其他范围。如果我们的代码使用DOM事件(ng-click),带有回调的ajax,带有回调的计时器,浏览器位置更改,诸如$ apply之类的手动调用,则它必然对所有这些对象都具有摘要处理。
  • 众所周知,浏览器负责渲染DOM,并且可能发生Timer,On-click等事件。浏览器为这些事件维护一个称为事件队列的队列。并将其发送到Javascript。因此,对他们进行了摘要。如果事件与Javascript(即用Jquery或其他语言编写的)无关,那么编写$ apply函数来维护事件摘要是我们的职责。
    $scope.$apply(function() {    
    }); 

    摘要循环的完整方案: