4. 如何划分模块--单一职责原则
模块化可以让代码高度重用,显著提高开发效率。关于模块化.比较成熟的是编程领域的“类”。在面向对象编程方式中,“类”是个非常核心的概念,可以说面向对象思想的基础就是“类”。关于模块化,“类”有很多成熟的技巧,例如封装、多用组合少用继承原则等。css的模块化是个有趣的话题,它是个新的领域,很多人都有自己的见解。下面借鉴编程巾的“类”,将面向对象的编程思想引入到css的模块化里。
从视觉上进行划分,样式和功能相对独立且稳定的一部分就可以视为模块。举个例子说明,看看管理学院的鸿鹄梦工厂,对于图1我们该如何划分模块呢?
很明显,我们可以划分三大块,一分为二,右面为一块,而右面的又可以分为上下两块。如图二。
但仔细观察,会发现模块l和模块3有相似的部分,这些相似的部分分别在两个模块里都写了遍。一方面,增加了冗余的代码量,另一方面如果需要修改相似部分的代码,两个模块都需要修改,增加了修改的成本。
我们可以将这些相似的部分提取出来,再进一步拆分成更小的模块。我们可以将设计图拆成5个模块,如图三所示。如此一来,每个模块都相对独立,和其他模块设有重复的地方,模块的重用率提高。
至此,我们可以归纳出拆分模块的第一个技巧:模块与模块之间尽量不要包含,相同的部分,如果有相同部分,应将它们提取出来,拆分成一个独立的模块。
刚看了个简单的,现在我们看个稍显复杂的泛教育。
按照我们上一个原则:将相同的部分提取出来,拆分成一个独立模块,满屏的圈啊,我自己都不想画了。如图五
拆分模块时,应将模块拆得尽可能简单,以提高弹性。模块功能越简单其但数量也会相应增加,增加了维护难度。所以,拆分模块时应该在“数量”和“简单”之间取一个最合适的平衡点。
这就是拆分模块的第二个技巧:模块应在保证数量尽可能少的原则下尽可能的简单,以提高重用性。
在面向对象编程中也有相似的思想,设计类的时候,为了保证类的“单一职责”原则,一般情况下,类的功能应该相对简单稳定,一个类只负责一个职责。一个功能超复杂的拥有多个职责的大类,其重用性远不如一群独立职责的小类。