Três principais estruturas de front-end da web: 1. Angular, uma estrutura de front-end usada para criar uma interface de aplicativo única, com funções de módulo poderosas e comandos personalizados 2. React, um JavaScript usado para construir interfaces de usuário. Estrutura de desenvolvimento, usada principalmente para; construir UI; 3. vue, é uma estrutura JavaScript progressiva para construir interfaces de usuário. A biblioteca principal do Vue concentra-se apenas na camada de visualização e é muito fácil de aprender e integrar com outras bibliotecas ou projetos existentes.
O ambiente operacional deste tutorial: sistema Windows 7, computador Dell G3.
Nos últimos dez anos, a indústria de TI desenvolveu-se rapidamente e surgiram muitas novas profissões, como designers de UI, engenheiros de desenvolvimento, engenheiros de teste de software, etc. eles. Então, quais são as três estruturas principais para front-end da web?
As três principais estruturas de front-end da web são Angular, React e Vue.
1. Angular
AngularJS foi criado em 2009 por Misko Hevery e outros, e posteriormente adquirido pelo Google. É uma excelente estrutura JS de front-end usada em muitos produtos. Não é apenas uma estrutura de desenvolvimento front-end com conceitos avançados, mas também uma solução ponta a ponta. Ele segue o padrão MVC no projeto arquitetônico e defende o acoplamento flexível de dados e componentes de processamento lógico. AngularJS realiza a extensão natural do HTML por meio da tecnologia de instrução e realiza a sincronização automática bidirecional do modelo de dados e visualização de exibição por meio da tecnologia de compilação, aliviando operações DOM complexas. Além disso, também fornece um bom suporte para tecnologia de teste automatizado front-end.
Angular é uma estrutura front-end para a criação de interfaces de aplicativos únicos. Possui muitos recursos básicos, como ligação de dados, serviços, diretivas, injeção de dependência, etc. Possui funções de módulo poderosas e as vantagens de comandos personalizados
característica:
1. Boa estrutura de aplicação
2. Vinculação de dados bidirecional
3.Instruções
4.Modelo HTML
5. Pode ser incorporado, injetado e testado
vantagem:
1. O modelo é poderoso e rico em funções e vem com um conjunto extremamente rico de instruções angulares.
2. É uma estrutura front-end relativamente completa, incluindo serviços, modelos, ligação de dados bidirecional, modularização, roteamento, filtros, injeção de dependência e outras funções;
3. Personalize as instruções Depois de personalizar as instruções, você pode usá-las várias vezes no projeto.
4. A modularização introduz corajosamente algumas coisas do Java (injeção de dependência), o que facilita a escrita de código reutilizável, o que é muito útil para equipes de desenvolvimento ágeis.
5.angularjs é desenvolvido pelo gigante da Internet Google, o que também significa que possui uma base sólida e suporte da comunidade.
deficiência:
1. Começar com o angular é fácil, mas depois de se aprofundar nele, existem muitos conceitos que são difíceis de entender durante o aprendizado.
2. Existem poucos exemplos na documentação. A documentação oficial basicamente fala apenas sobre a API sem nenhum exemplo. Em muitos casos, você pode obter instruções específicas do Google ou perguntar diretamente a Misko, o autor do Angular.
3. A compatibilidade com o IE6/7 não é particularmente boa, mas você pode usar jQuery para escrever seu próprio código para resolver alguns problemas.
4. Existem poucos tutoriais de práticas recomendadas sobre a aplicação de instruções. O Angular é realmente muito flexível. Se você não seguir os princípios de uso de alguns autores, é fácil escrever códigos diferentes. que são semelhantes ao jQuery.
5. A injeção de dependência DI requer declaração explícita se a compactação de código for necessária.
2.Reagir
O React, produzido pelo Facebook, foi lançado oficialmente em 2013, 4 anos depois do angular. Porém, graças ao seu inovador VirtualDOM, superou o angularJS em desempenho. Possui muitos recursos, incluindo VirtualDOM, JSX, algoritmo Diff, etc., suporta sintaxe ES6 e usa programação funcional. O limite é um pouco mais alto, mas também é mais flexível, permitindo mais possibilidades de desenvolvimento.
característica
1. Design declarativo: React adota um paradigma declarativo, o que facilita a descrição de aplicações.
2. Eficiente: React minimiza a interação com o DOM simulando o DOM.
3. Flexível: React funciona bem com bibliotecas ou frameworks conhecidos.
vantagem:
1. Velocidade rápida: durante o processo de renderização da UI, o React implementa atualizações parciais no DOM real por meio de microoperações no DOM virtual.
2. Compatibilidade entre navegadores: O Virtual DOM nos ajuda a resolver problemas entre navegadores. Ele nos fornece uma API padronizada, o que não é problema mesmo no IE8.
3. Modularização: Escreva componentes de UI modulares independentes para o seu programa, para que, quando houver um problema com um ou alguns componentes, você possa isolá-lo facilmente.
4. Fluxo de dados unidirecional: Flux é uma arquitetura para criar uma camada de dados unidirecional em aplicativos JavaScript 5. JavaScript puro e isomórfico: como os rastreadores de mecanismos de pesquisa dependem de respostas do lado do servidor em vez da execução de JavaScript, pré-renderizar seu aplicativo ajuda com SEO. 6. Boa compatibilidade: por exemplo, RequireJS é usado para carregar e empacotar, enquanto Browserify e Webpack são adequados para construir aplicativos grandes. Eles tornam essas tarefas difíceis menos assustadoras. Desvantagens: O React em si é apenas um V, não um framework completo; portanto, se você deseja um framework completo para um projeto grande, basicamente precisa adicionar ReactRouter e Flux para escrever aplicativos grandes.
3.Vue
Como o último framework lançado (2014), o Vue baseia-se nos recursos de seus antecessores angular e react (como VirtualDOM, ligação de dados bidirecional, algoritmo diff, propriedades responsivas, desenvolvimento de componentes, etc.) e faz otimizações relevantes para torná-lo utilizável. Mais conveniente, mais fácil de começar e menos adequado para iniciantes.
característica:
1. Estrutura leve
2. Vinculação de dados bidirecional
3.Instruções
4. Plug-ins
vantagem:
1. Simples: A documentação oficial é muito clara e mais fácil de aprender do que Angular.
2. Rápido: atualize o DOM no processamento em lote assíncrono.
3. Composição: Componha seu aplicativo com componentes desacoplados e reutilizáveis.
4. Compacto: ~18kbmin+gzip e sem dependências.
5. Poderoso: expressões não precisam declarar propriedades dedutíveis dependentes (computedproperties).
6. Compatível com módulo: pode ser instalado através de NPM, Bower ou Duo. Não força todo o seu código a seguir os vários regulamentos do Angular e os cenários de uso são mais flexíveis.
deficiência:
1. Recém-nascido: Vue.js é um projeto novo, não tão maduro quanto o angular.
2. A influência não é muito grande: pesquisei no Google e descobri que a diversidade ou riqueza do Vue.js é menor do que algumas outras bibliotecas famosas.
3. Não suporta IE8.
Conhecimento ampliado: Qual é a diferença entre Vue.js e outros frameworks?
1. Diferenças do AngularJS
Pontos semelhantes:
Ambas as instruções de suporte: instruções integradas e instruções personalizadas.
Ambos suportam filtros: filtros integrados e filtros personalizados.
Ambos suportam ligação de dados bidirecional.
Nenhum dos dois oferece suporte a navegadores de baixo custo.
Diferenças:
1. O custo de aprendizado do AngularJS é alto, como a adição do recurso de injeção de dependência, enquanto a API fornecida pelo próprio Vue.js é relativamente simples e intuitiva.
2. Em termos de desempenho, o AngularJS depende da verificação suja de dados, portanto, quanto mais observadores, mais lento ele se torna.
Vue.js usa observação baseada em rastreamento de dependência e atualizações de fila assíncronas. Todos os dados são acionados de forma independente.
Para aplicações grandes, esta diferença de otimização é bastante óbvia.
2. Diferenças do React
Pontos semelhantes:
React usa sintaxe JSX especial e Vue.js também recomenda escrever o formato de arquivo especial .vue no desenvolvimento de componentes. Existem algumas convenções sobre o conteúdo do arquivo e ambas precisam ser compiladas para uso.
A ideia central é a mesma: tudo é um componente e as instâncias dos componentes podem ser aninhadas.
Todos fornecem funções de gancho razoáveis, permitindo que os desenvolvedores personalizem suas necessidades.
Coluna AJAX, Route e outras funções não estão integradas no pacote principal, mas são carregadas como plug-ins.
Os recursos dos mixins são suportados no desenvolvimento de componentes.
Diferenças:
React depende de Virtual DOM, enquanto Vue.js usa modelos DOM. O Virtual DOM usado pelo React realizará verificações sujas nos resultados renderizados.
Vue.js fornece instruções, filtros, etc. em modelos, que podem operar o DOM de maneira muito conveniente e rápida.
O texto acima é o conteúdo detalhado das três principais estruturas de front-end da web. Para obter mais informações, preste atenção a outros artigos relacionados neste site!