Habituellement, lorsque vous utilisez des instructions dans NG, la fonction de liaison que la plupart utilise est l'attribut de liaison. L'article suivant vous indiquera l'utilisation et les différences entre la compli, la pré-liaison et le post-lien.
Les instructions dans AngularJS sont très magiques, vous permettant de créer des composants très sémantiques et hautement réutilisables, qui peuvent être compris comme le pionnier des composants Web.
Il existe déjà de nombreux articles et des livres connexes sur Internet qui introduisent comment utiliser les instructions. Si vous les comparez, vous introduisez rarement la différence entre la compilation et le lien, sans parler de pré-lien et de post-lien.
La plupart des tutoriels disent simplement que la compilation sera utilisée à l'intérieur de NG, et il est recommandé d'utiliser uniquement l'attribut de liaison, ce qui est le cas dans la plupart des instructions.
Ceci est très regrettable, car la compréhension correcte de la différence entre ces fonctions améliorera votre compréhension du mécanisme de fonctionnement interne de NG et vous aidera à développer de meilleures instructions personnalisées.
Alors suivez-moi pour voir le contenu suivant étape par étape pour comprendre quelles sont ces fonctions et quand elles devraient être utilisées
Cet article suppose que vous avez une certaine compréhension des instructions. Sinon, il est fortement recommandé de lire cet article Section Guide du développeur AngularJS sur les directives
Comment traiter les instructions dans NG
Avant de commencer l'analyse, voyons comment NG-Chinese gère les instructions.
Lorsque le navigateur rend une page, il lit essentiellement l'identité HTML, crée alors un nœud DOM et nous a diffusé un événement après la création de l'arborescence DOM.
Lorsque vous utilisez des balises de script pour charger le code d'application NG dans la page, NG écoute l'événement de complétion DOM ci-dessus et trouve des éléments avec les attributs NG-App.
Après avoir trouvé un tel élément, NG commence à traiter DOM avec le point de départ de cet élément, donc si NG-App est ajouté à l'élément HTML, NG commencera à traiter DOM avec l'élément HTML.
À partir de ce point de départ, NG commence à rechercher récursivement tous les éléments enfants, qui est conforme aux règles d'instruction définies dans l'application.
Comment gérer les instructions de NG dépend en fait des propriétés de l'objet qu'il définit. Vous pouvez définir une fonction de compilation ou de liaison, ou utiliser des fonctions pré-link et post-link au lieu d'un lien.
Alors, quelle est la différence entre ces fonctions? Pourquoi l'utiliser? Et quand?
Avec ces questions, suivez-moi étape par étape pour répondre à ces mystères
Un morceau de code
Pour expliquer les différences entre ces fonctions, j'utiliserai un exemple simple et facile à comprendre ci-dessous
1. Si vous avez des questions, n'hésitez pas à ajouter vos commentaires ci-dessous.
Consultez le code de balise HTML suivant
La copie de code est la suivante:
<Devel-One>
<niveau-deux>
<vel-trois>
Bonjour
</ niveau-trois>
</ niveau-deux>
</Devel-one>
Ensuite, il y a un morceau de code JS
La copie de code est la suivante:
var app = angular.module ('plaker', []);
fonction CreatedIrective (name) {
return function () {
retour {
restreindre: «e»,
compiler: fonction (télém, tattrs) {
console.log (nom + ': compile');
retour {
pre: function (scope, ielem, iattrs) {
console.log (nom + ': pre lien');
},
Post: fonction (scope, ielem, iantrrs) {
console.log (nom + ': lien de publication');
}
}
}
}
}
}
app.directive ('niveneone', crééirective ('niveneone'));
app.directive ('NIVLEATWO', CreatedIrective ('NIVLEATWO'));
app.directive ('NEDLETHREE', CreatedIrective ('NELEDTHREE'));
Le résultat est très simple: laissez NG gérer trois instructions imbriquées, et chaque instruction a ses propres fonctions compliles, pré-liens et post-link. Chaque fonction imprimera une ligne dans la console pour s'identifier.
Cet exemple nous permet de comprendre brièvement le processus interne de NG lors du traitement des instructions
Sortie de code
Vous trouverez ci-dessous une capture d'écran du résultat de sortie sur la console
Si vous souhaitez essayer cet exemple vous-même, veuillez cliquer sur ce PLNKR, puis afficher les résultats dans la console.
Code d'analyse
La première chose à noter est l'ordre de l'appel de ces fonctions:
La copie de code est la suivante:
// Compilation de la phase
// niveleone: la fonction de compilation est appelée
// niveautwo: la fonction de compilation est appelée
// NIVEAUTHREE: La fonction de compilation est appelée
// Phase de pré-liaison
// niveleone: la fonction pré-lien est appelée
// niveautwo: la fonction pré-lien est appelée
// NIVEAUTHREE: La fonction pré-lien est appelée
// Phase post-link (remarquez l'ordre inverse)
// NIVEAUTHREE: la fonction de liaison post-liaison est appelée
// NIVEALTWO: la fonction de liaison de publication est appelée
// niveleone: la fonction de liaison post est appelée
Cet exemple montre clairement que NG compile toutes les instructions avant le lien, puis le lien est divisé en étapes pré-link et post-link.
Notez que l'ordre d'exécution de la compilation et de la pré-liaison est exécuté séquentiellement, mais le post-link est exactement le contraire.
Ainsi, ce qui précède a clairement identifié différentes étapes, mais quelle est la différence entre la compilation et la pré-liaison? Ils sont tous deux dans le même ordre d'exécution, alors pourquoi devons-nous les diviser en deux fonctions différentes?
Dom
Afin de creuser plus profondément, modifions simplement le code ci-dessus, qui imprimera également les variables d'élément dans la liste des paramètres dans chaque fonction
La copie de code est la suivante:
var app = angular.module ('plaker', []);
fonction CreatedIrective (name) {
return function () {
retour {
restreindre: «e»,
compiler: fonction (télém, tattrs) {
console.log (name + ': compile =>' + telem.html ());
retour {
pre: function (scope, ielem, iattrs) {
console.log (name + ': pre link =>' + ielem.html ());
},
Post: fonction (scope, ielem, iantrrs) {
console.log (name + ': poster link =>' + ielem.html ());
}
}
}
}
}
}
app.directive ('niveneone', crééirective ('niveneone'));
app.directive ('NIVLEATWO', CreatedIrective ('NIVLEATWO'));
app.directive ('NEDLETHREE', CreatedIrective ('NELEDTHREE'));
Faites attention à la sortie dans Console.log, à l'exception de la sortie de la balise HTML d'origine, il n'y a essentiellement pas d'autre changement.
Cela devrait approfondir notre compréhension du contexte de ces fonctions.
Exécutez à nouveau le code pour voir
Sortir
Vous trouverez ci-dessous une capture d'écran du résultat de sortie sur la console
Si vous souhaitez toujours l'exécuter vous-même pour voir l'effet, vous pouvez cliquer sur ce PLNKR, puis afficher les résultats de sortie dans la console.
observer
La sortie du résultat DOM peut exposer des choses intéressantes: le contenu DOM est différent dans les deux fonctions compiler et pré-liken
Alors que s'est-il passé?
Compiler
Nous savons déjà que lorsque NG constate que la construction DOM est terminée, nous commençons à traiter le DOM.
Ainsi, lorsque Ng traverse le DOM, il rencontre l'élément de niveau 1 et apprend de sa définition que certaines fonctions nécessaires doivent être exécutées
Parce que la fonction de compilation est définie dans l'objet d'instruction de l'instruction de niveau 1, il sera appelé et passera un objet élément comme paramètre
Si vous regardez attentivement, vous verrez que lorsque le navigateur crée cet objet d'élément, c'est toujours la balise HTML la plus originale.
1. Dans NG, le DOM d'origine est généralement utilisé pour identifier l'élément de modèle, j'ai donc utilisé le nom du télém lors de la définition des paramètres de fonction de compilation, et cette variable pointe vers l'élément de modèle.
Une fois que la fonction de compilation dans l'instruction de niveau-niveau est exécutée, NG traversera de manière récursive ses nœuds DOM en profondeur, puis répétera ces opérations au niveau deux et niveau-trois.
Post-lien
Avant d'entrer dans la fonction de pré-liaison, jetons un coup d'œil à la fonction post-link.
2. Si vous n'utilisez qu'une seule fonction de lien lors de la définition de l'instruction, alors NG traitera cette fonction comme post-link, nous devons donc d'abord discuter de cette fonction.
Une fois que NG a traversé tous les DOM et exécuté toutes les fonctions de compilation, la fonction post-link associée est appelée inverse.
Le DOM commence maintenant à inverser et exécute la fonction post-link. Par conséquent, cet appel inversé semblait un peu étrange auparavant, mais il est vraiment logique de le faire.
Lors de l'exécution de l'instruction post-liaison contenant des sous-instructions, la règle post-liaison inverse peut garantir que le post-lien de ses sous-instructions a été exécuté.
Par conséquent, lors de l'exécution de la fonction post-link de l'instruction de niveau 1, nous pouvons nous assurer que le post-lien de niveau-deux et de niveau-trois a été exécuté.
C'est pourquoi les gens pensent que le post-lien est l'endroit le plus sûr ou le plus par défaut pour rédiger la logique commerciale.
Mais pourquoi l'élément ici est-il différent de celui de la compilation?
Une fois que NG appelle la fonction de compilation de l'instruction, un objet d'instance d'élément de l'élément de modèle sera créé et un objet de portée est fourni pour cela. Cette portée peut être une nouvelle instance, ou elle peut déjà exister, elle peut être une sous-portée, ou elle peut être une portée indépendante. Tout cela dépend de la valeur d'attribut de portée dans l'objet de définition d'instruction.
Ainsi, lorsque la liaison se produit, cet élément d'instance et l'objet de portée sont déjà disponibles et sont passés sous forme de paramètres par NG à la liste des paramètres de la fonction post-link.
1. J'utilise personnellement toujours le nom IELEM pour définir le paramètre d'une fonction de liaison, et il pointe vers l'instance d'élément
Par conséquent, l'objet du paramètre d'élément de la fonction post-link (pré-liaison) est une instance d'élément au lieu d'un élément de modèle.
Ainsi, la sortie dans l'exemple ci-dessus est différente
Pré-liaison
Lors de la rédaction d'une fonction post-link, vous pouvez vous assurer que lors de l'exécution de la fonction post-link, les fonctions post-link de toutes ses instructions enfants ont été exécutées.
Dans la plupart des cas, cela peut faire mieux, donc nous l'utilisons généralement pour écrire le code d'instruction.
Cependant, NG nous fournit un mécanisme de crochet supplémentaire, c'est-à-dire la fonction de pré-liaison, qui peut garantir qu'un autre code est exécuté avant d'exécuter la fonction post-link de toutes les sous-instructions.
Cette phrase est digne d'une considération répétée
La fonction de pré-liaison peut s'assurer qu'elle est exécutée sur l'instance d'élément et avant le lien post-lien de ses sous-instructions.
Il est donc logique d'inverser la fonction post-link, il exécute la fonction de pré-liaison dans l'ordre d'origine.
Cela signifie également que la fonction de pré-liaison s'exécute avant la fonction de pré-liaison de toutes ses sous-instructions, donc la raison complète est:
La fonction de pré-liaison d'un élément peut être garantie pour être exécutée avant l'exécution du post-lien et de la pré-liaison de toutes ses sous-instructions. Voir la figure ci-dessous:
revoir
Si nous regardons en arrière la sortie d'origine ci-dessus, nous pouvons clairement reconnaître ce qui se passe:
La copie de code est la suivante:
// Ici, les éléments sont toujours les éléments de modèle d'origine
// Compilation de la phase
// niveleone: la fonction de compilation est appelée sur DOM d'origine
// NIVEALTWO: La fonction de compilation est appelée sur Dom original
// NIVEAUTHREE: La fonction de compilation est appelée sur Dom original
// à partir d'ici, les éléments ont été instanciés et
// sont liés à une portée
// (par exemple, Ng-Repeat aurait plusieurs instances)
// Phase de pré-liaison
// niveleone: la fonction pré-lien est appelée sur l'instance d'élément
// niveautwo: la fonction pré-lien est appelée sur l'instance d'élément
// NIVEAUTHREE: La fonction pré-lien est appelée sur l'instance d'élément
// Phase post-link (remarquez l'ordre inverse)
// NIVEAUTHREE: La fonction de liaison post est appelée sur l'instance d'élément
// NIVEALTWO: La fonction de liaison post est appelée sur l'instance d'élément
// niveleone: la fonction de liaison post est appelée sur l'instance d'élément
résumé
En regardant en arrière l'analyse ci-dessus, nous pouvons décrire les différences et l'utilisation de ces fonctions:
Fonction de compilation
Utilisez la fonction de compilation pour modifier le DOM d'origine (élément de modèle), avant que NG ne crée l'instance DOM d'origine et l'instance de portée.
Il peut être appliqué à des situations où plusieurs instances d'élément doivent être générées et il n'y a qu'un seul élément de modèle. Ng-Repeat est le meilleur exemple. Il modifie le DOM d'origine dans l'étape de la fonction de compilation pour générer plusieurs nœuds DOM d'origine, puis chacun génère des instances d'élément. Étant donné que la compilation ne fonctionnera qu'une seule fois, elle peut améliorer les performances lorsque vous devez générer plusieurs instances d'élément.
L'élément de modèle et les attributs connexes sont passés sous forme de paramètres à la fonction de compilation, mais la portée ne peut pas être utilisée pour le moment:
Voici la fonction ressembler:
La copie de code est la suivante:
/ **
* Fonction de compilation
*
* @param télém - élément de modèle
* @param tattrs - Attributs de l'élément de modèle
* /
fonction (télém, tattrs) {
// ...
};
Fonction de pré-liaison
Utilisez la fonction de pré-liaison pour exécuter un code commercial après que NG a exécuté la fonction de compilation, mais avant que la fonction post-link de toutes ses sous-instructions ne soit sur le point d'être exécutée.
L'objet de portée et l'instance d'élément seront passés sous forme de paramètres à la fonction de pré-liaison:
Voici la fonction ressembler:
La copie de code est la suivante:
/ **
* Fonction de pré-liaison
*
* @Param Scope - Portée associée à cette istance
* @param ielem - élément d'instance
* @param iantrs - Attributs de l'élément d'instance
* /
Fonction (Scope, ielem, iattrs) {
// ...
};
Fonction post-liaison
Utilisez la fonction post-link pour exécuter la logique métier. À ce stade, il sait déjà que toutes ses sous-instructions ont été compilées et que les fonctions de pré-liaison et de post-lien ont été exécutées.
C'est ce qui est considéré comme le code logique commercial le plus sûr et le plus par défaut.
L'instance de portée et l'instance d'élément sont passées sous forme de paramètres à la fonction post-link:
Voici la fonction ressembler:
La copie de code est la suivante:
/ **
* Fonction post-liaison
*
* @Param Scope - Portée associée à cette istance
* @param ielem - élément d'instance
* @param iantrs - Attributs de l'élément d'instance
* /
Fonction (Scope, ielem, iattrs) {
// ...
};
Résumer
Vous devriez maintenant avoir une compréhension claire des différences entre la compilation, le pré-liaison, le post-liaison et cette fonction.
Si vous ne l'avez pas déjà fait et que vous êtes un développeur NG sérieux, alors je vous recommande fortement de relire cet article jusqu'à ce que vous le compreniez
Comprendre ces concepts est très important, ce qui peut vous aider à comprendre comment fonctionnent les instructions natives et peuvent également vous aider à optimiser vos propres instructions personnalisées.
Si vous avez des questions, veuillez ajouter vos questions dans les commentaires ci-dessous
À l'avenir, nous continuerons à analyser deux autres questions sur les instructions:
1. Comment fonctionne les attributs de transclusion de la directive utilise-t-il?
2. Comment la fonction du contrôleur de l'instruction est-elle associée?
Enfin, si vous trouvez quelque chose qui ne va pas avec cet article, veuillez me commenter à temps
Merci!