Comprendre la vérification sale dans AngularJS-js tutoriel-php.cn

Comprendre la vérification sale dans AngularJS

青灯夜游

Libérer： 2021-02-01 11:45:24

avant

1936 Les gens l'ont consulté

Comprendre la vérification sale dans AngularJS

Recommandations associées : "Tutoriel Angularjs"

angularjs implémente la liaison bidirectionnelle, qui est différente de la définition de propriété de vue. Son principe réside dans son. Le mécanisme de vérification sale est résumé ci-dessous ;

Introduction à angulaire.js

AngularJs est un framework mvvm, son composant est le composant vm et sa portée est la collecte de données de la vm. composant
AngularJs déclare le comportement de la vm via la directive, qui est implémentée en tant qu'observateur, surveille les modifications dans les propriétés de la portée et met à jour l'interface utilisateur avec les dernières propriétés
Bidirectionnel liaison d'AngularJs : par exemple : l'une consiste à mettre $ La valeur de l'attribut scope est liée à la structure HTML. Lorsque la valeur de l'attribut $scope change, l'interface change également lorsque l'utilisateur effectue des opérations sur l'interface. en cliquant, en saisissant et en sélectionnant, l'attribut $scope est automatiquement déclenché. Modifications (l'interface peut également changer)
Surveiller les modifications de l'attribut de portée : vérification sale (dirty check)

Dirty check

angular n'écoute pas du tout les changements de données, mais au bon moment ($watch), parcourez tous les $scopes à partir de $rootScope,
vérifiez si l'attribut les valeurs sur eux ont changé, s'il y a des changements, utilisez une variable sale pour l'enregistrer comme vrai, parcourez ($digest) à nouveau,
et ainsi de suite, jusqu'à ce qu'un certain parcours soit terminé et que le les valeurs d'attribut de ces $scopes n'ont pas changé, le parcours se termine.
Parce qu'une variable sale est utilisée comme enregistrement, on l'appelle un mécanisme de vérification sale.

En bref : lorsque la portée est créée, angulaire analysera le modèle, découvrira les valeurs de liaisonet les appels d'événements et les liera avec $watch ; 🎜>
$scope.$watch(string|function, listener, objectEquality, prettyPrintExpression)
// string: 验证值或者function执行后return的string
// listener： 如果验证值不同，则执行该监听函数
// objectEquality：执行深检查
Copier après la connexion

Après avoir terminé la liaison, il détectera automatiquement les changements dans ces propriétés et exécutera $watch Ensuite, les informations correspondantes seront liées à un $$watchers à l'intérieur d'angular. Une file d'attente (tableau), et lorsque $digest est déclenché, angulaire traversera le tableau,

et utilisera une variable sale pour enregistrer si les attributs $scope enregistrés dans $$watchers ont changé

Déterminez si dirty est vrai. S'il est faux, la récursivité $digest ne sera pas effectuée. (Dirty par défaut est true)

Parcourez $$watchers, supprimez l'ancienne valeur et la nouvelle valeur de la valeur d'attribut correspondante et comparez les anciennes et les nouvelles valeurs en fonction de objectEquality.
Si les deux valeurs sont différentes, continuez l'exécution. Si les deux valeurs sont identiques, définissez dirty sur false.
Après avoir vérifié tous les observateurs, si dirty est toujours vrai, définissez dirty sur true et remplacez l'ancienne valeur par la nouvelle valeur
Dans ; de cette façon, lors du prochain cycle de récursion, l'ancienne valeur est la nouvelle valeur de ce tour et appelle à nouveau $digest (en termes simples, il effectue deux parcours récursifs pour vérifier les changements dans les anciennes et les nouvelles valeurs)
La valeur modifiée $scope est restituée à l'interface
$apply déclenche $digest

Généralement, $digest n'est pas appelé , l'appel de $apply déclenchera en interne le parcours récursif de $digest

les instructions internes d'angular encapsulent $apply, comme ng-click, il n'est donc généralement pas nécessaire d'appeler manuellement apply

Parfois, il est nécessaire Déclencher manuellement

function($timeout) {
  // 当我们通过on(&#39;click&#39;)的方式触发某些更新的时候，可以这样做
  $timeout(() => { // 内置语法糖 $http, $timeout已经包含了apply
    $scope.name = &#39;lily&#39;
  })
  // 也可以这样做
  $element.on(&#39;click&#39;, () => {
    $scope.name = &#39;david&#39;
    $scope.$apply()
  })
}

Copier après la connexion

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>angularjs脏检查实现</title>
</head>
<style type="text/css">
  button {
    height: 60px;
    width: 100px;
  }

  p {
    margin-left: 20px;
  }
</style>

<body>
  <div>
    <button type="button" ng-click="increase">增加</button>
    <button type="button" ng-click="decrease">减少</button>
    数量：<span ng-bind="data">0</span>
  </div>
  <br>
</body>
<script>
  window.onload = function () {
    /**
     * 声明构造函数
     */
    function Scope() {
      this.$$watchList = []; // angular内部会声明一个数组(包含监听的对象)，在digest执行时去遍历
    }

    /**
     * 属性赋值给$scope
     * 类似angular解析controller的模板，把模板中的属性解析出来，属性赋值给$scope
     */
    Scope.prototype.getNewValue = function () {
      return $scope[this.name];
    }

    /**
     * 实现监听
     */
    Scope.prototype.$watch = function (name, listener) {
      let watch = {
        name: name,
        getNewValue: this.getNewValue,
        listener: listener || function () { }
      };
      // 当作用域创建时，angular会去解析模板，$watch用来绑定监听值和监听函数
      this.$$watchList.push(watch);
    }

    /**
    * 检查dirty，循环更新scope上的最新值
    */
    Scope.prototype.$digest = function () {
      console.log(&#39;$digest&#39;);
      let dirty = true; // 默认dirty变量为true
      let checkTimes = 0;
      while (dirty) {
        dirty = this.$valScope();
        checkTimes++;
        if (checkTimes > 10 && dirty) {
          throw new Error("循环过多");
        }
      }
    }

    /**
     * 验证值是否有变化
     */
    Scope.prototype.$valScope = function () {
      let dirty;
      let list = this.$$watchList;
      for (let i = 0; i < list.length; i++) {
        let watch = list[i];
        let newValue = watch.getNewValue();
        let oldValue = watch.last || undefined;
        if (newValue !== oldValue) {
          watch.listener(newValue, oldValue);
          dirty = true; // 如果新旧值不同，则继续遍历
        } else {
          dirty = false;
        }
        watch.last = newValue;
      }
      return dirty;
    }

    /**
     * 刷新scope
     */
    Scope.prototype.$apply = function (params) {
      let list = document.querySelectorAll(&#39;[ng-bind]&#39;);
      console.log(&#39;list&#39;, list)
      for (let i = 0, l = list.length; i < l; i++) {
        let bindData = list[i].getAttribute(&#39;ng-bind&#39;);
        console.log(&#39;bindData&#39;, bindData)
        console.log(&#39;list[i]&#39;, list[i])
        list[i].innerHTML = $scope[bindData];
      }
    }

    let $scope = new Scope(); // 实例化，声明$scope对象集合
    $scope.data = 0;
    $scope.increase = function () {
      this.data++;
    };
    $scope.decrease = function () {
      this.data--;
    };

    $scope.$watch(&#39;data&#39;, function(newValue, oldValue) { // 监听
        console.log("new: " + newValue + "=========" + "old: " + oldValue);
    });


    // 手动为button按钮添加onclick事件，并为通过闭包为其绑定了全局scope对象，绑定apply方法
    // 类似angular内部实现
    function startBind() {
      let list = document.querySelectorAll(&#39;[ng-click]&#39;);
      for (let i = 0, l = list.length; i < l; i++) {
        list[i].onclick = (function (index) {
          return function () {
            let func = this.getAttribute(&#39;ng-click&#39;);
            $scope[func]($scope);
            $scope.$digest();
            $scope.$apply()
          }
        })(i)
      }
    }

    // 初始化
    startBind();
  }

</script>

</html>

Copier après la connexion