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);
 }
 }

Dadurch wird eine bidirektionale Datenbindung erreicht. Ist die obige Implementierung einem benutzerdefinierten Ereignis ähnlich? Sie können sehen, dass das Beobachter-Entwurfsmuster oder (Herausgeber-Abonnent) verwendet wird.

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.

Schauen wir uns zunächst an, wie man die gegenseitige Abhängigkeit von Objekten ohne Verwendung von DI lösen kann:

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

Im obigen Beispiel hängt die Klasse Benz von der Klasse Car ab, und diese Abhängigkeit wird direkt durch internes New gelöst. Die Nachteile liegen auf der Hand. Die Codekopplung wird höher, was der Wartung nicht förderlich ist. Das Back-End-Framework war sich dieses Problems schon lange bewusst und registrierte die Abhängigkeiten zwischen Objekten in XML-Dateien. Später konnte es das DI-Problem durch Annotation lösen ein Blick auf den Back-End-Code.

Die js-Sprache selbst verfügt nicht über einen Annotationsmechanismus. Wie implementiert Angular ihn?

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);
}

Haben Sie zu diesem Zeitpunkt viele Back-End-Framework-Designideen gesehen? Kein Wunder, dass PPK sagt, dass Angular „ein Front-End-Framework von Nicht-Front-Endern für Nicht-Front-Ender“ ist. Ender"

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;
 });

4.Ciri perkhidmatan

1. Singleton: Hanya perkhidmatan dalam sudut boleh melaksanakan DI seperti pengawal dan arahan tidak mempunyai fungsi ini secara literal tidak berkaitan dengan perniagaan tertentu, manakala pengawal dan arahan berkait rapat dengan perniagaan tertentu, jadi keunikan perkhidmatan perlu dipastikan.

2. lazy new: angular akan mula-mula menjana penyedia perkhidmatan, tetapi tidak serta-merta menjana perkhidmatan yang sepadan Ia hanya akan membuat seketika perkhidmatan ini apabila ia diperlukan. .

3. Pembekal) klasifikasi: pembekal(), kilang, perkhidmatan, nilai, pemalar, di mana penyedia adalah pelaksanaan paling rendah, dan kaedah lain berdasarkannya Gula sintaksis ( gula), perlu diperhatikan bahawa perkhidmatan ini akhirnya akan menambah kaedah $get, kerana perkhidmatan khusus dihasilkan dengan melaksanakan kaedah $get.

5. Pelaksanaan arahan
Penyusunan arahan merangkumi dua peringkat: menyusun dan memaut. Secara ringkasnya, fasa penyusunan terutamanya berkaitan dengan templat DOM Pada masa ini, isu skop tidak terlibat, iaitu, tiada pemaparan data dilakukan Sebagai contoh, arahan ngRepeate mengubah templat melalui kompilasi , fungsi pautan akan dikembalikan, menimpa pautan yang ditakrifkan kemudiannya digunakan terutamanya untuk pemaparan data, yang dibahagikan kepada dua pautan: pra-pautan dan pasca pautan adalah terbalik. Pautan pasca menghuraikan bahagian dalaman terlebih dahulu, dan kemudian bahagian luaran Ini mempunyai kesan yang besar pada arahan adalah selamat kerana arahan itu juga boleh menyertakan arahan Pada masa yang sama, pautan adalah pemprosesan DOM sebenar. yang akan melibatkan isu prestasi dalam operasi DOM.

Kandungan yang diliputi dalam artikel ini tidak begitu komprehensif, dan akan ada suplemen yang sepadan kemudian.