Primeiro, por ter uma boa arquitetura

Primeira coisa clara, arquitetura A demanda por serviços. A finalidade da presença de arquitetura front-end, é o meu entendimento pessoal, os seguintes pontos:

1. Para melhorar a legibilidade do código

Uma boa arquitetura, a legibilidade do código deve ser forte.

Simplificando, se há um recém-chegado a se juntar à equipe, ele assumiu o projeto, deve ser fácil de usar, pode ser simples e fácil de entender a relação entre toda a parte frontal, de modo a encontrar a sua própria necessidade de focar o ponto. Mais do que a necessidade de gastar um monte de tempo para ficar a conhecer muitos dos detalhes do projeto, para começar a fazer alguma coisa para começar.

No arquivo, ele pode ser a partir do nome do arquivo, distinguir o que é da página, que é a lógica, que é o estilo, que é um componente pode ser reutilizável, que é um grupo de ícones, e que é um terminal móvel ou um fim exclusivo PC estilo / lógica.

Falando sobre o código, incluindo o estilo de nomenclatura uniforme, relevância embalados no mesmo código de arquivo e forte o suficiente.

2. melhorar a sustentabilidade do código

Uma boa arquitetura, ele deve ser fácil de manter, por exemplo, na nova demanda, a mudança de demanda, bug alteração, não irá causar mudanças inesperadas, como modificar o conteúdo de um componente de página, tem levado a outra página gerando montagem mudança (isto é muito pit). Assim, o acoplamento inferior, alta coesão, e entrada e saída são contemplados.

3. melhorar a escalabilidade de código

Uma boa arquitetura, uma certa escalabilidade, forte, não pode escrever morto.

Too TM mudança requisitos normais, nova demanda muito TM normal. Então, boa arquitetura, é necessário ter em conta a ocorrência desses casos, uma vez que estes estão prestes a acontecer. Portanto, você deve escrever o código para a morte evitar.

A componentes de página, como na necessidade de um componente de calendário, e este calendário referências componentes são outras (como a procura do github). Portanto, tente não fazer uma referência direta isso diretamente no calendário componentes A página componente dentro, mas vai escrever um calendário componente B, C pacote de componente de calendário que se refere o presente calendário componente B, e, em seguida, para operar através deste calendário B. componente

A razão é simples, se um gerente de produto dia, disse o calendário componente feio, podemos alterá-lo. Se você citar este diretamente incorporado na página do componente calendário C em um componente, você provavelmente vai mudar um monte de código (porque o uso de calendários diferentes componentes e interfaces expostas pode ser diferente). Se você ainda é um número de outros locais referenciados neste componente de calendário, é ainda pior! Cada local deve ser mudado.

E se o pacote C componente de calendário referenciada em escrever seu próprio calendário componente B, então você só precisa mudar o calendário componente B no código correspondente pode ser, mas porque o componente de calendário interface exposta B é constante, então naturalmente não fazer modificar o código da página.

Desenhos, componente de calendário, por exemplo, ter em conta os resultados de escalabilidade

• Não levam em conta a escalabilidade:

Considerando Escalabilidade:

4. facilitar a colaboração

Compreendendo sinergia sinérgico entre a parte frontal e traseira, a extremidade dianteira e a extremidade distal.

Especificamente, as extremidades dianteiras e traseiras de ajax normalmente interação sinérgica, então não deve haver pelo menos um arquivo dedicado encapsula todas as solicitações de ajax, todas as solicitações são encapsulados ajax aqui. No processo de desenvolvimento deve ser encapsulado de transmissão analógico aqui e receber nomeação conteúdo interactivo, para facilitar o desenvolvimento do FBI.

A colaboração front-end e front-end, principalmente no mesmo momento em que você alterar o código, o código não irá afectar o funcionamento normal da outra parte. requisitos, baixo grau de interferência conseguinte embalagem e dissociação é necessário.

5. Automatização

empacotamento automático, compressão, confuso, se necessário, juntamente com o teste de unidade automatizada.

resumo: Em resumo, o objetivo de uma boa arquitetura é permitir que a parte dianteira para escrever código escrito em confortável, tão confortável com a extremidade traseira do FBI, de modo que o gerente de produto para a reforma mudança demanda confortável.

Em segundo lugar, como faço para projetar a arquitetura

Eu não posso dizer que sua arquitetura é boa arquitetura (obviamente, não importa), apenas para compartilhar sua recentemente para fazer um projeto, sua arquitetura é como fazer.

Em primeiro lugar, identificar as necessidades:

1, uma pequena e média locais, e para o terminal terminal e PC móvel (single-ended cerca de 15 páginas, a contagem de cerca de 20 POP);

2, um orçamento limitado (por menos dinheiro), o tempo de desenvolvimento é limitada (um mês);

3, pode exigir um certo grau de mudança (como adicionar ou modificar certas páginas de conteúdo de página);

4, os clientes podem não se preocupam com otimização (mas eu me preocupo com ah);

5, requer mais compatível com o IE9.

Em segundo lugar, a decisão de começar:

1, IE9 compatível com o quadro corrente principal descrito acima pode ser utilizado, mas sem ter de usar jQuery. Então eu usei vue, versão 2.0;

2, o orçamento é limitado, um tempo limitado e, portanto, o lado do PC e os js html terminais móveis co, CSS independente;

3, página limitado, por isso não há necessidade de dividir o nível de arquitetura é relativamente pequeno, só precisam ser divididos de acordo com seu tipo;

4. O protótipo desenho vista, a complexidade da página é, não muitos seção de multiplexação limitado, é possível determinar o que precisa multiplex o pacote, o que requer um pacote complicado separado, que é relativamente simples, a fim de simplificar a dificuldade de desenvolvimento pode ser acoplado diretamente;

5, ela estava site de uma única página mais qualificados, de modo que o uso de um único baseado em páginas, carregamento assíncrono na forma de outras páginas.

Assim, o uso de coisas relacionadas, tais Webpack, vue-roteador, etc. Além de facilidade de desenvolvimento e produção, o desenvolvimento do modelo seguinte.

Em terceiro lugar, a divisão de funções:

Em primeiro lugar, há um html raiz, você precisa carregar a nossa lógica js acessando-lo, então código de lógica js está escrito em main.js.

Sob main.js, nosso código front-end pode ser dividido em três partes:

• Árvore de componentes

• Módulo de função

• recursos

FIG segue:

Após a divisão de funções bem, os mesmos reside funcionar da mesma pasta, nomeando estilo deve ser similar.

Especificamente, o material árvore relacionada com a componente, geralmente acabam .vue, colocado sob os componentes pasta, recursos, há fotos ou recursos internacionais para .png ou .js ou .json final, colocados na pasta de recursos sob; e plug-ins, e outros serviços funcional como pode haver várias referências, portanto, para facilitar a referência, na pasta src, ea pasta é componentes superiores pasta pasta de arquivos e recursos.

Em quarto lugar, o refinamento de módulos funcionais:

Funções, componentes e recursos de árvores, identificamos que as coisas, então a próxima, temos que limpar essas coisas, como dividir a forma de documentos.

FIG segue:

1. A construção do projeto relacionado

• Porque você quer usar vue.js, mas também usar ES6 sintaxe, de modo babel É uma obrigação;

• E porque você quer confundir pacote de automação, assim Webpack É uma obrigação;

• Finalmente, devido à conveniência com vários participantes, e, portanto, o npm package.json Instalação de Configuração, pessoas diferentes podem rapidamente e facilmente ser automatizada depende de npm instalar, também é necessário.

2. CDN relacionados

Mas porque queremos usar pias batismais de um externos (demanda exige a introdução de fontes incomuns), e, portanto, aceleração CDN É necessário, o arquivo de fonte em html para configurar a referência.

3. Configurar e plug-ins

• Precisamos de introdução directa de alguns plug-ins e arquivos de configuração;

• Para utilizar vue, precisamos de um componente raiz, é App.vue ;

• Use vue-router, precisamos configurar o arquivo de roteamento, router-config.js A configuração de encaminhamento, também é necessário;

• Em seguida, precisamos também de introduzir algumas das funcionalidades e serviços que um plug-in, para que haja início plugin- de uma série de plug-vue Estes são uma boa coesão elevada e baixa método de acoplamento tem de ser encapsulado;

4. npm dependente necessária

Claro que, para usar vue vue.js certamente ser introduzidas, há vue-router.js semelhantes e vários polyfill compatibilidade e plugins globais.

O bloco funcional puxado para fora-

• Além desses plug-ins diretamente referenciados, temos alguns projetos e acoplamento altamente funcional do serviço, eu acho que não pode ser como plug puxado para fora, mas ainda precisa de um pacote bom, fácil de usar e modificar;

• O pacote de solicitação ajax.js Ajax, todos os pedidos são colocados Ajax em que expor apenas as interfaces externas para facilitar a administração e utilização;

• Outro exemplo são os LanguageManager.js componente internacional capacidades em tempo real, ele precisa da introdução de recursos internacionais e recursos internacionais, gerenciamento de carga;

• Outro exemplo de evento-bus.js todo componentes implementados na comunicação;

• Outro exemplo é a gestão de user.js. de informações do usuário

resumo: E essas divisões são refletidas na tabela do. Este é o arquivo de módulo de função no diretório src, precisamos da grande maioria das funções pode ser incluído, só precisa seguir as necessidades de desenvolvimento reais, a função correspondente está escrito nesses documentos e referências pode ser. Quinto, a árvore de componentes:

Antes de falar sobre a divisão de módulos funcionais, seguido de árvore de componentes.

Porque é pequeno e médio página de tamanho, por isso não há necessidade de componente de nível de profundidade da árvore, mas ainda puxado para fora ou para afastar, tentar garantir que a lógica puxado para fora dos componentes de desacoplamento e um componente de página não muito. FIG segue:

0. componente raiz

Todos os componentes em última análise, até encontrar, vai encontrar uma raiz comum componente App.vue, raiz componente é responsável apenas pela gestão directa dos seus subconjuntos.

Cada componente apenas directamente responsável pela gestão dos seus próprios subconjuntos, não gestão de nível transversal, e não depende de seus sub-componentes (ou não podem ser carregados devido a erros ou subconjuntos, que originaram o erro componente pai), de modo que a dissociação e dentro poli.

1. pop de diálogo pop e dicas

Desde podem existir dicas de diálogo pop pop e solicita, portanto, ele é dividido em dois componentes, fácil de gerenciar.

2. Você não está logado página e página de login

Porque há de login e logout do estado da página, e a fim de considerar a velocidade de carregamento, quando não estiver logado, não carregar a página de login, e, portanto, precisa ser dividido, e processo de carregamento assíncrono.

página 3. Não autenticado

Não página registrados são divididos em três casos:

• página inicial: Não há dúvida para ser carregado directamente

• LOGIN pop: carga (assíncrono), quando o login

• pop Registro: carga (assíncrono) quando o registro de cliques

A razão pela qual divisão aberta, porque de acordo com a demanda, o usuário conectado para atualizar a página, você pode ir diretamente para a página de login, de modo nenhum login e registro, este tratamento pode reduzir o fluxo de consumo, aumento de carga a velocidade de carregamento da página (especialmente pop registo obrigatório ainda mais o conteúdo carregado).

4. página logged

Página registrou mais páginas, carregue a página inicial padrão, e depois carregados de forma assíncrona outras páginas (de acesso).

O pop de diálogo

Desde menos lógica, o volume de código, portanto, a fim de facilitar a gestão, que é incorporado em um arquivo unificado vue mesma abertura lógica comum, que abre de acordo com uma chave de decisão transmitido. De modo que quando o novo pop, elimina a necessidade de escrever pop lógica abrir, fechar.

Se houver pop mais complexa, pode ser introduzido na forma de arquivo vue submontagem atual, assim também facilitar a gestão;

6. Gestão Internacional

E página alta de acoplamento, é responsável pelo carregamento dos recursos internacionais correspondentes e gerenciamento de switch.

7. componentes de página

Pode haver subpáginas e componentes reutilizáveis, de referência pode estar na forma normal.

8. Arquivo de Estilo

Ele pode ser escrito como um arquivo CSS separado, mas por causa do meu estilo pública arquivo é relativamente pequeno, então eu colocá-lo em um arquivo .vue e referenciado em App.vue anos.

9. componentes página chamada

• .Vue terminando geralmente, para além de LanguageManager.js internacionais, devido ao alto grau de acoplamento, terminando assim .js vue e uma instância separada, indica que ele é mais como um bloco funcional, em vez de uma página de vue montagem;

• A página básica, como login e páginas registrados, componentes comuns (e este é o cabeçalho e rodapé) para início base-;

• Unificado com pop caixa- está começando;

• componentes reutilizáveis começar a estendendo;

• componentes externos de importação introduzidos para começar;

• componentes de página comuns começando com page- (essas páginas são muitas vezes uma página separada, e ancorado ou não logado página de login);

• Registro pop porque a lógica é mais complexo e mais semelhantes, de modo a início em registro.

Dividido por nome de arquivo, para distinguir entre os diferentes componentes de uma página pode-se dizer que num piscar de olhos, mas também fácil de gerir.

Este artigo vem de CSDN blog: