IKEAの家具デザインからモジュール性について語る

IKEAのことは以前から知っていて、広州に行ったときに一度行ったことがあるのですが、大きくて高くておしゃれという印象でした。場所は広く、物は高価で、デザインは賢いです。私は今、IKEA からそれほど遠くないところに住んでいますが、今月は買い物に行く時間がありました。その場所はまだとても広くて、物はまだとても高価で、デザインはまだとても賢いです。何も買わなかったものの、IKEA の家具デザイン手法を通じてモジュール性について話すことができました。

IKEAに行ったことのある学生は、IKEAの家具が基本的にモジュール式で取り外し可能であることに気づいたはずです。モジュール性の特性についても同様であり、組み合わせることができ、比較的独立しており、必要に応じて簡単に追加できます。では、基本的にこのメソッドを実装するにはどうすればよいでしょうか?簡単な例を挙げてみましょう。

対応する CSS は次のように記述できます。

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

このうち「mode-a」はこのモジュールの名前で、これが「a」という名前のモジュールであることを示しています。モジュールを作成しているので、モジュールは 1 つだけではなく、別の「mode-b」を追加します。

対応する CSS は次のように記述できます。

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

実際のアプリケーションでは、クラス定義の複雑さを軽減するためにいくつかのクラス名を追加する必要があることがよくあります。この例は比較的単純ですが、モジュール性の特性を説明するには十分です。上記 2 つのモジュールは、1 つ以上のページで同時に使用できます。

イケアの店舗では、特に小物などの商品エリアが基本的にデザイナーごとに分かれていることに気づいたかもしれません。モジュール化されたコードを別の人に割り当てて作成することもでき、効率が向上します。もちろん、このメソッドを実装するには、モジュールの命名規則、インターフェイスをモジュール内に残す必要があるなど、いくつかの作業も行う必要があります。上記の例と同様に、名前が「mode」で始まり、モジュールのタイトルが h3 タグを使用していることがわかります。このようにして、誰がモジュールを作成しても、そのモジュールはプロジェクト内のページと互換性があります。

これを見ると、モジュールの固定構造は上記で合意されているので、各モジュールのスタイル定義に記述されているこの部分は冗長ではないでしょうか?はい。関連する規約が形成されている場合は、スタイル定義のこの部分を提案してプロジェクトの公開定義に組み込むことで、コードの冗長性を減らすことができます。上記の例は次のようになります。

/* =S グローバル */
h3{
/* 最初の書き方 */
...
}
.mode-a h3、
.mode-b h3{
/* 2 番目の書き方*/
...
}
/* =E グローバル */
/* =S モード-a */
.mode-a{...}
.mode-a p{...}
/* =E モード-a */
/* =S モード-b */
.mode-b{...}
.mode-b div{...}
.mode-b h4{...}
.mode-bul li{...}
/* ==E モード b */

IKEAの小物は他のアイテムと組み合わせられることが多いことに気づいたでしょうか。これは、モジュール性に関する別のトピック、つまりモジュール内のモジュールも持ち出します。つまり、モジュール内に他のモジュールが存在することもできます。これも分かりやすいです。Web サイトを作成するときと同じように、ページ全体の構造が大きなモジュールのようなもので、上記の例はその中のモジュールです。モジュールですが、この定義を 1 レベルに絞り込んでみましょう。上記の例の h3 の定義は、モジュール「mode-a」と「mode-b」の両方に出現し、その構造的な性能は比較的固定されています。

これは単なるラベルの定義ですが、複数のラベルがある場合はどうなるでしょうか?もう一度例を変更してみましょう。

/* =S モード-a */
.mode-a{...}
.mode-a h3{...}
.mode-a p{...}
/* =E モード-a */
/* =S モード-b */
.mode-b{...}
.mode-b h4{...}
.mode-b .cont{...}
.mode-b .cont ul li{...}
/* =E モード b */
/* =S モード-c */
.mode-c{...}
.mode-c h4{...}
.mode-c .cont{...}
.mode-c .cont p{...}
/* =E モード-c */

上記からわかるように、「mode-a」は独立したモジュールであり、「mode-b」および「mode-c」の一部である場合、モジュール内のモジュールになります。より適切な議論を引き起こすことを期待して、レンガを落とします。