4. 如何划分模块--单一职责原则

模块化可以让代码高度重用，显著提高开发效率。关于模块化．比较成熟的是编程领域的“类”。在面向对象编程方式中，“类”是个非常核心的概念，可以说面向对象思想的基础就是“类”。关于模块化，“类”有很多成熟的技巧，例如封装、多用组合少用继承原则等。css的模块化是个有趣的话题，它是个新的领域，很多人都有自己的见解。下面借鉴编程巾的“类”，将面向对象的编程思想引入到css的模块化里。

    从视觉上进行划分，样式和功能相对独立且稳定的一部分就可以视为模块。举个例子说明，看看管理学院的鸿鹄梦工厂，对于图1我们该如何划分模块呢？

很明显，我们可以划分三大块，一分为二，右面为一块，而右面的又可以分为上下两块。如图二。

但仔细观察，会发现模块l和模块3有相似的部分，这些相似的部分分别在两个模块里都写了遍。一方面，增加了冗余的代码量，另一方面如果需要修改相似部分的代码，两个模块都需要修改，增加了修改的成本。

我们可以将这些相似的部分提取出来，再进一步拆分成更小的模块。我们可以将设计图拆成5个模块，如图三所示。如此一来，每个模块都相对独立，和其他模块设有重复的地方，模块的重用率提高。

至此，我们可以归纳出拆分模块的第一个技巧:模块与模块之间尽量不要包含，相同的部分，如果有相同部分，应将它们提取出来，拆分成一个独立的模块。

刚看了个简单的，现在我们看个稍显复杂的泛教育。

按照我们上一个原则：将相同的部分提取出来，拆分成一个独立模块，满屏的圈啊，我自己都不想画了。如图五

拆分模块时，应将模块拆得尽可能简单，以提高弹性。模块功能越简单其但数量也会相应增加，增加了维护难度。所以，拆分模块时应该在“数量”和“简单”之间取一个最合适的平衡点。

这就是拆分模块的第二个技巧:模块应在保证数量尽可能少的原则下尽可能的简单，以提高重用性。

在面向对象编程中也有相似的思想，设计类的时候，为了保证类的“单一职责”原则，一般情况下，类的功能应该相对简单稳定，一个类只负责一个职责。一个功能超复杂的拥有多个职责的大类，其重用性远不如一群独立职责的小类。