从宜家的家具规划讲模块化

去过宜家的同学应该都有注意到，宜家的家具根本都是组合的，可拆装。模块化的特色也是这样，能够组合，相对独立，在需求的时分能够很方便的加上。那怎么写能够根本实现这种方法呢？给个简略的比如：

对应的CSS能够这么写：

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

其间“mode-a”便是这个模块的称号，表明这是名为“a”的模块，现在这个模块能够被放到你所需求的当地。已然是做模块，就不会只有一个，咱们再加一个“mode-b”：

对应的CSS能够这么写：

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

实际运用中大多需求加一些classname来削减类界说的复杂度，这个比如比较简略，但足以阐明模块化的特色。上面两个模块可同时被运用到一个或多个页面中。

在宜家的卖场中，或许你也注意到了，根本是以规划师来区分产品区的，特别是那些小件的产品。模块化后的代码也能够被分配给不同的人进行编写，进步功率。当然要实现这种方法，咱们也需求做些作业，如模块的命名标准、模块中哪些当地是需求留接口的等等。如上面的比如中能够约好的就有：命名以“mode”开头，模块标题运用h3标签。这样不管是哪个人写出来的模块都可兼容项目中的页面。

看到这你可能会发现，已然上面现已约好了模块固定的结构，每个模块的款式界说中所写的这一部分不便是冗余的吗？是的。假如现已构成相关的约好，这部分的款式界说能够被提出来放到项目的公共界说中，削减代码的冗余。如上面的比如能够变成：

/* =S global */
h3{
/* 第一种写法 */
...
}
.mode-a h3,
.mode-b h3{
/* 第二种写法 */
...
}
/* =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 */

不知你有没注意到宜家那些小件的产品，往往能够组合到不同的其它产品上面。这也带出了模块化的另一个话题：模块中的模块。即在模块中能够存在其它的模块，也很好了解，就像咱们做网站的时分，整个页面的结构就像是一个大的模块，而上面所讲的比如便是模块中的模块了，只不过咱们把这个界说缩小一层。上面比如中对h3的界说，就能够看成是一个模块，它在“mode-a”、“mode-b”两个模块中都呈现，并且结构体现相对固定。

OK，这只是对一个标签的界说，假如不只一个标签呢？咱们重新改下比如：

/* =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”是一个独立的模块，当它作为“mode-b”和“mode-c”的一部分时，就成了模块中的模块了。