從宜家的家具規(guī)劃講模塊化

去過(guò)宜家的同學(xué)應(yīng)該都有注意到，宜家的家具根本都是組合的，可拆裝。模塊化的特色也是這樣，能夠組合，相對(duì)獨(dú)立，在需求的時(shí)分能夠很方便的加上。那怎么寫(xiě)能夠根本實(shí)現(xiàn)這種方法呢？給個(gè)簡(jiǎn)略的比如：

對(duì)應(yīng)的CSS能夠這么寫(xiě)：

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

其間“mode-a”便是這個(gè)模塊的稱(chēng)號(hào)，表明這是名為“a”的模塊，現(xiàn)在這個(gè)模塊能夠被放到你所需求的當(dāng)?shù)亍Ｒ讶皇亲瞿�塊，就不會(huì)只有一個(gè)，咱們?cè)偌右粋�(gè)“mode-b”：

對(duì)應(yīng)的CSS能夠這么寫(xiě)：

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

實(shí)際運(yùn)用中大多需求加一些classname來(lái)削減類(lèi)界說(shuō)的復(fù)雜度，這個(gè)比如比較簡(jiǎn)略，但足以闡明模塊化的特色。上面兩個(gè)模塊可同時(shí)被運(yùn)用到一個(gè)或多個(gè)頁(yè)面中。

在宜家的賣(mài)場(chǎng)中，或許你也注意到了，根本是以規(guī)劃師來(lái)區(qū)分產(chǎn)品區(qū)的，特別是那些小件的產(chǎn)品。模塊化后的代碼也能夠被分配給不同的人進(jìn)行編寫(xiě)，進(jìn)步功率。當(dāng)然要實(shí)現(xiàn)這種方法，咱們也需求做些作業(yè)，如模塊的命名標(biāo)準(zhǔn)、模塊中哪些當(dāng)?shù)厥切枨罅艚涌诘牡鹊取Ｈ缟厦娴谋热缰心軌蚣s好的就有：命名以“mode”開(kāi)頭，模塊標(biāo)題運(yùn)用h3標(biāo)簽。這樣不管是哪個(gè)人寫(xiě)出來(lái)的模塊都可兼容項(xiàng)目中的頁(yè)面。

看到這你可能會(huì)發(fā)現(xiàn)，已然上面現(xiàn)已約好了模塊固定的結(jié)構(gòu)，每個(gè)模塊的款式界說(shuō)中所寫(xiě)的這一部分不便是冗余的嗎？是的。假如現(xiàn)已構(gòu)成相關(guān)的約好，這部分的款式界說(shuō)能夠被提出來(lái)放到項(xiàng)目的公共界說(shuō)中，削減代碼的冗余。如上面的比如能夠變成：

/* =S global */
h3{
/* 第一種寫(xiě)法 */
...
}
.mode-a h3,
.mode-b h3{
/* 第二種寫(xiě)法 */
...
}
/* =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 */

不知你有沒(méi)注意到宜家那些小件的產(chǎn)品，往往能夠組合到不同的其它產(chǎn)品上面。這也帶出了模塊化的另一個(gè)話題：模塊中的模塊。即在模塊中能夠存在其它的模塊，也很好了解，就像咱們做網(wǎng)站的時(shí)分，整個(gè)頁(yè)面的結(jié)構(gòu)就像是一個(gè)大的模塊，而上面所講的比如便是模塊中的模塊了，只不過(guò)咱們把這個(gè)界說(shuō)縮小一層。上面比如中對(duì)h3的界說(shuō)，就能夠看成是一個(gè)模塊，它在“mode-a”、“mode-b”兩個(gè)模塊中都呈現(xiàn)，并且結(jié)構(gòu)體現(xiàn)相對(duì)固定。

OK，這只是對(duì)一個(gè)標(biāo)簽的界說(shuō)，假如不只一個(gè)標(biāo)簽?zāi)�？咱們重新改下比如�?/p>

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

從上面能夠看到，“mode-a”是一個(gè)獨(dú)立的模塊，當(dāng)它作為“mode-b”和“mode-c”的一部分時(shí)，就成了模塊中的模塊了。