Gedanken nach dem ersten Kennenlernen des Angular Framework_AngularJS

Aufgrund des tatsächlichen Entwicklungsbedarfs bei der Arbeit kam ich mit dem Angular Framework in Kontakt. Nach dem anfänglichen Vergleich, der von verschiedenen Problemen und Konzepten gequält und zerstört wurde, habe ich jetzt ein gewisses Verständnis und verspüre das Bedürfnis, mein Verständnis kurz zusammenzufassen. Bitte verzeihen Sie mir etwaige Mängel.

1. Zwei-Wege-Datenbindung
Verschiedene MV**-Frameworks erfreuen sich derzeit in der Branche großer Beliebtheit, und es entstehen ständig verwandte Frameworks, darunter auch Angular (MVVM). Tatsächlich besteht das Kernproblem des MV**-Frameworks darin, die Ansichtsschicht vom Modell zu trennen, die Kopplung des Codes zu reduzieren und die Trennung von Daten und Leistung zu erreichen. MVC, MVP und MVVM verfolgen alle die gleichen Ziele. aber der Unterschied zwischen ihnen liegt darin, wie die Modellebene mit der Ansicht verknüpft wird.

Wie Daten in den Modell- und Ansichtsebenen fließen, ist zum Schlüssel zum Problem geworden. Angular implementiert eine bidirektionale Datenbindung durch Dirty-Check. Die sogenannte bidirektionale Bindung bedeutet, dass Änderungen in der Ansicht in der Modellebene und Änderungen in den Modelldaten in der Ansicht widergespiegelt werden können. Wie erreicht Angular eine bidirektionale Bindung? Warum wird es zum Dirty-Check? Beginnen wir mit einer originellen Frage am Anfang:

html:

 <input type="button" value="increase 1" id="J-increase" />
 <span id="J-count"></span>

js:

 <script>
 var bindDate = {
  count: 1,
  appy: function () {
   document.querySelector('#J-count').innerHTML = this.count;
  },
  increase: function () {
   var _this = this;
   document.querySelector('#J-increase').addEventListener('click', function () {
    _this.count++;
    appy();
   }, true);
  },
  initialize: function () {
    // 初始化
   this.appy();
    //
   this.increase();
   }
  };
  bindDate.initialize();
 </script>

Im obigen Beispiel gibt es zwei Prozesse:

Die Ansichtsebene wirkt sich auf die Modellebene aus: Durch Klicken auf die Schaltfläche auf der Seite erhöht sich die Anzahl der Datenzählungen um 1
Die Modellebene spiegelt die Ansichtsebene wider:Nachdem sich die Anzahl geändert hat, wird sie über die Anwenden-Funktion auf der Ansichtsebene widergespiegelt
Hierbei handelt es sich um eine Datenverarbeitung, die zuvor mithilfe von Bibliotheken wie jquery und YUI implementiert wurde. Die Probleme hier liegen auf der Hand:

• Umfasst viele DOM-Operationen;
• Der Prozess ist umständlich;
• Die Codekopplung ist zu hoch, was das Schreiben von Unit-Tests erschwert.

Sehen wir uns an, wie Angular Daten verarbeitet:

Der erste Schritt: Fügen Sie einen Beobachter hinzu: Wenn sich die Daten ändern, müssen zuerst registriert werden, welche Objekte erkannt werden müssen

// 对angular里面的源码进行了精简 
 $watch: function(watchExp, listener, objectEquality) {
  var scope = this,
   array = scope.$$watchers,
  watcher = {
    fn: listener,
    last: initWatchVal,
   get: get,
   exp: watchExp,
    eq: !!objectEquality
  };
  if (!array) {
   array = scope.$$watchers = [];
 }
  array.unshift(watcher);
 }

Der zweite Schritt: Wenn sich die Daten in einem bestimmten Bereich ändern, müssen Sie die registrierten $$watchers = [...] durchlaufen und erkennen

 $digest: function() {
 while (length--) {
   watch = watchers[length];
  watch.fn(value, lastValue, scope);
 }
 }

2. Abhängigkeitsinjektion Studenten, die das Spring-Framework verwendet haben, wissen, dass Ioc und AOP die beiden wichtigsten Konzepte im Frühjahr sind und dass Ioc zum Einfügen von Abhängigkeiten (DI) verwendet werden kann. Es ist offensichtlich, dass Angular eine sehr starke Back-End-Farbe hat.

 function Car() {
 ...
}
 Car.prototype = {
 run: function () {...}
}
 
function Benz() {
 var cat = new Car();
 }
Benz.prototype = {
  ...
}

1. Simulationsanmerkungen

 // 注解的模拟
 function annotate(fn, strictDi, name) {
 var $inject;
 if (!($inject = fn.$inject)) {
  $inject = [];
  $inject.push(name);
 }else if (isArray(fn)) {
  $inject = fn.slice(0, last);
 }
  return $inject;
 }
 createInjector.$$annotate = annotate;

2. Erstellung des Injektionsobjekts

 function createInjector(modulesToLoad, strictDi) {
  //通过singleton模式创建对象
  var providerCache = {
    $provide: {
      provider: supportObject(provider),
      factory: supportObject(factory),
      service: supportObject(service),
      value: supportObject(value),
      constant: supportObject(constant),
     decorator: decorator
   }
   },
  instanceCache = {},
  instanceInjector = (instanceCache.$injector =
  createInternalInjector(instanceCache, function(serviceName, caller) {
  var provider = providerInjector.get(serviceName + providerSuffix, caller);
     return instanceInjector.invoke(provider.$get, provider, undefined, serviceName);
    }));
 return instanceInjector;
 }

3. Holen Sie sich das Injektionsobjekt

function invoke(fn, self, locals, serviceName) {
 var args = [],
  $inject = annotate(fn, strictDi, serviceName);

 for (...) {
  key = $inject[i];
   // 替换成依赖的对象
   args.push(
   locals && locals.hasOwnProperty(key)
     ? locals[key]
    : getService(key, serviceName)
   );
 }
  if (isArray(fn)) {
  fn = fn[length];
  }   
  return fn.apply(self, args);
}

3.Controller-Kommunikation In der tatsächlichen Entwicklung ist es unmöglich, dass eine Anwendungs-App nur einen Controller hat, daher besteht die Möglichkeit der Kommunikation zwischen verschiedenen Controllern. Es gibt zwei Möglichkeiten, dieses häufige Problem zu lösen:

1. Ereignismechanismus: Ereignisse auf $rootScope registrieren. Das Problem dabei ist, dass zu viele Ereignisse auf $rootScope registriert werden, was zu einer Reihe von Folgeproblemen führt

 //controller1
app.controller('controller1', function ($rootScope) {
 $rootScope.$on('eventType', function (arg) {
    ......
  })
 })

// controller2
app.controller('controller2', function ($rootScope) {
   $rootScope.$emit('eventType',arg);
 or
  $rootScope.$broadcast('eventType',arg);
 })

2. Nutzen Sie die DI-Funktionen von Angular Through Service voll aus: und nutzen Sie die Funktion, dass der Service ein Singleton ist, um als Brücke zwischen verschiedenen Controllern zu fungieren

// 注册service
app.service('Message', function () {
 return {
  count: void(0);
 }
 })
 // controller1,修改service的count值
app.controller('controller1', function ($scope, Message) {
  $scope.count = 1;
 Message.count = $scope.count;
});
 // controller2, 获取service的count值
app.controller('controller2', function ($scope, Message) {
$scope.num = Message.count;
 });