CSS模块化(四) 如何划分模块--单一职责原则

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

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

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

 

CSS模块化(四) 如何划分模块--单一职责原则

 

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

CSS模块化(四) 如何划分模块--单一职责原则

 

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

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

CSS模块化(四) 如何划分模块--单一职责原则

 

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

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

CSS模块化(四) 如何划分模块--单一职责原则

 

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

 

CSS模块化(四) 如何划分模块--单一职责原则

 

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

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

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

 

CSS模块化(四) 如何划分模块--单一职责原则,布布扣,bubuko.com

CSS模块化(四) 如何划分模块--单一职责原则

上一篇:项目中js对于字符串加密源码


下一篇:本地 IIS Web 服务器和 IIS Express Web 服务器 冲突