Para mim, que é um novato puro no front -end, o JavaScript ainda está um pouco claro sobre isso. Se você deseja começar diretamente com o Angular JS, há realmente muita resistência. Mas acredito que, desde que você trabalhe duro, mesmo o design anti-humano não será um grande problema.
Ok, não diga muita bobagem. Para descobrir o que é JS angular, comecei com o escopo. Então, o que é escopo? Emprestando uma passagem do documento oficial:
A cópia do código é a seguinte:
"O escopo é um objeto que se refere ao modelo de aplicativo. É um contexto de execução para expressões. Os escopos estão organizados na estrutura hierárquica que imita a estrutura DOM da aplicação. Os escopos podem assistir expressões e propagar eventos".
Depois de ler, comparei com outras linguagens de programação e achei que o escopo é como o escopo do modelo de dados, fornecendo contexto para a execução de expressões. Vamos entender dessa maneira por enquanto.
Características do escopo
Em seguida, vamos ver quais recursos o escopo tem?
O escopo fornece o método $ relógio para monitorar as alterações no modelo.
O escopo fornece $ Aplicar método para propagar alterações no modelo.
O escopo pode ser herdado e isola diferentes componentes de aplicativos e as permissões de acesso a atributos.
O escopo fornece contexto para o cálculo das expressões.
Para esses quatro recursos, porque aprendi o ActionScript, C ++ e Java antes, não é difícil entender o primeiro, terceiro e quarto pontos, mas o segundo ponto parece um pouco confuso. Com base no princípio de quebrar a caçarola e pedir o fim, ainda encontrei algumas coisas no Google. Para veteranos experientes, por favor, tome os tijolos!
Origem do JavaScript
Antes de tudo, à primeira vista, o SCOPE.APPLE () parece ser um método comum para fazer a atualização de ligações. Mas pense um pouco mais, por que precisamos disso? Quando você costuma usar? Para entender essas duas questões, temos que começar com JavaScript. No código JavaScript, eles são executados em uma determinada ordem. Quando é a virada de um trecho de código para executar, o navegador apenas executa o trecho atual e não fará mais nada. Às vezes, algumas páginas da web que não são bem feitas ficam presas ao clicar em algo. JavaScript funciona Uma das razões pelas quais esse fenômeno é causado! Aqui temos um pedaço de código para experimentá -lo:
A cópia do código é a seguinte:
var Button = Document.getElementById ('ClickMe');
função buttonClicked () {
alerta ('o botão foi clicado');
}
Button.AddeventListener ('Click', ButtonClicked);
função timerComplete () {
alerta ('timer completo');
}
setTimeout (TimerComplete, 5000);
Ao carregar o código JavaScript, primeiro encontre um botão com um ID chamado "ClickMe", depois adicione um ouvinte e depois defina o tempo limite. Aguarde 5 segundos e uma caixa de diálogo aparecerá. Se você atualizar a página e clicar no botão ClickMe imediatamente, uma caixa de diálogo será exibida. Se você não clicar em OK, a função TimerComplete nunca terá a chance de executar.
Como atualizar as ligações
Ok, depois de falar sobre algo que parece irrelevante, vamos voltar ao assunto. Como os JS angulares sabem quando as mudanças de dados e as páginas precisam ser atualizadas? O código precisa saber quando os dados foram modificados, mas agora não há como informar diretamente os dados sobre um objeto que mudou (embora o ECMAScript 5 esteja tentando resolver esse problema, ele ainda está no estágio experimental). Atualmente, existem duas soluções para as estratégias mais populares. Um é usar objetos especiais para que todos os dados possam ser definidos apenas chamando o método do objeto, em vez de especificá -los diretamente através da propriedade. Dessa forma, todas as modificações podem ser gravadas e você saberá quando a página precisará ser atualizada. A desvantagem de fazer isso é que devemos herdar um objeto especial. Para atribuição, ela só pode ser feita pelo object.Set ('key', 'value') em vez de object.key = value. Nas estruturas, é isso que Emberjs e Knockoutjs fazem (embora eu não tocasse antes). Outro método é o método adotado pelo Angular JS, que verifica se há alguma alteração de dados após a execução de cada sequência de execução do código JavaScript. Isso não parece ser eficiente e mesmo afeta seriamente o desempenho. No entanto, o Angular JS usa alguns meios inteligentes para resolver esse problema (ainda não foi estudado e ainda não está claro). A vantagem de fazer isso é que podemos usar qualquer objeto à vontade, não há limite para o método de atribuição e também podemos estar cientes das alterações de dados.
Para esta solução adotada pelo Angular JS, nos preocupamos quando os dados mudam, e é aí que o escopo.Apply () é útil. Verificando se os dados vinculados foram alterados, eles são realmente feitos pelo SCOPE.DIGEST (), mas quase nunca chamamos esse método diretamente, mas chamamos o método Scope.Apply () porque, no método Scope.Apply (), ele chamará o método SCOPE.Digest (). O método scope.apply () pega uma função ou expressão, depois o executa e finalmente chama o método SCOPE.DIGEST () para atualizar ligações ou observadores.
Quando usar $ Aplicar ()
A mesma pergunta é: então, quando precisamos chamar o método Apply ()? Existem muito poucos casos. De fato, quase todo o nosso código está envolvido no SCOPE.APPLE (), como NG-Click, Inicialização do Controlador, Funções de retorno de chamada HTTP etc. Nesses casos, não precisamos nos chamar e, de fato, não podemos nos chamar, caso contrário, chamando o método Apply () no Método Aplicação () lançará um erro. Se precisarmos executar o código em uma nova sequência de execução, precisamos realmente usá -lo, e se e somente se a nova sequência de execução não for criada pelo método Angular JS Library, precisamos envolver o código em Scope.Apply (). Aqui está um exemplo para explicar:
A cópia do código é a seguinte:
<div ng: app ng-controller = "ctrl"> {{message}} </div>
A cópia do código é a seguinte:
functionCtrl ($ SCOPE) {
$ scope.Message = "Waiting 2000ms for Update";
setTimeout (function () {
$ scope.Message = "Timeout chamado!";
// AngularJS desconheça a atualização para $ SCOPE
}, 2000);
}
Depois que o código acima for executado, a página será exibida: esperando 2000ms para atualização. Obviamente, a atualização dos dados não foi detectada por JS angular.
Em seguida, modificamos ligeiramente o código JavaScript e o embrulhamos com scope.apply ().
A cópia do código é a seguinte:
functionCtrl ($ SCOPE) {
$ scope.Message = "Waiting 2000ms for Update";
setTimeout (function () {
$ SCOPE. $ Aplicar (function () {
$ scope.Message = "Timeout chamado!";
});
}, 2000);
}
A diferença desta vez é que a página será exibida primeiro: esperando 2000ms para atualização. Depois de esperar 2 segundos, o conteúdo será alterado para: Timeout chamado! . Obviamente, a atualização dos dados foi detectada por JS angular.
Nota: Não devemos fazer isso, mas use o método de tempo limite fornecido pelo Angular JS, para que ele seja automaticamente embrulhado com o método Apply.
A ciência é uma faca de dois gumes
Por fim, vamos dar uma olhada no escopo.apply () e scope.apply (function) métodos novamente! Embora o Angular JS tenha feito muito por nós, também perdemos algumas oportunidades. Você pode ver no seguinte pseudocódigo:
A cópia do código é a seguinte:
função $ aplicar (expr) {
tentar {
retornar $ avaliar (expr);
} catch (e) {
$ ExceptionHandler (e);
} finalmente {
$ root. $ Digest ();
}
}
Ele captará todas as exceções e não as jogará novamente, e acabará chamando o método $ diger ().
Vamos resumir
O método $ apply () pode executar expressões angulares JS fora da estrutura angular, como: Eventos DOM, Settimeout, XHR ou outras bibliotecas de terceiros. Este é apenas o começo, a água ainda é profunda, bem -vinda ao mergulho profundo juntos!