Heim > Artikel > Web-Frontend > Erfahren Sie mehr über den bidirektionalen Bindungsmechanismus von Daten in AngularJS

Erfahren Sie mehr über den bidirektionalen Bindungsmechanismus von Daten in AngularJS

高洛峰Original: 2016-12-24 10:18:39904Durchsuche

Angular JS (Angular.JS) ist eine Reihe von Frameworks, Vorlagen, Datenbindungen und umfangreichen UI-Komponenten, die zur Entwicklung von Webseiten verwendet werden. Es unterstützt den gesamten Entwicklungsprozess und stellt die Architektur von Webanwendungen ohne manuelle DOM-Manipulation bereit. AngularJS ist klein, nur 60 KB, kompatibel mit gängigen Browsern und funktioniert gut mit jQuery. Die bidirektionale Datenbindung ist möglicherweise die coolste und praktischste Funktion von AngularJS, die das Prinzip von MVC vollständig demonstriert.

Das Arbeitsprinzip von AngularJS ist: Die HTML-Vorlage wird vom Browser in das DOM analysiert. und die DOM-Struktur wird zur AngularJS-Compiler-Eingabe. AngularJS durchläuft die DOM-Vorlage, um entsprechende NG-Anweisungen zu generieren. Alle Anweisungen sind für das Festlegen der Datenbindung für die Ansicht (dh das ng-Modell in HTML) verantwortlich. Daher beginnt das NG-Framework erst zu funktionieren, nachdem das DOM

in HTML geladen wurde:

<body ng-app="ngApp">
 <div ng-controller="ngCtl">
  <label ng-model="myLabel"></label>
  <input type="text" ng-model="myInput" />
  <button ng-model="myButton" ng-click="btnClicked"></button>
 </div>
</body>

In js :

// angular app
var app = angular.module("ngApp", [], function(){
 console.log("ng-app : ngApp");
});
// angular controller
app.controller("ngCtl", [ &#39;$scope&#39;, function($scope){
 console.log("ng-controller : ngCtl");
 $scope.myLabel = "text for label";
 $scope.myInput = "text for input";
 $scope.btnClicked = function() {
  console.log("Label is " + $scope.myLabel);
 }
}]);

Wie oben definieren wir zunächst eine Angular-App in HTML und geben einen Angular-Controller an. Anschließend entspricht der Controller einem Bereich (kann mithilfe des Präfixes $scope angegeben werden). die Eigenschaften und Methoden im Bereich). Dann kann der Wert oder die Operation des HTML-Tags im Bereich von ngCtl über $scope an die Eigenschaften und Methoden in js gebunden werden.

Auf diese Weise sind die beiden -way-Datenbindung von NG wird realisiert: Das heißt, die in HTML dargestellte Ansicht stimmt mit den Daten in AngularJS überein. Wenn eines geändert wird, ändert sich auch das entsprechende andere Ende.

Diese Methode ist wirklich sehr Bequem zu verwenden. Wir kümmern uns nur um den Stil der HTML-Tags und die entsprechenden Eigenschaften und Methoden, die im Rahmen des Angular-Controllers in js gebunden sind. Das ist alles, wir werden viele komplexe DOM-Operationen weglassen Diese Idee unterscheidet sich tatsächlich völlig von der DOM-Abfrage und -Operation von jQuery. Daher empfehlen viele Leute, jQuery nicht zu mischen. Natürlich haben beide ihre eigenen Vor- und Nachteile, die von Ihrer Wahl abhängen .

Die App in NG entspricht einem Modul, und jeder Controller hat seinen eigenen Bereich und stört sich nicht gegenseitig Wie wirken sich Bindungsdaten aus?

Anfänger von AngularJS können in eine solche Grube geraten:

Wenn Sie zu diesem Zeitpunkt auf die Schaltfläche klicken, erhöht sich die Zahl auf der Benutzeroberfläche nicht. Viele Leute werden verwirrt sein, weil sie den Debugger überprüfen und feststellen, dass die Daten tatsächlich zugenommen haben. Ist Angular keine bidirektionale Bindung? Warum wird die Schnittstelle nicht aktualisiert, wenn sich die Daten ändern?

var app = angular.module("test", []);
 
app.directive("myclick", function() {
  return function (scope, element, attr) {
    element.on("click", function() {
      scope.counter++;
    });
  };
});
 
app.controller("CounterCtrl", function($scope) {
  $scope.counter = 0;
});
<body ng-app="test">
  <div ng-controller="CounterCtrl">
    <button myclick>increase</button>
    <span ng-bind="counter"></span>
  </div>
</body>

Versuchen Sie, Scope.digest(); nach Scope.counter++ hinzuzufügen und sehen Sie, ob es funktioniert?

Warum sollten Sie dies tun? Unter welchen Umständen sollten Sie dies tun? Wir haben festgestellt, dass es im ersten Beispiel keinen Digest gibt, und wenn Sie einen Digest schreiben, wird auch eine Ausnahme ausgelöst, die besagt, dass andere Digests erstellt werden. Was ist los?

Lassen Sie uns zunächst darüber nachdenken: Was wäre, wenn wir eine solche Funktion selbst ohne AngularJS implementieren möchten?

Wie Sie sehen können, haben wir in einem so einfachen Beispiel eine bidirektionale Bindung durchgeführt. Vom Klicken auf zwei Schaltflächen bis zum Ändern von Daten ist dies leicht zu verstehen, aber wir haben nicht direkt die Onclick-Methode des DOM verwendet, sondern einen NG-Click erstellt und dann die diesem NG entsprechende Funktion herausgenommen -click in bind. Bindet an die Onclick-Ereignishandlerfunktion. Warum ist das so? Denn obwohl sich die Daten geändert haben, wurden sie noch nicht auf der Schnittstelle aufgefüllt, sodass wir hier einige zusätzliche Vorgänge durchführen müssen.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>two-way binding</title>
  </head>
  <body onload="init()">
    <button ng-click="inc">
      increase 1
    </button>
    <button ng-click="inc2">
      increase 2
    </button>
    <span style="color:red" ng-bind="counter"></span>
    <span style="color:blue" ng-bind="counter"></span>
    <span style="color:green" ng-bind="counter"></span>
 
    <script type="text/javascript">
      /* 数据模型区开始 */
      var counter = 0;
 
      function inc() {
        counter++;
      }
 
      function inc2() {
        counter+=2;
      }
      /* 数据模型区结束 */
 
      /* 绑定关系区开始 */
      function init() {
        bind();
      }
 
      function bind() {
        var list = document.querySelectorAll("[ng-click]");
        for (var i=0; i<list.length; i++) {
          list[i].onclick = (function(index) {
            return function() {
              window[list[index].getAttribute("ng-click")]();
              apply();
            };
          })(i);
        }
      }
 
      function apply() {
        var list = document.querySelectorAll("[ng-bind=&#39;counter&#39;]");
        for (var i=0; i<list.length; i++) {
          list[i].innerHTML = counter;
        }
      }
      /* 绑定关系区结束 */
    </script>
  </body>
</html>

Unter einem anderen Aspekt muss bei einer Änderung der Daten diese Änderung auf die Schnittstelle angewendet werden, d. h. auf die drei Bereiche. Da Angular jedoch die Dirty-Erkennung verwendet, bedeutet dies, dass Sie nach dem Ändern der Daten selbst etwas tun müssen, um die Dirty-Erkennung auszulösen, und diese dann auf das den Daten entsprechende DOM-Element anwenden müssen. Die Frage ist: Wie löst man eine Dirty-Erkennung aus? Wann wird es ausgelöst?

Wir wissen, dass einige Setter-basierte Frameworks beim Festlegen von Datenwerten gebundene Variablen auf DOM-Elementen neu zuweisen können. Der Dirty-Erkennungsmechanismus verfügt nicht über diese Stufe. Er kann nicht sofort nach Datenänderungen benachrichtigt werden, sodass Sie apply() nur manuell in jedem Ereigniseintrag aufrufen können, um die Datenänderungen auf die Schnittstelle anzuwenden. In der echten Angular-Implementierung wird zunächst eine Dirty-Erkennung durchgeführt, um festzustellen, ob sich die Daten geändert haben, und dann wird der Schnittstellenwert festgelegt.

Also kapseln wir den echten Klick in ng-click. Die wichtigste Funktion besteht darin, später ein apply() hinzuzufügen, um die Datenänderungen auf die Schnittstelle anzuwenden.

Warum erscheint also ein Fehler, wenn $digest in ng-click aufgerufen wird? Aufgrund des Angular-Designs darf nur ein $digest gleichzeitig ausgeführt werden, und die integrierte Anweisung ng-click hat $digest bereits ausgelöst, und der aktuelle Befehl ist noch nicht abgeschlossen, sodass ein Fehler aufgetreten ist.

$digest und $apply

In Angular gibt es zwei Funktionen, $apply und $digest. Wir haben gerade $digest verwendet, um diese Daten auf die Schnittstelle anzuwenden. Aber zu diesem Zeitpunkt können Sie auch $apply anstelle von $digest verwenden. Was ist also der Unterschied zwischen ihnen?

最直接的差异是，$apply可以带参数，它可以接受一个函数，然后在应用数据之后，调用这个函数。所以，一般在集成非Angular框架的代码时，可以把代码写在这个里面调用。

var app = angular.module("test", []);
 
app.directive("myclick", function() {
  return function (scope, element, attr) {
    element.on("click", function() {
      scope.counter++;
      scope.$apply(function() {
        scope.counter++;
      });
    });
  };
});
 
app.controller("CounterCtrl", function($scope) {
  $scope.counter = 0;
});

除此之外，还有别的区别吗？

在简单的数据模型中，这两者没有本质差别，但是当有层次结构的时候，就不一样了。考虑到有两层作用域，我们可以在父作用域上调用这两个函数，也可以在子作用域上调用，这个时候就能看到差别了。

对于$digest来说，在父作用域和子作用域上调用是有差别的，但是，对于$apply来说，这两者一样。我们来构造一个特殊的示例：

var app = angular.module("test", []);
 
app.directive("increasea", function() {
  return function (scope, element, attr) {
    element.on("click", function() {
      scope.a++;
      scope.$digest();
    });
  };
});
 
app.directive("increaseb", function() {
  return function (scope, element, attr) {
    element.on("click", function() {
      scope.b++;
      scope.$digest();  //这个换成$apply即可
    });
  };
});
 
app.controller("OuterCtrl", ["$scope", function($scope) {
  $scope.a = 1;
 
  $scope.$watch("a", function(newVal) {
    console.log("a:" + newVal);
  });
 
  $scope.$on("test", function(evt) {
    $scope.a++;
  });
}]);
 
app.controller("InnerCtrl", ["$scope", function($scope) {
  $scope.b = 2;
 
  $scope.$watch("b", function(newVal) {
    console.log("b:" + newVal);
    $scope.$emit("test", newVal);
  });
}]);
<div ng-app="test">
  <div ng-controller="OuterCtrl">
    <div ng-controller="InnerCtrl">
      <button increaseb>increase b</button>
      <span ng-bind="b"></span>
    </div>
    <button increasea>increase a</button>
    <span ng-bind="a"></span>
  </div>
</div>

这时候，我们就能看出差别了，在increase b按钮上点击，这时候，a跟b的值其实都已经变化了，但是界面上的a没有更新，直到点击一次increase a，这时候刚才对a的累加才会一次更新上来。怎么解决这个问题呢？只需在increaseb这个指令的实现中，把$digest换成$apply即可。

当调用$digest的时候，只触发当前作用域和它的子作用域上的监控，但是当调用$apply的时候，会触发作用域树上的所有监控。

因此，从性能上讲，如果能确定自己作的这个数据变更所造成的影响范围，应当尽量调用$digest，只有当无法精确知道数据变更造成的影响范围时，才去用$apply，很暴力地遍历整个作用域树，调用其中所有的监控。

从另外一个角度，我们也可以看到，为什么调用外部框架的时候，是推荐放在$apply中，因为只有这个地方才是对所有数据变更都应用的地方，如果用$digest，有可能临时丢失数据变更。

脏检测的利弊
很多人对Angular的脏检测机制感到不屑，推崇基于setter，getter的观测机制，在我看来，这只是同一个事情的不同实现方式，并没有谁完全胜过谁，两者是各有优劣的。

大家都知道，在循环中批量添加DOM元素的时候，会推荐使用DocumentFragment，为什么呢，因为如果每次都对DOM产生变更，它都要修改DOM树的结构，性能影响大，如果我们能先在文档碎片中把DOM结构创建好，然后整体添加到主文档中，这个DOM树的变更就会一次完成，性能会提高很多。

同理，在Angular框架里，考虑到这样的场景：

function TestCtrl($scope) {
  $scope.numOfCheckedItems = 0;
 
  var list = [];
 
  for (var i=0; i<10000; i++) {
    list.push({
      index: i,
      checked: false
    });
  }
 
  $scope.list = list;
 
  $scope.toggleChecked = function(flag) {
    for (var i=0; i<list.length; i++) {
      list[i].checked = flag;
      $scope.numOfCheckedItems++;
    }
  };
}

如果界面上某个文本绑定这个numOfCheckedItems，会怎样？在脏检测的机制下，这个过程毫无压力，一次做完所有数据变更，然后整体应用到界面上。这时候，基于setter的机制就惨了，除非它也是像Angular这样把批量操作延时到一次更新，否则性能会更低。

所以说，两种不同的监控方式，各有其优缺点，最好的办法是了解各自使用方式的差异，考虑出它们性能的差异所在，在不同的业务场景中，避开最容易造成性能瓶颈的用法。

更多深入学习AngularJS中数据的双向绑定机制相关文章请关注PHP中文网！

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispielanalyse einer bidirektionalen Bindungsanwendung von Daten im AngularJS-FrameworkNächster Artikel：Beispielanalyse einer bidirektionalen Bindungsanwendung von Daten im AngularJS-Framework

In Verbindung stehende Artikel

Mehr sehen