Por lo general, cuando usa instrucciones en NG, la función de enlace que más usa es el atributo de enlace. El siguiente artículo le dirá el uso y las diferencias entre CLELLI, Pre-Link y Post-Link.
Las instrucciones en AngularJS son muy mágicas, lo que le permite crear componentes muy semánticos y altamente reutilizables, lo que puede entenderse como el pionero de los componentes web.
Ya hay muchos artículos y libros relacionados en Internet que introducen cómo usar instrucciones. Si los compara, rara vez introduce la diferencia entre Compile y Link, y mucho menos pre-enlace y posterior al enlace.
La mayoría de los tutoriales simplemente dicen que la compilación se usará dentro de NG, y se recomienda que solo use el atributo de enlace, que es el caso en la mayoría de las instrucciones.
Esto es muy desafortunado, porque comprender correctamente la diferencia entre estas funciones mejorará su comprensión del mecanismo interno de ejecución de NG y lo ayudará a desarrollar mejores instrucciones personalizadas.
Así que sígueme para ver el siguiente contenido paso a paso para comprender cuáles son estas funciones y cuándo deben usarse
Este artículo supone que tiene una cierta comprensión de las instrucciones. Si no, se recomienda encarecidamente que lea este artículo Sección de la Guía del desarrollador de AngularJS en directivas
Cómo procesar las instrucciones en NG
Antes de comenzar el análisis, veamos cómo NG-chines maneja las instrucciones.
Cuando el navegador representa una página, esencialmente lee la identidad HTML, luego crea un nodo DOM y nos transmite un evento después de que se cree el árbol DOM.
Cuando usa etiquetas de script para cargar el código de aplicación NG en la página, NG escucha el evento de finalización DOM anterior y encuentra elementos con atributos NG-APP.
Después de encontrar dicho elemento, NG comienza a procesar DOM con el punto de partida de este elemento, por lo que si NG-APP se agrega al elemento HTML, Ng comenzará a procesar DOM con el elemento HTML.
A partir de este punto de partida, NG comienza a buscar recursivamente todos los elementos infantiles, lo que cumple con las reglas de instrucción definidas en la aplicación.
Cómo lidiar con las instrucciones de NG en realidad depende de las propiedades del objeto que define. Puede definir una función de compilación o un enlace, o usar funciones previas y posteriores al enlace en lugar de enlace.
Entonces, ¿cuál es la diferencia entre estas funciones? ¿Por qué usarlo? ¿Y cuándo?
Con estas preguntas, sígueme paso a paso para responder a estos misterios
Un pedazo de código
Para explicar las diferencias entre estas funciones, usaré un ejemplo simple y fácil de entender a continuación
1. Si tiene alguna pregunta, no dude en agregar sus comentarios a continuación.
Consulte el siguiente código de etiqueta HTML
La copia del código es la siguiente:
<Level-one>
<Level-two>
<nivel-tres>
Hola
</nivel-tres>
</nivel-two>
</livel-one>
Luego hay una pieza de código JS
La copia del código es la siguiente:
var app = angular.module ('plunker', []);
función creatective (nombre) {
Función de retorno () {
devolver {
restringir: 'e',
compilar: function (telem, tattrs) {
console.log (nombre + ': compilar');
devolver {
pre: function (alcance, ielem, IATTRS) {
console.log (nombre + ': preink');
},
Publicar: función (alcance, ielem, IATTRS) {
console.log (nombre + ': Post Link');
}
}
}
}
}
}
App.Directive ('LevelOne', creatective ('LevelOne'));
app.directive ('niveltwo', creatective ('niveltwo'));
App.Directive ('LevelThree', creatective ('LevelThree'));
El resultado es muy simple: deje que Ng maneje tres instrucciones anidadas, y cada instrucción tiene sus propias funciones de complemento, pre-enlace y posterior al enlace. Cada función imprimirá una línea en la consola para identificarse.
Este ejemplo nos permite comprender brevemente el proceso interno de NG al procesar instrucciones
Salida del código
A continuación se muestra una captura de pantalla del resultado de salida en la consola
Si desea probar este ejemplo usted mismo, haga clic en este PLNKR y luego vea los resultados en la consola.
Código de análisis
Lo primero que debe tener en cuenta es el orden de llamada de estas funciones:
La copia del código es la siguiente:
// fase de compilación
// LevelOne: se llama a la función de compilación
// niveltwo: se llama a la función de compilación
// LevelThree: la función de compilación se llama
// fase previa al enlace
// se llama a la función de pre -enlace pre -enlace
// se llama a la función de pre -enlace pre -enlace
// LevelThree: se llama a la función previa al enlace
// fase posterior al enlace (observe el orden inverso)
// LevelThree: se llama a la función de enlace de publicación
// se llama a la función de enlace de publicación:
// se llama a la función de enlace de publicación:
Este ejemplo muestra claramente que NG compila todas las instrucciones antes del enlace, y luego el enlace se divide en etapas previas y posteriores al enlace.
Tenga en cuenta que la orden de ejecución de compilar y pre-enlace se ejecutan secuencialmente, pero Postlink es exactamente lo contrario.
Entonces, lo anterior ha identificado claramente diferentes etapas, pero ¿cuál es la diferencia entre compilar y pre-enlace? Ambos están en la misma orden de ejecución, entonces, ¿por qué tenemos que dividirlos en dos funciones diferentes?
Domina
Para profundizar, simplemente modifiquemos el código anterior, que también imprimirá variables de elementos en la lista de parámetros en cada función
La copia del código es la siguiente:
var app = angular.module ('plunker', []);
función creatective (nombre) {
Función de retorno () {
devolver {
restringir: 'e',
compilar: function (telem, tattrs) {
console.log (nombre + ': compile =>' + telem.html ());
devolver {
pre: function (alcance, ielem, IATTRS) {
console.log (nombre + ': prekink =>' + ielem.html ());
},
Publicar: función (alcance, ielem, IATTRS) {
console.log (nombre + ': post link =>' + ielem.html ());
}
}
}
}
}
}
App.Directive ('LevelOne', creatective ('LevelOne'));
app.directive ('niveltwo', creatective ('niveltwo'));
App.Directive ('LevelThree', creatective ('LevelThree'));
Preste atención a la salida en consola.log, excepto por la salida de la etiqueta HTML original, básicamente no hay otro cambio.
Esto debería profundizar nuestra comprensión del contexto de estas funciones.
Ejecute el código nuevamente para ver
Producción
A continuación se muestra una captura de pantalla del resultado de salida en la consola
Si aún desea ejecutarlo usted mismo para ver el efecto, puede hacer clic en este PLNKR y luego ver los resultados de salida en la consola.
observar
La salida del resultado DOM puede exponer algunas cosas interesantes: el contenido de DOM es diferente en las dos funciones compilarse y pre-enlace
Entonces, ¿qué pasó?
Compilar
Ya sabemos que cuando NG encuentra que la construcción DOM se completa, comenzamos a procesar el DOM.
Entonces, cuando NG está atravesando el DOM, se encuentra con el elemento de nivel uno y aprende de su definición que algunas funciones necesarias deben ejecutarse
Debido a que la función de compilación se define en el objeto de instrucción de la instrucción de nivel uno, se llamará y pasará un objeto de elemento como su parámetro
Si mira de cerca, verá que cuando el navegador cree este objeto de elemento, sigue siendo la etiqueta HTML más original.
1. En ng, el DOM original generalmente se usa para identificar el elemento de plantilla, por lo que utilicé el nombre de Telem al definir los parámetros de la función de compilación, y esta variable apunta al elemento de plantilla.
Una vez que se ejecuta la función de compilación en la instrucción de nivela, Ng atravesará recursivamente sus nodos DOM en profundidad y luego repetirá estas operaciones en el nivel dos y el nivel tres.
Posterior al enlace
Antes de entrar en la función previa al enlace, echemos un vistazo a la función posterior al enlace.
2. Si solo usa una función de enlace al definir la instrucción, entonces Ng tratará esta función como posterior al enlace, por lo que primero debemos discutir esta función.
Después de que NG ha atravesado todos los DOM y ejecutó todas las funciones de compilación, la función posterior al enlace asociada se llama en reversa.
El DOM ahora comienza a revertir y ejecuta la función posterior al enlace. Por lo tanto, esta llamada inversa parecía un poco extraña antes, pero en realidad tiene sentido hacerlo.
Al ejecutar la instrucción posterior al enlace que contiene subestrucciones, la regla inversa posterior al enlace puede garantizar que se haya ejecutado el enlace posterior de sus subestrucciones.
Por lo tanto, al ejecutar la función posterior al enlace de la instrucción de nivel uno, podemos asegurarnos de que el nivel de nivel dos y niveles se haya ejecutado realmente.
Es por eso que la gente piensa que Post-Link es el lugar más seguro o predeterminado para escribir la lógica comercial.
Pero, ¿por qué el elemento aquí es diferente del de la compilación?
Una vez que NG llame a la función de compilación de la instrucción, se creará un objeto de instancia de elemento del elemento de plantilla y se le proporcionará un objeto de alcance. Este alcance puede ser una nueva instancia, o ya puede existir, puede ser un subcalls, o puede ser un alcance independiente. Todos estos dependen del valor del atributo de alcance en el objeto Definición de instrucciones.
Entonces, cuando se produce la vinculación, este elemento de instancia y el objeto de alcance ya están disponibles, y se pasan como parámetros por Ng a la lista de parámetros de la función posterior al enlace.
1. Personalmente, siempre uso el nombre de Ielem para definir el parámetro de una función de enlace, y apunta a la instancia del elemento
Por lo tanto, el objeto de parámetro de elemento de la función post-enlace (pre-enlace) es una instancia de elemento en lugar de un elemento de plantilla.
Entonces la salida en el ejemplo anterior es diferente
Prevenir
Al escribir una función posterior al enlace, puede asegurarse de que al ejecutar la función posterior al enlace, las funciones posteriores al enlace de todas las instrucciones de sus hijos se han ejecutado.
En la mayoría de los casos, puede hacerlo mejor, por lo que generalmente lo usamos para escribir el código de instrucción.
Sin embargo, NG nos proporciona un mecanismo de gancho adicional, es decir, la función previa al enlace, lo que puede garantizar que se ejecute algún otro código antes de ejecutar la función posterior al enlace de todas las subestrucciones.
Esta oración es digna de consideración repetida
La función previa al enlace puede garantizar que se ejecute en la instancia del elemento y antes de que se ejecute el enlace posterior de sus subestrucciones.
Por lo tanto, tiene sentido revertir la función posterior al enlace, ejecuta la función previa al enlace en el orden original.
Esto también significa que la función previa al enlace se ejecuta antes de la función previa al enlace de todas sus subestrucciones, por lo que la razón completa es:
Se puede garantizar que la función previa al enlace de un elemento se ejecutará antes de que se ejecuten el enlace posterior y el enlace previo de todas sus subestrucciones. Vea la figura a continuación:
revisar
Si miramos hacia atrás en la salida original anterior, podemos reconocer claramente lo que está sucediendo:
La copia del código es la siguiente:
// Aquí los elementos siguen siendo los elementos de plantilla originales
// fase de compilación
// LevelOne: la función de compilación se llama en DOM original
// niveltwo: la función de compilación se llama en DOM original
// LevelThree: la función de compilación se llama en DOM original
// Por aquí, los elementos han sido instanciados y
// están unidos a un alcance
// (por ejemplo, ng-repeat tendría múltiples instancias)
// fase previa al enlace
// LevelOne: la función previa al enlace se llama en la instancia de elemento
// niveltwo: la función previa al enlace se llama en el elemento instancia de elemento
// LevelThree: la función previa al enlace se llama en la instancia de elemento
// fase posterior al enlace (observe el orden inverso)
// LevelThree: la función de enlace de publicación se llama en la instancia de elemento
// niveltwo: la función de enlace de publicación se llama en el elemento instancia de elemento
// nivele: la función de enlace de publicación se llama en el elemento instancia de elemento
resumen
Mirando hacia atrás en el análisis anterior, podemos describir las diferencias y el uso de estas funciones:
Función de compilar
Use la función de compilación para cambiar el DOM original (elemento de plantilla), antes de que Ng cree la instancia de DOM original y la instancia de alcance.
Se puede aplicar a situaciones en las que se deben generar múltiples instancias de elementos y solo hay un elemento de plantilla. Ng-Repeat es el mejor ejemplo. Cambia el DOM original en la etapa de la función de compilación para generar múltiples nodos DOM originales, y luego cada uno genera instancias de elementos. Debido a que la compilación solo se ejecutará una vez, puede mejorar el rendimiento cuando necesita generar múltiples instancias de elementos.
El elemento de plantilla y los atributos relacionados se pasan como parámetros a la función de compilación, pero el alcance no se puede usar en este momento:
Aquí está la función que parece:
La copia del código es la siguiente:
/**
* Compilar la función
*
* @param Telem - Elemento de plantilla
* @param tattrs - atributos del elemento de plantilla
*/
función (Telem, Tattrs) {
// ...
};
Función previa al enlace
Use la función previa al enlace para ejecutar algún código de negocio después de que NG haya ejecutado la función de compilación, pero antes de que la función posterior al enlace de todas sus subestrucciones esté a punto de ejecutarse.
El objeto de alcance y la instancia de elemento se pasarán como parámetros a la función previa al enlace:
Aquí está la función que parece:
La copia del código es la siguiente:
/**
* Función previa al enlace
*
* @param alcance - alcance asociado con esta istance
* @param ielem - elemento de instancia
* @param IATTRS - Atributos del elemento de instancia
*/
función (alcance, ielem, IATTRS) {
// ...
};
Función posterior al enlace
Use la función Post-Link para ejecutar la lógica de negocios. En esta etapa, ya sabe que todas sus subestrucciones se han compilado y que las funciones previas al enlace y después del enlace se han ejecutado.
Esto es lo que se considera el código lógico comercial de escritura más seguro y predeterminado.
La instancia de alcance y la instancia de elemento se pasan como parámetros a la función posterior al enlace:
Aquí está la función que parece:
La copia del código es la siguiente:
/**
* Función posterior al enlace
*
* @param alcance - alcance asociado con esta istance
* @param ielem - elemento de instancia
* @param IATTRS - Atributos del elemento de instancia
*/
función (alcance, ielem, IATTRS) {
// ...
};
Resumir
Ahora debe tener una comprensión clara de las diferencias entre compilar, pre-enlace, post-enlace y esta función.
Si aún no lo ha hecho, y usted es un desarrollador NG serio, le recomiendo que lea este artículo nuevamente hasta que lo comprenda
Comprender estos conceptos es muy importante, lo que puede ayudarlo a comprender cómo funcionan las instrucciones nativas de NG y también puede ayudarlo a optimizar sus propias instrucciones personalizadas.
Si tiene alguna pregunta, agregue sus preguntas en los comentarios a continuación
En el futuro, continuaremos analizando otras dos preguntas sobre las instrucciones:
1. ¿Cómo funciona la directiva el uso de los atributos de transclusión?
2. ¿Cómo se asocia la función del controlador de la instrucción?
Finalmente, si encuentra algo mal con este artículo, por favor comente a tiempo
¡Gracias!