读ghost的页面模块化设计

模块化的定义：

　　 模块化是指解决一个复杂问题时自顶向下逐层把软件系统划分成若干模块的过程。每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体，完成整个系统所要求的功能。模块具有以下几种基本属性：接口、功能、逻辑、状态，功能、状态与接口反映模块的外部特性，逻辑反映它的内部特性。在软件的体系结构中，模块是可组合、分解和更换的单元。

 

一：样式的作用域

　　前提知识：选择器的权值

　　通过权值与优先级来实现样式的作用域。

　

　　样式的三层架构：

　　　　公共级（全局）　　　　--　global

       栏目级（局部公共）　　--　栏目中用到的局部global

　　　　页面级 　　　　　　　--只影响单个页面

　

　　

二：栏目级作用域

 

三：继承

　　前提知识：继承的权值小于０，０,０,１

 

　　继承的最大意义在于可以减少重复定义；而缺点是使用不当时，也会造成增加重复定义，降低性能。

 

　　

四：模块化的核心思想

　　核心思想：将ＨＴＭＬ和ＣＳＳ通过一定的规则进行分类、组合，以达到特定ＨＴＭＬ与ＣＳＳ在特定范围内最大程度的复用。

　　复用：做最少的修改即可重复使用。注意：复用不是不用修改可以直接使用！

 

　　使用方式：

　　　　１.<div class="class-a class-b class-c">　这种可形象称为拼样式，
　　　　２.<div class="mode-a type-a mode-name">　//  mode-a作为基类，type-a为扩展类，mode-name为模块名

　　　　　　基类：基础表现；扩展类：小范围修改；模块名：模块在某一作用域中唯一名称

　　　　

五：基类，扩展类