Acredito que todo engenheiro front-end tem sua estrutura JavaScript favorita, seja emoção ou crença. A estrutura JavaScript traz não apenas um desenvolvimento conveniente, mas também uma beleza lógica pura, seja a simplicidade graciosa do jquery, ou a mágica de Yui. sandbox, todos eles nos dão uma imaginação infinita. No entanto, a estrutura js está fadada a ser incapaz de alcançar a perfeição total. Por exemplo, as concessões de jquery em OO e os sacrifícios de yui no desempenho transmitem um tipo de beleza imperfeita e um realismo ideal para as pessoas. Hoje, vamos dar uma olhada nesses sacrifícios e concessões feitas pelo yui3 no design da estrutura, para que possamos ter uma compreensão mais profunda do quadro completo do yui3 e maximizar suas vantagens.
1. Uma etapa ou granulação de sementes
A chamada propagação em uma etapa significa que você só precisa introduzir uma tag de script de um arquivo inicial na página, como protótipo e jquery, e apenas introduzir um protótipo.js ou jquery.js Eles encapsularão as operações DOM e. eventos, etc. em um arquivo e tente mantê-lo o menor possível. Os benefícios de fazer isso são óbvios. No entanto, Yui dividiu essas funções em níveis e designs granulares, abstraindo conceitualmente "núcleo", "ferramentas" e "componentes". Cada pequena função é colocada em um arquivo, quando necessário, você mesmo deve citá-la. das demonstrações fornecidas na documentação do yui adotam este método. Obviamente, esse design não é tão amigável para iniciantes quanto o jquery e não é estúpido o suficiente para ser usado. Para implementar uma função pequena, é necessário introduzir três ou quatro js. arquivo. Há duas razões para o yui fazer isso. Primeiro, yui é muito grande e não é confiável colocar todas as funções em um arquivo. Segundo, ele abre caminho para seu design de estrutura carregado dinamicamente.
2. Introdução manual ou carregamento dinâmico
O método tradicional de escrever js na página é escrever diretamente o arquivo js na página como o caminho da tag de script. Você também pode introduzir a página dessa forma usando yui, mas yui recomenda usar o carregador para carregamento dinâmico. A origem dos scripts carregados dinamicamente é muito complicada. Atualmente, há três razões principais. Primeiro, as tags js manuscritas na página ocuparão uma solicitação http de qualquer maneira. solicitação http real após o arquivo carregado dinamicamente ser armazenado em cache. Em segundo lugar, o carregamento dinâmico pode realizar o carregamento sob demanda e pode ser baseado em arquivos js. Desduplicação e classificação de interdependências, carregamento de arquivos js com tags manuscritas exigem que os desenvolvedores prestem atenção extra à classificação, duplicação, etc. dos arquivos. Em terceiro lugar, o carregamento dinâmico conduz à semântica do código da página, o que faz com que os desenvolvedores se preocupem apenas com "O que. você precisa", em vez de "como conseguir". Quando os projetos se tornarem mais inchados e os custos de manutenção aumentarem cada vez mais, essas técnicas de pequeno e médio porte serão de grande benefício.
3. Entrada única ou sandbox para inicialização lógica
Quando iniciamos uma lógica js em uma página, geralmente a colocamos em um método como onDomReady. E se houver várias lógicas na página? Por exemplo, a implementa a lógica A, e o código da página é assim
<script src="logicA.js" />
<roteiro>
$.onDomReady(função(){
___LógicaA.start();
});
</script>
Este código geralmente é escrito no final da página. O código html que acompanha esta lógica está enterrado em algum lugar da página. Neste momento, b precisa adicionar a lógica B à página. final e, em seguida, altere-o para ficar assim:
<script src="logicA.js" />
<script src="logicB.js" />
<roteiro>
$.onDomReady(função(){
___LógicaA.start();
___LogicB.start();
});
</script>
Da mesma forma, o código html que acompanha a lógica B também está enterrado em algum lugar da página. Parece que a lógica js e o código html que a acompanha estão tão separados que, quando se trata de excluir a função, o html é frequentemente excluído, mas o js é esquecido. ., ou excluir js e esquecer de excluir html também será um problema ao reutilizar o código. Da mesma forma, durante a depuração, os engenheiros também precisam abrir duas janelas para focar em js e html respectivamente, mesmo que os dois trechos de código estejam no mesmo arquivo. Nesse caso, é melhor escrever o código assim:
Esse método de codificação é exatamente o que Yui defende, que é o chamado sandbox. Cada lógica está contida em um sandbox e cada um faz suas próprias coisas, sem interferir uns nos outros. Quando terceiros navegam no código, eles entendem imediatamente que se trata de um bloco funcional independente, incluindo a estrutura HTML típica e a lógica de inicialização js. Se quiserem reutilizá-lo, podem simplesmente copiar o bloco inteiro.
<!–Um segmento lógico de código HTML–>
<script src="logicA.js" />
<roteiro>
$.onDomReady(função(){
___LógicaA.start();
});
</script>
&inferno;
<!–B segmento de código HTML lógico–>
<script src="logicB.js" />
<roteiro>
$.onDomReady(função(){
___LogicB.start();
});
</script>