Radicalidade e compromisso no design YUI3

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 designs hierárquicos e granulares, abstraindo conceitualmente "núcleo", "ferramentas" e "componentes". Cada pequena função é colocada em um arquivo e deve ser referenciada por si mesma quando necessário. fornecido na documentação do yui, adote 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, três ou quatro arquivos js devem ser introduzidos. Há duas razões para o yui fazer isso. Primeiro, o yui é muito grande e não é confiável colocar todas as funções em um arquivo. Segundo, ele abre caminho para o design da estrutura de carregamento dinâmico.

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. para iniciar uma solicitação http real após ser armazenada em cache. Em segundo lugar, o carregamento dinâmico pode realizar o carregamento sob demanda e pode desduplicar e classificar de acordo com as dependências entre os arquivos js. O carregamento de arquivos js com tags manuscritas exige que os desenvolvedores prestem atenção extra. a classificação, duplicação, etc. de arquivos Terceiro, o carregamento dinâmico conduz à semântica do código da página, o que permite que os desenvolvedores se preocupem apenas com "o que é necessário" sem se preocupar com "como obtê-lo". 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

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:

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 causará problemas ao reutilizar o código. Da mesma forma, durante a depuração, os engenheiros devem abrir duas janelas e 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 uma estrutura HTML típica e lógica de inicialização js. Se quiserem reutilizá-lo, podem simplesmente copiar o bloco inteiro.

…