Conheço a IKEA há muito tempo e fui lá uma vez quando estava em Guangzhou. Tive a impressão de que é grande, caro e inteligente. O lugar é grande, as coisas são caras e o design é inteligente. Agora moro não muito longe da IKEA. Encontrei tempo para fazer compras este mês. O lugar ainda é tão grande, as coisas ainda são tão caras e o design ainda é muito inteligente. Embora não tenha comprado nada, ainda ganhei algo. Através dos métodos de design de mobiliário da IKEA, podemos falar de modularidade.
Os alunos que visitaram a IKEA devem ter notado que os móveis da IKEA são basicamente modulares e removíveis. O mesmo se aplica às características de modularidade. Pode ser combinado, relativamente independente e facilmente adicionado quando necessário. Então, como podemos basicamente implementar esse método? Dê um exemplo simples:
<div class="modo-a">
<h3>Demonstração Modular</h3>
<p>Exemplo de estrutura modular. </p>
</div>
O CSS correspondente pode ser escrito assim:
.modo-a{...}
.modo-a h3{...}
.mode-a p{...}
Entre eles, "mode-a" é o nome deste módulo, indicando que este é um módulo denominado "a". Agora este módulo pode ser colocado onde você precisar. Como estamos fazendo um módulo, não haverá apenas um, adicionamos outro “mode-b”:
<div class="modo-b">
<h3>Demonstração Modular</h3>
<div>
<h4>Recursos modulares:</h4>
<ul>
<li>Relativamente independente</li>
<li>Alta portabilidade</li>
</ul>
</div>
</div>
O CSS correspondente pode ser escrito assim:
.modo-b{...}
.modo-b h3{...}
.mode-b div{...}
.modo-b h4{...}
.mode-b ul li{...}
Em aplicações práticas, muitas vezes é necessário adicionar alguns nomes de classes para reduzir a complexidade das definições de classes. Este exemplo é relativamente simples, mas é suficiente para ilustrar as características da modularidade. Os dois módulos acima podem ser usados em uma ou mais páginas ao mesmo tempo.
Nas lojas IKEA, você deve ter notado que as áreas de produtos são basicamente divididas por designers, principalmente os itens pequenos. O código modularizado também pode ser atribuído a diferentes pessoas para escrita, a fim de melhorar a eficiência. Claro, para implementar este método, também precisamos fazer alguns trabalhos, como a convenção de nomenclatura do módulo, onde as interfaces precisam ser deixadas no módulo, etc. Como no exemplo acima, pode-se concordar que o nome começa com “mode” e o título do módulo usa a tag h3. Desta forma, não importa quem escreva o módulo, ele será compatível com as páginas do projeto.
Vendo isso, você pode descobrir que, uma vez que a estrutura fixa do módulo foi acordada acima, esta parte não é redundante na definição de estilo de cada módulo? Sim. Se convenções relevantes tiverem sido formadas, esta parte da definição de estilo pode ser proposta e colocada na definição pública do projeto para reduzir a redundância de código. O exemplo acima pode se tornar:
/* =S global */
h3{
/* A primeira maneira de escrever */
...
}
.mode-a h3,
.modo-b h3{
/* A segunda maneira de escrever*/
...
}
/* =E global */
/* =S modo-a */
.modo-a{...}
.mode-a p{...}
/* =E modo-a */
/* =S modo-b */
.modo-b{...}
.mode-b div{...}
.modo-b h4{...}
.mode-b ul li{...}
/* ==E modo-b */
Gostaria de saber se você notou que esses pequenos itens da IKEA muitas vezes podem ser combinados com outros itens diferentes. Isto também traz à tona outro tópico de modularidade: módulos dentro de módulos. Ou seja, podem existir outros módulos no módulo, o que também é fácil de entender. Assim como quando fazemos um site, a estrutura de toda a página é como um módulo grande, e o exemplo mencionado acima é um módulo dentro de um. módulo, mas vamos restringir esta definição a um nível. A definição de h3 no exemplo acima pode ser considerada como um módulo. Ele aparece nos módulos "modo-a" e "modo-b", e seu desempenho estrutural é relativamente fixo.
OK, esta é apenas uma definição de rótulo. E se houver mais de um rótulo? Vamos mudar o exemplo novamente:
<div class="modo-b">
<div class="modo-a">
<h3>Demonstração Modular</h3>
<p>Exemplo de estrutura modular. </p>
</div>
<div class="cont">
<h4>Recursos modulares:</h4>
<ul>
<li>Relativamente independente</li>
<li>Alta portabilidade</li>
</ul>
</div>
</div>
<div class="modo-c">
<div class="modo-a">
<h3>Demonstração Modular</h3>
<p>Este é um exemplo de "módulo dentro de um módulo". </p>
</div>
<div class="cont">
<h4>Módulos dentro de módulos:</h4>
<p>Módulo "mode-a" é um módulo dentro de um módulo. </p>
</div>
</div>
/* =S modo-a */
.modo-a{...}
.modo-a h3{...}
.mode-a p{...}
/* =E modo-a */
/* =S modo-b */
.modo-b{...}
.modo-b h4{...}
.mode-b .cont{...}
.mode-b .cont ul li{...}
/* =E modo-b */
/* =S modo-c */
.modo-c{...}
.modo-c h4{...}
.mode-c .cont{...}
.mode-c .cont p{...}
/* =E modo-c */
Como você pode ver acima, "mode-a" é um módulo independente. Quando faz parte do "mode-b" e do "mode-c", ele se torna um módulo dentro do módulo. Deixando cair os tijolos, na esperança de provocar discussões mais relevantes.