1. Présentation
AngularJS a une caractéristique classique qui est l'injection de dépendance. Les étudiants qui connaissent le printemps devraient très bien savoir ce qu'est l'injection de dépendances, mais il est toujours relativement nouveau pour le front-end.
L'injection de dépendance , en bref, consiste à décoder le code dur pour atteindre le but de la découplage.
Ci-dessous, jetons un coup d'œil aux méthodes de mise en œuvre couramment utilisées dans AngularJS.
Méthode 1: Déclaration d'injection inférentielle, en supposant que le nom du paramètre est le nom de la dépendance. Par conséquent, il appellera en interne la méthode toString () de l'objet de fonction, analysera et extraire la liste des paramètres de fonction, puis injecter ces paramètres dans l'instance d'objet via l'injecteur $.
comme suit:
// Méthode 1: Déclaration d'injection inférentielle, en supposant que le nom du paramètre est le nom de la dépendance. // Par conséquent, il appellera la méthode toString () de l'objet de fonction en interne, analysera et extraire la liste des paramètres de fonction, puis injecter ces paramètres dans l'injecteur d'objet inject.invoke (fonction ($ http, $ timeout) {// todo});Méthode 2: Injecter des déclarations dans la ligne, ce qui nous permet de passer directement un tableau de paramètres lors de la définition de la fonction. Le tableau contient des chaînes et des fonctions, où la chaîne représente le nom de dépendance et la fonction représente l'objet de fonction objectif.
comme suit:
// Méthode 2: Injecter des déclarations dans la ligne, nous permettant de passer directement un tableau de paramètres lors de la définition de la fonction. // Le tableau contient des chaînes et des fonctions, où les chaînes représentent les noms de dépendance et les fonctions représentent des objets de fonction objectif. module.Controller ('name', ['$ http', '$ timeout', function ($ http, $ timeout) {// todo}]);Après avoir lu le code ci-dessus, j'avais une question dans mon esprit, comment elles ont-elles été mises en œuvre?
Haha, simulons ces méthodes d'injection de dépendance ensemble pour les comprendre.
2. Construisez le squelette de base
Le processus d'acquisition d'injection de dépendance consiste à obtenir la méthode correspondante par la cartographie du champ.
Par conséquent, pour implémenter une injection de dépendance de base, nous avons besoin d'un espace de stockage (dépendances) pour stocker la clé / valeur requise; une méthode d'enregistrement (registre) pour ajouter de nouvelles paires de valeurs clés à l'espace de stockage; et un autre est la méthode de mise en œuvre de base (Resolve), qui obtient les résultats de mappage correspondants dans l'espace de stockage via des paramètres pertinents.
Ainsi, le squelette de base est le suivant:
var injector = {dépendances: {}, registre: function (key, valeur) {this.dependces [key] = value; retourner ceci; }, résolve: function () {}};3. Améliorer la méthode de base pour résoudre
D'après le squelette de base que nous avons construit, nous pouvons constater que la clé est en fait la méthode de résolution, qui est utilisée pour implémenter notre forme spécifique des exigences d'injection de dépendance.
Premièrement, nous mettrons en œuvre l'injection de dépendance sous la forme suivante: Déclaration d'injection déduite.
comme suit:
injector.resolve (function (singe, dorie) {singe (); dorie ();});Pour obtenir l'effet ci-dessus, nous pouvons utiliser la méthode ToString () de la fonction, où nous pouvons convertir la fonction en une chaîne, afin d'obtenir le nom du paramètre, c'est-à-dire la valeur de clé, par une expression régulière. Ensuite, via la valeur de clé, recherchez la valeur de valeur dans les dépendances d'espace de stockage. Si aucune valeur correspondante n'est trouvée, une erreur sera signalée.
La mise en œuvre est la suivante:
var injector = {dépendances: {}, registre: function (key, valeur) {this.dependces [key] = value; retourner ceci; }, résolve: function () {var func, deps, args = [], scope = null; func = arguments [0]; // Obtenez le nom du paramètre de la fonction deps = func.ToString (). Match (/ ^ function / s * [^ / (] * / (/ s * ([^ /)] *) /) / m) [1] .replace (/ / g, '') .split (','); SPOPE = Arguments [1] || {}; for (var i = 0, len = depS.length; i <len, d = deps [i]; i ++) {if (this.depencescs [d]) {args.push (this.dependces [d]); } else {lancer une nouvelle erreur ('can /' t find '+ d); }} func.Apply (scope, args); }};Le code de test est le suivant:
<! Doctype html> <éadf> <meta charset = "utf-8" /> </ head> <body> <prict> var injecteur = {dépendances: {}, registre: function (key, valeur) {this.depences [key] = value; retourner ceci; }, résolve: function () {var func, deps, args = [], scope = null; func = arguments [0]; // Obtenez le nom du paramètre de la fonction deps = func.ToString (). Match (/ ^ function / s * [^ / (] * / (/ s * ([^ /)] *) /) / m) [1] .replace (/ / g, '') .split (','); SPOPE = Arguments [1] || {}; for (var i = 0, len = depS.length; i <len, d = deps [i]; i ++) {if (this.depencescs [d]) {args.push (this.dependces [d]); } else {lancer une nouvelle erreur ('can /' t find '+ d); }} func.Apply (scope, args); }}; // Test Code Inject injector.resolve (function (singe, dorie) {singe (); dorie (); console.log ('-.-');}); </cript> </ body> </html>Un inconvénient de la déclaration d'injection inférée est qu'il ne peut pas être compressé à l'aide d'outils de compression, car nous comptons sur les paramètres de la fonction. Lorsque nous comprimerons, nous modifierons le nom du paramètre et modifierons le nom du paramètre, qui échouera certainement.
Ci-dessous, jetons un coup d'œil à la déclaration d'injection en ligne, qui peut compenser cette lacune.
Mettre en œuvre les déclarations d'injection en ligne comme suit:
injector.resolve (['singe', 'dorie', fonction (m, d) {m (); d ();}]);Utilisez le typeof pour déterminer le type d'arguments [0] pour distinguer et obtenir des paramètres et fonctions de dépendance.
La mise en œuvre est la suivante:
var injector = {dépendances: {}, registre: function (key, valeur) {this.dependces [key] = value; retourner ceci; }, résolve: function () {var firstParams, func, deps = [], scope = null, args = []; FirstParams = arguments [0]; SPOPE = Arguments [1] || {}; // Obtenez des paramètres de dépendance pour (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 === 'function') {func = val; }} // En s'appuyant sur les paramètres, trouvez la valeur associée pour (i = 0, len = depS.length; i <len, d = deps [i]; i ++) {if (this.dependces [d]) {args.push (this.dependces [d]); } else {lancer une nouvelle erreur ('can /' t find '+ d); }} func.Apply (Scope || {}, args); }};Le code de test est le suivant:
<! Doctype html> <éadf> <meta charset = "utf-8" /> </ head> <body> <prict> var injecteur = {dépendances: {}, registre: function (key, valeur) {this.depences [key] = value; retourner ceci; }, résolve: function () {var firstParams, func, deps = [], scope = null, args = []; FirstParams = arguments [0]; SPOPE = Arguments [1] || {}; // Obtenez des paramètres de dépendance pour (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 === 'function') {func = val; }} // En s'appuyant sur les paramètres, trouvez la valeur associée pour (i = 0, len = depS.length; i <len, d = deps [i]; i ++) {if (this.dependces [d]) {args.push (this.dependces [d]); } else {lancer une nouvelle erreur ('can /' t find '+ d); }} func.Apply (Scope || {}, args); }}; // Test Code Inject injector.resolve (['singe', 'dorie', fonction (m, d) {m (); d (); console.log ('-.-');}]); </cript> </ body> </html>Parce que la déclaration dans la ligne est utilisée comme paramètre de dépendance à travers la forme d'une chaîne, donc et la compression n'ont pas peur.
Enfin, nous intégrons les deux méthodes mises en œuvre ci-dessus et faisons ce que nous voulons.
Ensuite, fusionnons-le, comme suit:
var injector = {dépendances: {}, registre: function (key, valeur) {this.dependces [key] = value; retourner ceci; }, résolve: function () {var firstParams, func, deps = [], scope = null, args = []; FirstParams = arguments [0]; SPOPE = Arguments [1] || {}; // juge quelle forme d'injection if (typeof firstParams === 'function') {func = premierparams; deps = func.ToString (). Match (/ ^ function / s * [^ / (] * / (/ s * ([^ /)] *) /) / m) [1] .replace (/ / g, '') .split (','); } else {for (var i = 0, len = premierparams.length; i <len; i ++) {var val = firstParams [i], type = typeof val; if (type === 'string') {deps.push (val); } else if (type === 'function') {func = val; }}} // En s'appuyant sur les paramètres, trouvez la valeur associée pour (i = 0, len = deps.length; i <len, d = deps [i]; i ++) {if (this.dependces [d]) {args.push (this.dependces [d]); } else {lancer une nouvelle erreur ('can /' t find '+ d); }} func.Apply (Scope || {}, args); }};4. Faits saillants - Injection de dépendance de requirejs
L'injection de dépendance n'est pas trouvée dans AngularJS. Si vous avez utilisé les obligations, le formulaire suivant connaîtra:
require (['singe', 'dorie'], fonction (m, d) {// todo});Grâce à ce qui précède, nous avons simulé la mise en œuvre de l'injection de dépendance AngularJS étape par étape. Je crois que lorsque vous verrez cela, vous vous rendrez soudainement réaliser que vous changerez la soupe ou le médicament.
La mise en œuvre de la simulation est la suivante:
var injector = {dépendances: {}, registre: function (key, valeur) {this.dependces [key] = value; retourner ceci; }, Resolve: function (Deps, func, scope) {var args = []; for (var i = 0, len = depS.length; i <len, d = deps [i]; i ++) {if (this.depencescs [d]) {args.push (this.dependces [d]); } else {lancer une nouvelle erreur ('can /' t résolver '+ d); }} func.Apply (Scope || {}, args); }};Le code de test est le suivant:
<! Doctype html> <éadf> <meta charset = "utf-8" /> </ head> <body> <prict> var injecteur = {dépendances: {}, registre: function (key, valeur) {this.depences [key] = value; retourner ceci; }, Resolve: function (Deps, func, scope) {var args = []; for (var i = 0, len = depS.length; i <len, d = deps [i]; i ++) {if (this.depencescs [d]) {args.push (this.dependces [d]); } else {lancer une nouvelle erreur ('can /' t résolver '+ d); }} func.Apply (Scope || {}, args); }}}; // Test Code Inject injector.resolve (['singe', 'dorie'], fonction (m, d) {m (); d (); console.log ('-.-');}); </cript> </ body> </html>V. référence
1. AngularJS Application Development Thinking 3: Injection de dépendance
2. Injection de dépendance en javascript
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.