1. Übersicht
AngularJS hat ein klassisches Merkmal, das Abhängigkeitsinjektion ist. Schüler, die mit dem Frühling vertraut sind, sollten sehr gut wissen, was Abhängigkeitsinjektion ist, aber für das Front-End ist sie immer noch relativ neu.
Kurz gesagt, die Abhängigkeitsinjektion besteht darin, den Hardcode zu entlarven, um den Zweck der Entkopplung zu erreichen.
Schauen wir uns unten die häufig verwendeten Implementierungsmethoden in AngularJs an.
Methode 1: Inferenzeinspritzdeklaration unter der Annahme, dass der Parametername der Name der Abhängigkeit ist. Daher wird die Methode toString () des Funktionsobjekts intern analysiert, die Funktionsparameterliste analysiert und extrahiert und diese Parameter dann über $ Injector in die Objektinstanz injiziert.
wie folgt:
// Methode 1: Inferenzeinspritzdeklaration unter der Annahme, dass der Parametername der Name der Abhängigkeit ist. // Daher wird die Methode toString () des Funktionsobjekts intern aufgerufen, die Liste der Funktionsparameter analysiert und extrahiert und diese Parameter dann in die Objektinjektor.invoke (Funktion ($ http, $ timeout) {// todo}) injiziert;Methode 2: Injektionserklärungen innerhalb der Linie, sodass wir beim Definieren der Funktion ein Array von Parametern direkt übergeben können. Das Array enthält Zeichenfolgen und Funktionen, in denen Zeichenfolgen Abhängigkeitsnamen und Funktionen darstellen, ob objektive Funktionsobjekte darstellen.
wie folgt:
// Methode 2: Injizieren Sie Deklarationen in die Linie, sodass wir beim Definieren der Funktion ein Array von Parametern direkt übergeben können. // Array enthält Zeichenfolgen und Funktionen, in denen Zeichenfolgen Abhängigkeitsnamen und Funktionen darstellen, ob objektive Funktionsobjekte darstellen. module.controller ('name', ['$ http', '$ timeout', function ($ http, $ timeout) {// Todo}]);Nachdem ich den obigen Code gelesen hatte, hatte ich eine Frage in meinem Kopf. Wie wurden diese implementiert?
Haha, simulieren wir diese Abhängigkeitsinjektionsmethoden zusammen, um sie zu verstehen.
2. Bauen Sie das Basis -Skelett
Der Erwerbsprozess der Abhängigkeitsinjektion besteht darin, die entsprechende Methode durch Feldzuordnung zu erhalten.
Um eine grundlegende Abhängigkeitsinjektion zu implementieren, benötigen wir daher einen Speicherplatz (Abhängigkeiten), um den erforderlichen Schlüssel/Wert zu speichern. eine Registrierungsmethode (Register), um dem Speicherplatz neue Schlüsselwertpaare hinzuzufügen; und ein anderes ist die Kernimplementierungsmethode (Auflösung), die die entsprechenden Zuordnungsergebnisse im Speicherplatz durch relevante Parameter erhalten.
Das grundlegende Skelett lautet also wie folgt:
var injector = {Abhängigkeiten: {}, Register: Funktion (Schlüssel, Wert) {this.Dependenzen [Schlüssel] = Wert; gib dies zurück; }, Resolve: function () {}};3.. Verbessern Sie die Kernmethode zur Lösung
Aus dem von uns gebauten grundlegenden Skelett können wir feststellen, dass der Schlüssel tatsächlich die Auflösungsmethode ist, mit der unsere spezifische Form der Abhängigkeitsinjektionsanforderungen implementiert werden.
Erstens werden wir die Abhängigkeitsinjektion in der folgenden Form umsetzen: Abgeleitete Injektionserklärung.
wie folgt:
Injector.resolve (Funktion (Monkey, Dorie) {Monkey (); Dorie ();});Um den obigen Effekt zu erzielen, können wir die Methode der Funktion toString () verwenden, wobei wir die Funktion in eine Zeichenfolge umwandeln können, um den Parameternamen, dh den Schlüsselwert, durch einen regulären Ausdruck zu erhalten. Ermitteln Sie dann durch den Schlüsselwert den Wertwert in den Abhängigkeiten des Speicherplatzes. Wenn kein entsprechender Wert gefunden wird, wird ein Fehler gemeldet.
Die Implementierung ist wie folgt:
var injector = {Abhängigkeiten: {}, Register: Funktion (Schlüssel, Wert) {this.Dependenzen [Schlüssel] = Wert; gib dies zurück; }, Resolve: function () {var func, deps, args = [], Scope = null; Func = Argumente [0]; // Erhalten Sie den Parameternamen der Funktion DEPS = func.toString (). Übereinstimmung (/^Funktion/s*[^/(]*/(/s*([^/)]*)/)/m) [1] .Replace (//g, '') .Split (','); Scope = Argumente [1] || {}; für (var i = 0, len = deps.length; i <len, d = deps [i]; i ++) {if (this.dEpendencies [d]) {args.push (this.despendenzen [d]); } else {neue Fehler werfen ('Can/' t Find ' + d); }} func.apply (Scope, args); }};Der Testcode lautet wie folgt:
<! DocType html> <kopf> <meta charset = "utf-8"/> </head> <body> <script> var injector = {Abhängigkeiten: {}, Register: Funktion (Schlüssel, Wert) {this.dependenzen [key] = value; gib dies zurück; }, Resolve: function () {var func, deps, args = [], Scope = null; Func = Argumente [0]; // Erhalten Sie den Parameternamen der Funktion DEPS = func.toString (). Übereinstimmung (/^Funktion/s*[^/(]*/(/s*([^/)]*)/)/m) [1] .Replace (//g, '') .Split (','); Scope = Argumente [1] || {}; für (var i = 0, len = deps.length; i <len, d = deps [i]; i ++) {if (this.dEpendencies [d]) {args.push (this.despendenzen [d]); } else {neue Fehler werfen ('Can/' t Find ' + d); }} func.apply (Scope, args); }}; // Testcode injector.register ('Monkey', function () {console.log ('monekey');}). Register ('dorie', function () {console.log ('dorie');}); Injector.resolve (Funktion (Monkey, Dorie) {Monkey (); Dorie (); console.log ('-.-');}); </script> </body> </html>Ein Nachteil der abgeleiteten Injektionsdeklaration ist, dass sie nicht mit Komprimierungswerkzeugen komprimiert werden kann, da wir uns auf die Parameter der Funktion verlassen. Wenn wir komprimieren, ändern wir den Parameternamen und ändern den Parameternamen, der definitiv fehlschlägt.
Schauen wir uns dann unten die In-Line-Injektionsanweisung an, die diesen Mangel ausgleichen kann.
Implementieren Sie Inline-Injektionsdeklarationen wie folgt:
Injector.resolve (['Monkey', 'Dorie', Funktion (m, d) {m (); d ();}]);Verwenden Sie TypoF, um die Art der Argumente zu bestimmen [0], um Abhängigkeitsparameter und -funktionen zu unterscheiden und zu erhalten.
Die Implementierung ist wie folgt:
var injector = {Abhängigkeiten: {}, Register: Funktion (Schlüssel, Wert) {this.Dependenzen [Schlüssel] = Wert; gib dies zurück; }, Resolve: function () {var firstParams, func, deps = [], Scope = null, args = []; FirstParams = Argumente [0]; Scope = Argumente [1] || {}; // Abhängigkeitsparameter für (var i = 0, len = firstParams.length; i <len; i ++) {var val = firstParams [i], type = typeof val; if (type === 'String') {deps.push (val); } else if (type === 'Funktion') {func = val; }} // Durch die Stütze auf Parameter den zugehörigen Wert für (i = 0, len = deps.Length; i <len, d = deps [i]; i ++) {if (this.abendenzen [d]) {args.push (this.Dependenzen [d]); } else {neue Fehler werfen ('Can/' t Find ' + d); }} func.apply (Scope || {}, args); }};Der Testcode lautet wie folgt:
<! DocType html> <kopf> <meta charset = "utf-8"/> </head> <body> <script> var injector = {Abhängigkeiten: {}, Register: Funktion (Schlüssel, Wert) {this.dependenzen [key] = value; gib dies zurück; }, Resolve: function () {var firstParams, func, deps = [], Scope = null, args = []; FirstParams = Argumente [0]; Scope = Argumente [1] || {}; // Abhängigkeitsparameter für (var i = 0, len = firstParams.length; i <len; i ++) {var val = firstParams [i], type = typeof val; if (type === 'String') {deps.push (val); } else if (type === 'Funktion') {func = val; }} // Durch die Stütze auf Parameter den zugehörigen Wert für (i = 0, len = deps.Length; i <len, d = deps [i]; i ++) {if (this.abendenzen [d]) {args.push (this.Dependenzen [d]); } else {neue Fehler werfen ('Can/' t Find ' + d); }} func.apply (Scope || {}, args); }}; // Testcode injector.register ('Monkey', function () {console.log ('monekey');}). Register ('dorie', function () {console.log ('dorie');}); Injector.resolve (['Monkey', 'Dorie', Funktion (m, d) {m (); d (); console.log ('-.-');}]); </script> </body> </html>Weil die Erklärung in der Linie als Abhängigkeitsparameter durch die Form einer Zeichenfolge verwendet wird, haben also keine Angst vor der Komprimierung.
Schließlich integrieren wir die beiden oben implementierten Methoden und tun alles, was wir wollen.
Dann fusionieren wir es wie folgt:
var injector = {Abhängigkeiten: {}, Register: Funktion (Schlüssel, Wert) {this.Dependenzen [Schlüssel] = Wert; gib dies zurück; }, Resolve: function () {var firstParams, func, deps = [], Scope = null, args = []; FirstParams = Argumente [0]; Scope = Argumente [1] || {}; // beurteilen, welche Form der Injektion if (typeof firstParams === 'Funktion') {func = firstParams; DEPS = func.toString (). Übereinstimmung (/^function/s*[^/(]*/(/s*([^/)]*)/)/m) [1] .Replace (//g, '') .Split (','); } else {for (var i = 0, len = firstParams.length; i <len; i ++) {var val = firstParams [i], type = typeof val; if (type === 'String') {deps.push (val); } else if (type === 'Funktion') {func = val; }}} // Durch die Stütze auf Parameter den zugeordneten Wert für (i = 0, len = deps.Length; i <len, d = deps [i]; i ++) {if (this.Dependencies [d]) {args.push (this.Dependenzen [d]) finden } else {neue Fehler werfen ('Can/' t Find ' + d); }} func.apply (Scope || {}, args); }};4. Highlights - Die Abhängigkeitsinjektion von RequestJS
Die Abhängigkeitsinjektion findet sich nicht in AngularJs. Wenn Sie RefordeJs verwendet haben, ist das folgende Formular mit:
fordern (['Monkey', 'Dorie'], Funktion (m, d) {// Todo});In den oben genannten simulierten wir die Implementierung der AngularJS -Abhängigkeitseinspritzung Schritt für Schritt. Ich glaube, wenn Sie dies sehen, werden Sie plötzlich erkennen, dass Sie die Suppe oder die Medizin verändern werden.
Die Simulationsimplementierung lautet wie folgt:
var injector = {Abhängigkeiten: {}, Register: Funktion (Schlüssel, Wert) {this.Dependenzen [Schlüssel] = Wert; gib dies zurück; }, Resolve: Funktion (DEPS, Func, Scope) {var args = []; für (var i = 0, len = deps.length; i <len, d = deps [i]; i ++) {if (this.dEpendencies [d]) {args.push (this.despendenzen [d]); } else {neuer Fehler werfen ('Can/' t Resolve ' + d); }} func.apply (Scope || {}, args); }};Der Testcode lautet wie folgt:
<! DocType html> <kopf> <meta charset = "utf-8"/> </head> <body> <script> var injector = {Abhängigkeiten: {}, Register: Funktion (Schlüssel, Wert) {this.dependenzen [key] = value; gib dies zurück; }, Resolve: Funktion (DEPS, Func, Scope) {var args = []; für (var i = 0, len = deps.length; i <len, d = deps [i]; i ++) {if (this.dEpendencies [d]) {args.push (this.despendenzen [d]); } else {neuer Fehler werfen ('Can/' t Resolve ' + d); }} func.apply (Scope || {}, args); }}}; // Testcode injector.register ('Monkey', function () {console.log ('monekey');}). Register ('dorie', function () {console.log ('dorie');}); Injector.resolve (['Monkey', 'Dorie'], Funktion (m, d) {m (); d (); console.log ('-.-');}); </script> </body> </html>V. Referenz
1. AngularJS Application Development Thinking 3: Abhängigkeitsinjektion
2. Abhängigkeitsinjektion in JavaScript
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.