Este artigo explora as diferenças na implementação do AngularJS e do Javascript Control DOM, implementando dois requisitos de negócios simples e tenta entender as idéias de programação de estruturas como a MVW no popular desenvolvimento do front-end da Web.
Este requisito é muito comum. Por exemplo, um menu de dois níveis, quando o item de menu de primeiro nível é clicado, o item de submenu correspondente deve ser exibido ou oculto.
Implementação do jQuery:
A cópia do código é a seguinte:
<!-html->
<ul>
<li>
Item 1
<ul>
<li> Item criança 1 </li>
</ul>
</li>
</ul>
// javascript
$ ('li.parent_item'). clique (function () {
$ (this) .Children ('Ul.Child'). Toggle ();
})
Implementação do AngularJS:
A cópia do código é a seguinte:
<!-html->
<ul>
<li ng-click = "hide_child =! hide_child">
Item 1
<ul ng-hide = "hide_child">
<li> Item criança 1 </li>
</ul>
</li>
</ul>
A maneira tradicional de operar DOM não será descrita em detalhes. A implementação do AngularJS requer muito refinamento do código, apenas a versão HTML é suficiente. O código acima usa esses pontos de conhecimento dos angulares:
1.Diretos
2. Expressões
NG-Click e Ng-Hide são diretivas (instruções) que acompanham a estrutura. O primeiro é equivalente a fornecer um manipulador de eventos para a tag li. Quando o elemento html (li) é clicado, a expressão hide_child =! Hide_child será executada. Vamos primeiro olhar para a diretiva NG-HIDE, que controlará se o elemento HTML deve ser exibido (implementado por meio de CSS) com base no resultado da expressão da atribuição (valor bolean). Ou seja, se a variável hide_child for verdadeira, a UL será oculta, caso contrário, o resultado será o oposto.
Aqui Hide_child é na verdade uma variável no $ SCOPE. Alterações em seu valor também podem ser implementadas usando o controlador do controlador para envolver um método, mas a instrução atual é relativamente simples e é diretamente gravada na atribuição de instruções.
Através da análise de código simples acima, podemos ver mais duas características óbvias do AngularJS:
1. As operações DOM são bloqueadas por meio de instruções e expressões, e o código JavaScript extra é salvo simplesmente usando o código simples.
2. A aplicação de diretrizes e expressões é apenas diretamente aninhada no HTML, o que é um pouco contrário ao estilo de código de JavaScript discreto que o jQuery empurra.
Vamos primeiro analisar outro requisito e depois explicar a conclusão acima em detalhes.
Requisito 2: clicando na div, acionando a seleção de um botão de rádio no formulário
O elemento de formulário HTML tradicional não é muito amigável para operar nos dispositivos móveis atuais. Por exemplo, a caixa de rádio do botão de rádio requer posicionamento preciso na tela de toque para controlar esse componente, mas a posição manual designada é muito difícil. Uma prática comum é adicionar um controle de rótulo correspondente, mas a taxa de ocupação de tela do texto em si não é ideal e não tem um efeito claro de comunicação da informação. Portanto, uma tag div ou li com uma área maior geralmente é operada indiretamente.
Implementação do jQuery:
A cópia do código é a seguinte:
<!-html->
<ul>
<li>
<input type = "Radio"
id = "opção1" />
<Label para = "Opção1"> Opção 1 </belt>
</li>
</ul>
// javascript
$ ('li.selection'). Clique (function () {
$ (this) .Children ('input [type = "Radio"]'). Click ();
})
Implementação do AngularJS:
A cópia do código é a seguinte:
<!-html->
<ul>
<li ng-repeat = "Opção nas opções"
ng-click = "Model.Option = Option.Value"
ng-class = "{Active: model.option == option.value}">
<input type = "Radio"
ng-model = "Model.Option"
value = "{{option.value}}"
id = "opção1" />
<Label para = "Opção1"> Opção 1 </belt>
</li>
</ul>
Nesta solução, também não envolvemos código JavaScript adicional e usamos várias instruções adicionais. Para comparação e referência, apenas nos preocupamos com as expressões das duas instruções ng-click e ng-modelo.
Vamos primeiro olhar para a diretiva NG-Model do elemento de entrada. A tarefa aqui significa que associamos a entrada no modelo ao atributo Opção do objeto $ Scope.model. Para uma compreensão mais profunda da ligação de dados, você pode consultar a ligação de dados. Essa associação especificada faz com que o controle do modelo se ligue diretamente ao modelo de dados, e essa ligação é bidirecional. Isso significa que, uma vez que o usuário modifique o valor no controle (verifique a entrada do rádio), o objeto de modelo correspondente será reatribuído (Model.Option); Ao mesmo tempo, se o valor do objeto modelo mudar, o controle de entrada no modelo também refletirá as alterações de acordo. E isso não é alcançado na implementação do jQuery acima mencionada.
Portanto, através da ligação dos dados do AngularJS, clicar no elemento LI para concluir indiretamente o processo de entrada de entrada é o seguinte:
1. Clique na tag Li para atribuir um valor ao modelo.Option;
2. Modifique o objeto do modelo e localize o controle de entrada correspondente (o valor do valor é modelo.Option);
3. Ative a propriedade verificada do controle de entrada
Nos dois casos acima, temos um novo entendimento da operação do front-end da Web.
Antes de tudo, em termos de implementação técnica, introduzindo novos conceitos, como instruções, expressões, ligação de dados etc., podemos operar DOM de uma maneira completamente nova, em vez de apenas a implementação do código JavaScript que é interoperável com usuários e componentes HTML. Esse tipo de mudança de pensamento é enorme.
Desde o início deste século, a ascensão da programação dinâmica da Web, a tecnologia de programação do lado do servidor tem melhorado. Desde o início, o CGI/PHP/ASP produziu .NET vs. Java a partir do idioma e da plataforma. Os processos de eficiência de desenvolvimento e software promoveram a estrutura do MVC/ORM/AOP, etc., e o desempenho e o big data trouxeram NodeJS/nosql/hadoop, etc., enquanto os requisitos técnicos do front-end do navegador não parecem tão radicais. Por um lado, pelo lado do servidor e pelo banco de dados, a maioria das necessidades comerciais do modelo B/S pode ser atendida; Por outro lado, o próprio navegador tem diferenças entre diferentes plataformas, incompatibilidade com os padrões de linguagem de script e tecnologia de renderização, além de falta de poder de computação e considerações de segurança.
Nesse caso, na maioria das vezes, o navegador precisa apenas considerar a renderização de páginas e a interação simples do usuário. HTML/DOM PLUS JAVASRIPT/CSS realiza assim o trabalho principal do front-end. Portanto, não havia trabalhadores de front-end no passado, apenas os web designers eram necessários. Gradualmente, os requisitos para o front-end aumentaram e o JQuery se tornou a biblioteca de pacotes mais usada para JavaScript Operating DOM. Nesse estágio, a principal tarefa do jQuery/JavaScript ainda é apenas uma ferramenta para apresentar e interagir com o terminal do navegador do usuário.
Depois de entender a origem do jQuery, não é difícil descobrir que algumas das regras perseguidas no passado, como o Javascript discreto, estavam limitadas aos meios e métodos de implementação na época. Para separar a lógica do código DOM e JavaScript, preferimos o método com maior manutenção. Depois que a demanda do front-end por JavaScript aumentou, surgiram muitas estruturas de front-end de MVC/MVP, bem como a chamada MVW (View-visualização de modelo-o que quer) de AngularJS, e a abordagem única de Javascript e Dom mudaram. Originalmente, consideramos a operação direta da exibição da interface e da interação do usuário, mas agora temos ligação de dados do cliente, instruções ricas e injeção de dependência. O que nos aguarda será um novo modelo de programação e uma maneira de pensar.