Antes de implementar a guia no estilo MVVM do AngularJS, primeiro mudamos nossa implementação de jQuery comumente usada.
1. JQuery alcança efeito de guia simples e petrolífero
var NAV = $ (". Tabs"); // Tab Switch var box = $ (". Caixa"); // Container Nav.on ("Clique", function () {// Clique em Evento var this_index = $ (this) .Index (); $ (this) .Addclass ("Active). box.eq (this_index) .show (). irmãos (). hide ();});Somente a parte central do JS é fornecida aqui, e HTML e CSS não são detalhados.
O código acima implementa e aproximadamente o efeito da guia e usa o evento de clique para obter elem.index() , string o índice e o contêiner juntos para controlar a tela e ocultá -lo.
2. AngularJS implementa um efeito de guia simples
Parte html
<seção ng-app = "myApp"> <div ng --Controller = "TabController como tab"> <VN> <ul> <li ng-class = "{'freenction': tab.isset (1)}"> <a href = "#" ng-click = "tab.etcurrent (1)"> <span> <pan> </spano </span = "#" ng-click = " ng-class = "{'Current': tab.isset (2)}"> <a href = "#" ng-click = "tab.setCurrent (2)"> <pan> work </span> </a> </li> <li ng-class = "{'Current': TAB.ISSET (3)}"> <ahf. ng-click = "tab.setCurrent (3)"> <pan> blog </span> </a> </li> <li ng-class = "{'current': tab.isset (4)}"> <a href = "#" ng-click = "tab.setCurrent (4)"> <pan> </span> <a-Allay> ng-class = "{'Current': Tab.isset (5)}"> <a href = "#" ng-click = "tab.setCurrent (5)"> <pan> Contact </span> </a> </li> </nav> <div> <seção "seção 1" ng-show = "tab.isset (1) ng-show = "tab.isset (2)"> <p> 2 </p> </section> <seção id = "seção-3" ng-show = "tab.isset (3)"> <p> 3 </p> </seção> <seção id = "seção-4" ng-show = "TAB.ISSET (4)" <p> 4 </p> 4 ng-show = "Tab.isset (5)"> <p> 5 </p> </section> </div> </section> Parte do CSS (para nos facilitar para usar Less sintaxe, os sapatos infantis podem personalizar o CSS para obter efeitos personalizados)
* {margem: 0; preenchimento: 0;} corpo {background: #e7Ecea; peso-fonte: 600; Font-Family: 'Raleway', Arial, Sans-Serif; Text-align: Center;} A {color: #2CC185; Decoração de texto: Nenhum; Esboço: Nenhum; &: hover {color: #74777b; }}. guias {Posição: relativa; largura: 100%; margem: 30px automático automático; Nav {ul {Position: relativo; exibição: flex; MAX-LUDA: 1200PX; margem: 0 automático; estilo de lista: nenhum; FLOW FLEX: ROW WRAP; Justify-Content: Center; li {flex: 1; & .Current a {color: #74777b; }}}}} a {display: block; Posição: relativa; estouro: oculto; altura da linha: 2,5; extensão {alinhamento vertical: meio; tamanho de fonte: 1.5em; }}}. Content {Position: relativo; Seção { /* Display: Nenhum; */ margem: 0 automático; MAX-LUDA: 1200PX; & .Content-Current { /* Display: Block; */} p {color: rgba (40,44,42, 0,4); margem: 0; preenchimento: 1.75em 0; peso-fonte: 900; Size da fonte: 5em; altura de linha: 1; }}}. estilo tabs {Nav { /* Background: rGBA (255.255,255,0.4); */ ul li {a {Overflow: visible; fundo de borda: 1px RGBA sólido (0,0,0,0,2); -Webkit-transição: cores 0.2s; transição: cor 0,2s; }} ul li li.Current a {&: depois, &: antes {content: ''; Posição: Absoluto; topo: 100%; Esquerda: 50%; largura: 0; altura: 0; fronteira: sólida transparente; } &: após {margem -esquerda: -10px; largura de fronteira: 10px; cor-top-top: #e7ecea; } &: antes de {margem -esquerda: -11px; largura de fronteira: 11px; cor-top de borda: rGBA (0,0,0,0,2); }}}}JS parte
angular.module ('myApp', []) .Controller ('TabController', function () {this.current = 1; this.setCurrent = function (tab) {this.current = tab;}; this.isset = function (tab) {return this.current == tab;};};O efeito final é mostrado na figura abaixo:
Através do código acima, podemos descobrir que o núcleo da implementação é ng-class e ng-click e ng-show construídas em AngularJs.
Em termos simples: o controlador define dados atuais. O valor padrão dos dados é 1. ng-click personaliza a função do evento de clique e altera os dados current . ng-class obtém current de ligação ao valor e adiciona um estilo current ao índice atualmente selecionado. O contêiner também obtém current no controller e o exibe escondido através ng-show .
3. AngularJs atinge um efeito de guia móvel ligeiramente complexo
parte html
<script src = "http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"> </sCript> <script src = "http://cdn.bootcs.com/angular.js/1.3.8/angular-tuch.min.min.minj.minj.minj.minj.minj.minj.minj.minj.minj.minj.minj.minj.minj.minj.minj.minj.minj.minj.minj.minj.minj.minj.minj.minj.minj.minj.minj. angularjs <div ng-app = 'myApp' ng-controller = "myController"> <div> <div ng-repeat = "item em [1,2,3,4]" ng-click = "ChangeIndex ($ index)"> tab {{}}} </div> </divysty <div) "> tabe {{{}}} </div> </> <div)"> 25*activeIndex}}%"></div> </div> <div ng-swipe-right="swipeRight()" ng-swipe-left="swipeLeft()"> <div style="left:{{ -100*activeIndex}}%"> <div ng-repeat="item in [1,2,3,4]" > <br /><br /><br /><br /> <r/> <h1> tab {{item}} </h1> </div> </div> </div> </div> </div> </div> </div>Parte css
*{preenchimento: 0; margem: 0; Fonte-família: 'Arial';}. Tipo-Tabs {Width: 100%; Altura: 40px;}. Tipo-tabs div {float: esquerda; largura: 25%; altura da linha: 40px; Alinhamento de texto: centro; Cursor: Ponteiro; Seleção de usuário: Nenhum; -Webkit-user-select: Nenhum;}. Guid-Bar {Position: relativo; Margin-top: -3px;}. Conteúdo do GUID-BAR {Width: 25%; Altura: 3px; cor de fundo: #345; Posição: Absoluto; Esquerda: 50%; Transição: todas as 400ms de facilidade;}. Tab-Content {largura: 100%; Altura: 500px; Background-Color: #CCC; Overflow: Hidden;}. TAB-Content-Inner {Width: 400%; Posição: relativa; Transição: todos os 400ms;}. TAB-Content-Item {Width: 25%; flutuar: esquerda; Alinhamento de texto: centro;}JS parte
var myApp = angular.module ('myApp', ['ngTouch']); myApp.Controller ('MyController', função ($ scope) {$ scope.activeInIndex = 0; $ scope.ChangeIndEx = function (index) {$ scope.InTIndex = index;}; scope.swipleft = função (index) {$ scope. Scope.Activing.ConSex = if ($ scope.activeIndex <0) $ scope.activeIndex = 3;Os efeitos são os seguintes:
Ok, hoje vamos dar esses dois exemplos. Você pode entender rapidamente os sapatos das crianças que aprendeu sobre o AngularJs olhando diretamente o código. Os sapatos infantis que você nunca entendeu também podem aprender sobre a magia negra da MVVM e sua estrutura de organização de código através desses dois exemplos.
4. O que há de melhor no modo MVVM de AngularJS do que a operação DOM do jQuery?
1. De uma perspectiva macro, um é operar dados e dados de processo, e o outro é operar a interação DOM e UI.
O processo de um projeto geral da Web pode ser resumido em três processos: 1) Você deseja obter os dados na interface 2) trocar dados no plano de fundo 3) Após obter os dados, renderize a interface. Nesse processo, como você implementa a troca de dados com o back -end? JQuery's Ajax. Se a API de troca de dados assumir mais de 20, quantos $ .get ou $ .ajax você precisa escrever para incluir tudo? Além disso, todos os links de API não estão no mesmo local, o que é bastante problemático de gerenciar. E AngularJs apenas configuram route .
Depois de obter os dados, como você gerencia esses dados e como renderiza os dados para a interface?
Como gerenciar vários eventos? O próprio jQuery é caracterizado pelo acionamento do evento. Muitas vezes, é quando você escreve um processo para desencadear eventos-> Processando dados. Obviamente, uma vez que houver mais funções, o código será entrelaçado como macarrão. Existem muitos front-ends tradicionais ao meu redor por dois ou três anos. Não estudei pesquisas detalhadas sobre delegação de eventos, operações DOM, processos de renderização do navegador, embalagens de componentes plug-in etc. para que você possa imaginar o quão ruim é a qualidade do código. De fato, o JQuery é uma biblioteca de classes, não uma estrutura de desenvolvimento. O JQ é um encapsulamento adicional das APIs nativas de JS, permitindo que você execute operações de DOM, operações de animação e Ajax com mais alegria. É precisamente porque é muito flexível que seja mais fácil escrever um código difícil de manutenção.
2. Desempenho: Operação DOM é lenta e o próprio objeto DOM também é um objeto JS. Tão estritamente falando, não é que a operação desse objeto seja lenta, mas que, depois de operar esse objeto, alguns comportamentos do navegador serão acionados, como layout e pintura.
Resumir
À medida que os produtos da web se tornam cada vez mais complexos, a arquitetura hierárquica é essencial. Portanto, a ligação bidirecional é usada como um antídoto, combinado com a estrutura MVC que é popular há muito tempo, o artefato MVVM foi derivado. O blogueiro acredita firmemente que o MVVM será a solução definitiva para o front-end. Da operação DOM à operação de dados, é preciso um processo para se adaptar, mas enquanto o resultado for bom, esses esforços valem a pena. Nesse processo, também é uma melhoria em suas habilidades profissionais. Vamos, meus amigos! ! !