Je connais IKEA depuis longtemps et j'y suis allé une fois lorsque j'étais à Guangzhou. J'avais l'impression que c'était grand, cher et intelligent. L'endroit est grand, les choses sont chères et le design est astucieux. J'habite non loin d'IKEA maintenant. J'ai trouvé le temps d'aller faire du shopping ce mois-ci. L'endroit est toujours aussi grand, les choses sont toujours aussi chères et le design est toujours aussi astucieux. Même si je n’ai rien acheté, j’ai quand même gagné quelque chose Grâce aux méthodes de conception de meubles d’IKEA, on peut parler de modularité.
Les étudiants qui sont allés chez IKEA auraient dû remarquer que les meubles IKEA sont essentiellement modulaires et amovibles. Il en va de même pour les caractéristiques de modularité. Elle peut être combinée, relativement indépendante et peut être facilement ajoutée en cas de besoin. Alors, comment pouvons-nous mettre en œuvre cette méthode ? Donnez un exemple simple :
<div class="mode-a">
<h3>Démo modulaire</h3>
<p>Exemple de structure modulaire. </p>
</div>
Le CSS correspondant peut s'écrire ainsi :
.mode-a{...}
.mode-a h3{...}
.mode-a p{...}
Parmi eux, "mode-a" est le nom de ce module, indiquant qu'il s'agit d'un module nommé "a". Ce module peut désormais être placé là où vous en avez besoin. Puisque nous faisons un module, il n'y en aura pas qu'un, on ajoute un autre "mode-b" :
<div class="mode-b">
<h3>Démo modulaire</h3>
<div>
<h4>Fonctionnalités modulaires :</h4>
<ul>
<li>Relativement indépendant</li>
<li>Haute portabilité</li>
</ul>
</div>
</div>
Le CSS correspondant peut s'écrire ainsi :
.mode-b{...}
.mode-b h3{...}
.mode-b div{...}
.mode-b h4{...}
.mode-b ul li{...}
Dans les applications pratiques, il est souvent nécessaire d'ajouter des noms de classes pour réduire la complexité des définitions de classes. Cet exemple est relativement simple, mais il suffit à illustrer les caractéristiques de la modularité. Les deux modules ci-dessus peuvent être utilisés sur une ou plusieurs pages en même temps.
Dans les magasins IKEA, vous avez peut-être remarqué que les catégories de produits sont essentiellement divisées par les designers, en particulier pour les petits articles. Le code modularisé peut également être attribué à différentes personnes pour l'écriture afin d'améliorer l'efficacité. Bien sûr, pour implémenter cette méthode, nous devons également effectuer quelques travaux, comme la convention de dénomination du module, où les interfaces doivent être laissées dans le module, etc. Comme dans l'exemple ci-dessus, on peut convenir que le nom commence par "mode" et que le titre du module utilise la balise h3. De cette façon, peu importe qui écrit le module, il sera compatible avec les pages du projet.
En voyant cela, vous constaterez peut-être que puisque la structure fixe du module a été convenue ci-dessus, cette partie écrite dans la définition de style de chaque module n'est-elle pas redondante ? Oui. Si des conventions pertinentes ont été formées, cette partie de la définition de style peut être proposée et intégrée à la définition publique du projet afin de réduire la redondance du code. L'exemple ci-dessus peut devenir :
/* =S global */
h3{
/* La première façon d'écrire */
...
}
.mode-a h3,
.mode-b h3{
/* La deuxième façon d'écrire*/
...
}
/* =E global */
/* =S mode-a */
.mode-a{...}
.mode-a p{...}
/* =E mode-a */
/* =S mode-b */
.mode-b{...}
.mode-b div{...}
.mode-b h4{...}
.mode-b ul li{...}
/* ==E mode-b */
Je me demande si vous avez remarqué que ces petits objets chez IKEA peuvent souvent être combinés avec différents autres articles. Cela soulève également un autre sujet de modularité : les modules dans les modules. C'est-à-dire que d'autres modules peuvent exister dans le module, ce qui est également facile à comprendre. Tout comme lorsque nous créons un site Web, la structure de la page entière est comme un grand module, et l'exemple mentionné ci-dessus est un module au sein d'un module. module, mais réduisons cette définition à un niveau. La définition de h3 dans l'exemple ci-dessus peut être considérée comme un module. Il apparaît dans les deux modules « mode-a » et « mode-b », et ses performances structurelles sont relativement fixes.
OK, ce n'est qu'une définition d'un label, que se passe-t-il s'il y a plus d'un label ? Changeons encore l'exemple :
<div class="mode-b">
<div class="mode-a">
<h3>Démo modulaire</h3>
<p>Exemple de structure modulaire. </p>
</div>
<div class="cont">
<h4>Fonctionnalités modulaires :</h4>
<ul>
<li>Relativement indépendant</li>
<li>Haute portabilité</li>
</ul>
</div>
</div>
<div class="mode-c">
<div class="mode-a">
<h3>Démo modulaire</h3>
<p> Ceci est un exemple de "module dans un module". </p>
</div>
<div class="cont">
<h4>Modules dans les modules :</h4>
<p>Le module "mode-a" est un module dans un module. </p>
</div>
</div>
/* =S mode-a */
.mode-a{...}
.mode-a h3{...}
.mode-a p{...}
/* =E mode-a */
/* =S mode-b */
.mode-b{...}
.mode-b h4{...}
.mode-b .cont{...}
.mode-b .cont ul li{...}
/* =E mode-b */
/* =S mode-c */
.mode-c{...}
.mode-c h4{...}
.mode-c .cont{...}
.mode-c .cont p{...}
/* =E mode-c */
Comme vous pouvez le voir ci-dessus, "mode-a" est un module indépendant Lorsqu'il fait partie de "mode-b" et "mode-c", il devient un module au sein du module. Lâcher les briques, dans l’espoir de susciter des discussions plus pertinentes.