Normalmente, quando você usa instruções no NG, a função de link que mais usa é o atributo do link. O artigo a seguir informará o uso e as diferenças entre compli, pré-link e pós-link.
As instruções no AngularJs são muito mágicas, permitindo que você crie componentes muito semânticos e altamente reutilizáveis, que podem ser entendidos como o pioneiro dos componentes da Web.
Já existem muitos artigos e livros relacionados na Internet que introduzem como usar instruções. Se você os comparar, raramente apresenta a diferença entre compilação e link, muito menos o pré-ligação e o pós-link.
A maioria dos tutoriais simplesmente diz que a compilação será usada dentro de NG e é recomendável que você use apenas o atributo do link, que é o caso na maioria das instruções.
Isso é muito lamentável, porque entender corretamente a diferença entre essas funções melhorará sua compreensão do mecanismo interno de corrida de NG e o ajudará a desenvolver melhores instruções personalizadas.
Então siga -me para ver o seguinte conteúdo passo a passo para entender quais são essas funções e quando devem ser usadas
Este artigo assume que você tem um certo entendimento das instruções. Caso contrário, é fortemente recomendado que você leia este artigo Seção Guia de Desenvolvedores AngularJS sobre Diretivas
Como processar instruções em ng
Antes de iniciar a análise, vamos ver como Ng-Chinese lida com as instruções.
Quando o navegador renderiza uma página, lê essencialmente a identidade HTML, cria um nó DOM e transmite um evento para nós depois que a árvore Dom é criada.
Quando você usa tags de script para carregar o código de aplicativo NG na página, o NG ouve o evento de conclusão do DOM acima e encontra elementos com atributos NG-APP.
Depois de encontrar esse elemento, o NG inicia o processamento de DOM com o ponto de partida desse elemento; portanto, se Ng-App for adicionado ao elemento HTML, o NG começará a processar DOM com o elemento HTML.
A partir desse ponto de partida, o NG começa a pesquisar recursivamente todos os elementos filhos, o que está em conformidade com as regras de instrução definidas no aplicativo.
Como lidar com as instruções de NG realmente depende das propriedades do objeto que ele define. Você pode definir uma função de compilação ou link ou usar funções pré-ligante e pós-ligação em vez de link.
Então, qual é a diferença entre essas funções? Por que usá -lo? E quando?
Com essas perguntas, siga -me passo a passo para responder a esses mistérios
Um pedaço de código
Para explicar as diferenças entre essas funções, usarei um exemplo simples e fácil de entender abaixo
1. Se você tiver alguma dúvida, não hesite em adicionar seus comentários abaixo.
Confira o seguinte código de tag html
A cópia do código é a seguinte:
<nível-one>
<nível dois>
<nível-três>
Olá
</velhree>
</vel-two>
</nível-one>
Depois, há um pedaço de código JS
A cópia do código é a seguinte:
var app = angular.module ('Plunker', []);
função criada comovecion (nome) {
Return function () {
retornar {
restringir: 'e',
Compilar: function (telem, tattrs) {
console.log (nome + ': compilação');
retornar {
pré: function (escopo, ielem, iattrs) {
console.log (nome + ': pré -link');
},
Post: function (escopo, ielem, iattrs) {
console.log (nome + ': link post');
}
}
}
}
}
}
App.Directive ('LevelOne', Createdirection ('LevelOne'));
App.Directive ('LevelTwo', CreatedIREction ('LevelTwo'));
App.Directive ('LevelThree', Createdirection ('LevelThree'));
O resultado é muito simples: deixe Ng lidar com três instruções aninhadas e cada instrução tem suas próprias funções complil, pré-liga e pós-link. Cada função imprimirá uma linha no console para se identificar.
Este exemplo nos permite entender brevemente o processo interno de NG ao processar as instruções
Saída de código
Abaixo está uma captura de tela do resultado da saída no console
Se você quiser experimentar este exemplo, clique neste PLNKR e visualize os resultados no console.
Código de análise
A primeira coisa a observar é a ordem de chamada dessas funções:
A cópia do código é a seguinte:
// fase de compilação
// LevelOne: a função de compilação é chamada
// LevelTwo: a função de compilação é chamada
// LevelThree: a função de compilação é chamada
// fase pré-link
// LevelOne: a função pré -link é chamada
// LevelTwo: a função pré -link é chamada
// Levelthree: a função pré -link é chamada
// fase pós-link (observe a ordem reversa)
// LevelThree: a função de link post é chamada
// LevelTwo: a função de link post é chamada
// LevelOne: a função de link post é chamada
Este exemplo mostra claramente que o NG compila todas as instruções antes do link e, em seguida, o link é dividido em estágios pré-liga e pós-link.
Observe que a ordem de execução de compilação e pré-ligação é executada sequencialmente, mas o pós-link é exatamente o oposto.
Portanto, o exposto acima identificou claramente estágios diferentes, mas qual é a diferença entre compilação e pré-ligação? Ambos estão na mesma ordem de execução, então por que temos que dividi -los em duas funções diferentes?
Dom
Para se aprofundar, vamos simplesmente modificar o código acima, que também imprimirá variáveis de elemento na lista de parâmetros em cada função
A cópia do código é a seguinte:
var app = angular.module ('Plunker', []);
função criada comovecion (nome) {
Return function () {
retornar {
restringir: 'e',
Compilar: function (telem, tattrs) {
console.log (nome + ': compile =>' + telem.html ());
retornar {
pré: function (escopo, ielem, iattrs) {
console.log (nome + ': prelink =>' + ielem.html ());
},
Post: function (escopo, ielem, iattrs) {
console.log (nome + ': link post =>' + ielem.html ());
}
}
}
}
}
}
App.Directive ('LevelOne', Createdirection ('LevelOne'));
App.Directive ('LevelTwo', CreatedIREction ('LevelTwo'));
App.Directive ('LevelThree', Createdirection ('LevelThree'));
Preste atenção à saída no console.log, exceto pela saída da tag HTML original, basicamente não há outra alteração.
Isso deve aprofundar nossa compreensão do contexto dessas funções.
Execute o código novamente para ver
Saída
Abaixo está uma captura de tela do resultado da saída no console
Se você ainda deseja executá -lo para ver o efeito, clique neste PLNKR e, em seguida, visualize a saída resulta no console.
observar
A saída do resultado do DOM pode expor algumas coisas interessantes: o conteúdo DOM é diferente nas duas funções compilam e pré-link
Então, o que aconteceu?
Compilar
Já sabemos que, quando Ng descobre que a construção do DOM está concluída, começamos a processar o DOM.
Então, quando Ng está atravessando o DOM, ele encontra o elemento de nível um e aprende com sua definição de que algumas funções necessárias precisam ser executadas
Como a função de compilação é definida no objeto de instrução da instrução de nível um, ela será chamada e passou um objeto de elemento como seu parâmetro
Se você olhar de perto, verá que, quando o navegador criar esse objeto de elemento, ele ainda é a tag HTML mais original.
1. Em Ng, o DOM original é geralmente usado para identificar o elemento de modelo, então usei o nome do telemon ao definir os parâmetros da função de compilação, e essa variável aponta para o elemento de modelo.
Uma vez que a função de compilação na instrução NívelOne for executada, o NG atravessará recursivamente seus nós DOM em profundidade e repetirá essas operações nos dois e no nível e três.
Pós-link
Antes de entrarmos na função de pré-link, vamos dar uma olhada na função pós-liga.
2. Se você usar apenas uma função de link ao definir a instrução, o NG tratará essa função como pós-ligação, por isso precisamos discutir essa função primeiro.
Depois que Ng atravessou todos os DOMs e executou todas as funções de compilação, a função pós-link associada é chamada no contrário.
O DOM agora começa a reverter e executa a função pós-link. Portanto, essa chamada reversa parecia um pouco estranha antes, mas na verdade faz sentido fazê -lo.
Ao executar a instrução pós-link contendo sub-vestições, a regra pós-reversão reversa pode garantir que o pós-link de suas sub-vestições tenha sido executado.
Portanto, ao executar a função pós-link da instrução de nível um, podemos garantir que o pós-link de nível dois e três de nível tenha sido realmente executado.
É por isso que as pessoas pensam que o pós-link é o local mais seguro ou padrão para escrever a lógica de negócios.
Mas por que o elemento aqui é diferente daquele da compilação?
Depois que Ng chamar a função de compilação da instrução, um objeto de instância do elemento do elemento de modelo será criado e um objeto de escopo será fornecido para ele. Esse escopo pode ser uma nova instância, ou já pode existir, pode ser um sub -escopo ou pode ser um escopo independente. Tudo isso depende do valor do atributo de escopo no objeto de definição de instrução.
Portanto, quando a vinculação ocorre, esse elemento de instância e objeto de escopo já estão disponíveis e são passados como parâmetros por ng para a lista de parâmetros da função pós-link.
1. Pessoalmente, sempre uso o nome do iElem para definir o parâmetro de uma função de link e aponta para a instância do elemento
Portanto, o objeto de parâmetro do elemento da função pós-link (pré-link) é uma instância do elemento em vez de um elemento de modelo.
Portanto, a saída no exemplo acima é diferente
Pré-link
Ao escrever uma função pós-link, você pode garantir que, ao executar a função pós-link, as funções pós-reticulação de todas as suas instruções para crianças tenham sido executadas.
Na maioria dos casos, pode fazer melhor, por isso geralmente o usamos para escrever o código de instrução.
No entanto, o NG nos fornece um mecanismo de gancho adicional, ou seja, a função pré-link, que pode garantir que algum outro código seja executado antes de executar a função pós-link de todas as sub-instrução.
Esta frase é digna de consideração repetida
A função pré-link pode garantir que ela seja executada na instância do elemento e antes que o pós-reticulação de suas sub-vestições seja executado.
Portanto, faz sentido reverter a função pós-link, ele executa a função pré-liga na ordem original.
Isso também significa que a função pré-link é executada antes da função pré-liga de todas as suas sub-instrução, então o motivo completo é:
A função pré-link de um elemento pode ser garantida para ser executada antes que o pós-link e o pré-liga de todas as suas sub-estruturas sejam executados. Veja a figura abaixo:
análise
Se olharmos para a saída original acima, podemos reconhecer claramente o que está acontecendo:
A cópia do código é a seguinte:
// aqui os elementos ainda são os elementos do modelo original
// fase de compilação
// LevelOne: a função de compilação é chamada no DOM original
// LevelTwo: A função de compilação é chamada no DOM original
// LevelThree: a função de compilação é chamada no DOM original
// A partir de aqui, os elementos foram instanciados e
// estão vinculados a um escopo
// (por exemplo, ng-repeat teria várias instâncias)
// fase pré-link
// LevelOne: a função pré -link é chamada na instância do elemento
// LevelTwo: a função pré -link é chamada na instância do elemento
// LevelThree: a função pré -link é chamada na instância do elemento
// fase pós-link (observe a ordem reversa)
// LevelThree: a função de link post é chamada na instância do elemento
// LevelTwo: a função de link post é chamada na instância do elemento
// LevelOne: a função de link post é chamada na instância do elemento
resumo
Olhando para a análise acima, podemos descrever as diferenças e o uso dessas funções:
Função de compilação
Use a função de compilação para alterar o DOM original (elemento do modelo), antes que Ng crie a instância original do DOM e o escopo.
Ele pode ser aplicado a situações em que várias instâncias de elementos precisam ser geradas e há apenas um elemento de modelo. NG-REPEAT é o melhor exemplo. Ele altera o DOM original no estágio de função de compilação para gerar vários nós DOM originais e, em seguida, cada um gera instâncias de elemento. Como a compilação será executada apenas uma vez, ele pode melhorar o desempenho quando você precisar gerar várias instâncias de elemento.
O elemento do modelo e os atributos relacionados são passados como parâmetros para a função de compilação, mas o escopo não pode ser usado no momento:
Aqui está a função:
A cópia do código é a seguinte:
/**
* Função de compilação
*
* @param telem - elemento de modelo
* @param tattrs - atributos do elemento de modelo
*/
função (telem, tattrs) {
// ...
};
Função pré-liga
Use a função Pré-Link para executar algum código comercial após a execução da função de compilação, mas antes que a função pós-reticulação de todas as suas sub-vestições esteja prestes a ser executada.
O objeto de escopo e a instância do elemento serão passados como parâmetros para a função pré-liga:
Aqui está a função:
A cópia do código é a seguinte:
/**
* Função pré-liga
*
* @param escopo - escopo associado a essa istento
* @param ielem - elemento da instância
* @param iattrs - atributos do elemento de instância
*/
função (escopo, ielem, iattrs) {
// ...
};
Função pós-link
Use a função pós-link para executar a lógica de negócios. Nesse estágio, já sabe que todas as suas sub-instrução foram compiladas e que as funções pré-liga e pós-link foram executadas.
Isso é o que é considerado o código de lógica de negócios mais seguro e padrão.
A instância do escopo e a instância do elemento são passados como parâmetros para a função pós-link:
Aqui está a função:
A cópia do código é a seguinte:
/**
* Função pós-link
*
* @param escopo - escopo associado a essa istento
* @param ielem - elemento da instância
* @param iattrs - atributos do elemento de instância
*/
função (escopo, ielem, iattrs) {
// ...
};
Resumir
Agora você deve ter um entendimento claro das diferenças entre compilar, pré-link, pós-link e essa função.
Se você ainda não o fez, e você é um desenvolvedor sério de NG, eu recomendo que você leia este artigo novamente até entender
Compreender esses conceitos é muito importante, o que pode ajudá -lo a entender como as instruções nativas do NG funcionam e também pode ajudá -lo a otimizar suas próprias instruções personalizadas.
Se você tiver alguma dúvida, adicione suas perguntas nos comentários abaixo
No futuro, continuaremos analisando duas outras perguntas sobre as instruções:
1. Como funciona os atributos de transclusão da diretiva?
2. Como a função do controlador da instrução está associada?
Finalmente, se você encontrar algo errado com este artigo, comente -me a tempo
Obrigado!