Conozco IKEA desde hace mucho tiempo y fui allí una vez cuando estaba en Guangzhou. Mi impresión fue que es grande, caro e inteligente. El lugar es grande, las cosas son caras y el diseño es inteligente. Ahora vivo no lejos de IKEA. Encontré tiempo para ir de compras este mes. El lugar sigue siendo muy grande, las cosas siguen siendo muy caras y el diseño sigue siendo muy inteligente. Aunque no compré nada, aun así gané algo. A través de los métodos de diseño de muebles de IKEA, podemos hablar de modularidad.
Los estudiantes que han estado en IKEA deberían haber notado que los muebles de IKEA son básicamente modulares y extraíbles. Lo mismo ocurre con las características de modularidad. Se puede combinar, es relativamente independiente y se puede agregar fácilmente cuando sea necesario. Entonces, ¿cómo podemos implementar básicamente este método? Da un ejemplo sencillo:
Ejemplo de estructura modular.
El CSS correspondiente se puede escribir así:
.modo-a{...}
.modo-a h3{...}
.modo-a p{...}
Entre ellos, "mode-a" es el nombre de este módulo, lo que indica que se trata de un módulo llamado "a". Ahora este módulo se puede colocar donde lo necesite. Como estamos haciendo un módulo, no quedará solo uno, agregamos otro "modo-b":
El CSS correspondiente se puede escribir así:
.modo-b{...}
.modo-b h3{...}
.modo-b div{...}
.modo-b h4{...}
.modo-b ul li{...}
En aplicaciones prácticas, a menudo es necesario agregar algunos nombres de clases para reducir la complejidad de las definiciones de clases. Este ejemplo es relativamente simple, pero es suficiente para ilustrar las características de la modularidad. Los dos módulos anteriores se pueden utilizar en una o más páginas al mismo tiempo.
En las tiendas IKEA habrás notado que las áreas de productos están básicamente divididas por diseñadores, especialmente aquellos artículos pequeños. El código modularizado también se puede asignar a diferentes personas para que lo escriban y mejorar la eficiencia. Por supuesto, para implementar este método, también necesitamos hacer algunos trabajos, como la convención de nomenclatura del módulo, dónde deben dejarse las interfaces en el módulo, etc. Como en el ejemplo anterior, se puede acordar que el nombre comience con "modo" y el título del módulo use la etiqueta h3. De esta forma, no importa quién escriba el módulo, este será compatible con las páginas del proyecto.
Al ver esto, puede encontrar que, dado que la estructura fija del módulo se acordó anteriormente, ¿no es redundante esta parte escrita en la definición de estilo de cada módulo? Sí. Si se han formado convenciones relevantes, esta parte de la definición de estilo se puede proponer y poner en la definición pública del proyecto para reducir la redundancia de código. El ejemplo anterior puede convertirse en:
/* =S global */
h3{
/* La primera forma de escribir */
...
}
.modo-a h3,
.modo-b h3{
/* La segunda forma de escribir*/
...
}
/* =E global */
/* =S modo-a */
.modo-a{...}
.modo-a p{...}
/* =E modo-a */
/* =S modo-b */
.modo-b{...}
.modo-b div{...}
.modo-b h4{...}
.modo-b ul li{...}
/* ==E modo-b */
Me pregunto si habrás notado que esos artículos pequeños en IKEA a menudo se pueden combinar con otros artículos diferentes. Esto también trae a colación otro tema de modularidad: módulos dentro de módulos. Es decir, pueden existir otros módulos en el módulo, lo cual también es fácil de entender. Al igual que cuando creamos un sitio web, la estructura de toda la página es como un módulo grande, y el ejemplo mencionado anteriormente es un módulo dentro de un módulo. módulo, pero reduzcamos esta definición a un nivel. La definición de h3 en el ejemplo anterior puede considerarse como un módulo. Aparece tanto en el módulo "modo-a" como en el "modo-b", y su rendimiento estructural es relativamente fijo.
Bien, esto es sólo una definición de etiqueta, ¿qué pasa si hay más de una etiqueta? Cambiemos el ejemplo nuevamente:
Ejemplo de estructura modular.
Este es un ejemplo de un "módulo dentro de un módulo".
El módulo "mode-a" es un módulo dentro de un módulo.
/* =S modo-a */
.modo-a{...}
.modo-a h3{...}
.modo-a p{...}
/* =E modo-a */
/* =S modo-b */
.modo-b{...}
.modo-b h4{...}
.modo-b .cont{...}
.modo-b .cont ul li{...}
/* =E modo-b */
/* =S modo-c */
.modo-c{...}
.modo-c h4{...}
.modo-c .cont{...}
.modo-c .cont p{...}
/* =E modo-c */
Como puede ver en lo anterior, "modo-a" es un módulo independiente. Cuando forma parte de "modo-b" y "modo-c", se convierte en un módulo dentro del módulo. Dejar caer los ladrillos, con la esperanza de generar debates más relevantes.