Apropos Modularität im Möbeldesign von IKEA

Ich kenne IKEA schon seit langem und war einmal dort, als ich in Guangzhou war. Mein Eindruck war, dass es groß, teuer und schick ist. Der Ort ist groß, die Dinge sind teuer und das Design ist clever. Ich wohne jetzt nicht weit von IKEA entfernt und habe diesen Monat Zeit zum Einkaufen gefunden. Der Ort ist immer noch so groß, die Dinge sind immer noch so teuer und das Design ist immer noch so clever. Obwohl ich nichts gekauft habe, habe ich dennoch etwas gewonnen. Durch die Möbeldesignmethoden von IKEA können wir über Modularität sprechen.

Studenten, die schon einmal bei IKEA waren, sollten bemerkt haben, dass IKEA-Möbel grundsätzlich modular und abnehmbar sind. Das Gleiche gilt für die Merkmale der Modularität. Sie sind kombinierbar, relativ unabhängig und können bei Bedarf problemlos hinzugefügt werden. Wie können wir diese Methode grundsätzlich implementieren? Geben Sie ein einfaches Beispiel:

Das entsprechende CSS kann wie folgt geschrieben werden:

.mode-a{...}
.mode-a h3{...}
.mode-a p{...}

Darunter ist „mode-a“ der Name dieses Moduls, was darauf hinweist, dass es sich um ein Modul mit dem Namen „a“ handelt. Jetzt kann dieses Modul dort platziert werden, wo Sie es benötigen. Da wir ein Modul erstellen, wird es nicht nur eines geben, wir fügen ein weiteres „mode-b“ hinzu:

Das entsprechende CSS kann wie folgt geschrieben werden:

.mode-b{...}
.mode-b h3{...}
.mode-b div{...}
.mode-b h4{...}
.mode-b ul li{...}

In praktischen Anwendungen ist es häufig erforderlich, einige Klassennamen hinzuzufügen, um die Komplexität der Klassendefinitionen zu verringern. Dieses Beispiel ist relativ einfach, reicht jedoch aus, um die Merkmale der Modularität zu veranschaulichen. Die beiden oben genannten Module können auf einer oder mehreren Seiten gleichzeitig verwendet werden.

In IKEA-Einrichtungen ist Ihnen vielleicht aufgefallen, dass die Produktbereiche, insbesondere die kleinen Artikel, grundsätzlich nach Designern unterteilt sind. Modularisierter Code kann zur Verbesserung der Effizienz auch verschiedenen Personen zum Schreiben zugewiesen werden. Um diese Methode zu implementieren, müssen wir natürlich auch einige Arbeiten durchführen, z. B. die Namenskonvention des Moduls, wo Schnittstellen im Modul belassen werden müssen usw. Wie im obigen Beispiel kann vereinbart werden, dass der Name mit „mode“ beginnt und der Modultitel das h3-Tag verwendet. Unabhängig davon, wer das Modul schreibt, ist es auf diese Weise mit den Seiten im Projekt kompatibel.

Wenn Sie dies sehen, stellen Sie möglicherweise fest, dass dieser in der Stildefinition jedes Moduls geschriebene Teil nicht überflüssig ist, da oben die feste Struktur des Moduls vereinbart wurde. Ja. Wenn entsprechende Konventionen gebildet wurden, kann dieser Teil der Stildefinition vorgeschlagen und in die öffentliche Definition des Projekts aufgenommen werden, um die Coderedundanz zu reduzieren. Das obige Beispiel kann sein:

/* =S global */
h3{
/* Die erste Schreibweise */
...
}
.mode-a h3,
.mode-b h3{
/* Die zweite Schreibweise*/
...
}
/* =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 */

Ich frage mich, ob Ihnen aufgefallen ist, dass diese kleinen Artikel bei IKEA oft mit verschiedenen anderen Artikeln kombiniert werden können. Dies wirft auch ein weiteres Thema der Modularität auf: Module innerhalb von Modulen. Das heißt, das Modul kann andere Module enthalten, was ebenfalls leicht zu verstehen ist. Genau wie bei der Erstellung einer Website ist die Struktur der gesamten Seite wie ein großes Modul, und das oben erwähnte Beispiel ist ein Modul innerhalb eines Modul, aber grenzen wir diese Definition um eine Ebene ein. Die Definition von h3 im obigen Beispiel kann als Modul betrachtet werden. Es erscheint in beiden Modulen „Modus-a“ und „Modus-b“ und seine strukturelle Leistung ist relativ fest.

OK, das ist nur eine Definition eines Labels. Was ist, wenn es mehr als ein Label gibt? Ändern wir das Beispiel noch einmal:

/* =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 */

Wie Sie oben sehen können, ist „mode-a“ ein unabhängiges Modul. Wenn es Teil von „mode-b“ und „mode-c“ ist, wird es zu einem Modul innerhalb des Moduls. Wir lassen die Steine ​​fallen und hoffen, relevantere Diskussionen anzustoßen.