前端模块化设计思路

模块化就是为了减小循环依赖，减小耦合，提升设计的效率。为了作到这一点，咱们须要有一个设计规则，全部的模块都在这个规则下进 行设计。良好的设计规则，会把耦合密集的设计参数进行归类做为一个模块，并以此划分工做任务。而模块之间彼此经过一个固定的接口（所谓的可见参数）进行交互，除此以外的内部实现（所谓的隐参数）则由模块的开发团队进行自由发挥。

程序模块化的目的：

1. 减 少循环依赖
2. 减小耦合
3. 提升设计效率

程序模块化的实施：

1. 把耦合密集 的归为一个模块
2. 模块间经过固定的接×××互
3. 模块内部实现自由发挥

HTML CSS Images的模块化设计

页面模块化的实施，这里指的是针对除去JavaScript部分的页面代码进行模块化实施。经过html css 图片进行模块化。
页面模块化的实施思路是高度耦合的页面片断封装，模块布局做为公开接口，高度耦合的页面进行封装，使用独立的css文件，高度耦合的图片进行封装，给某类相关性强的图片创建文件夹。
页面模块化的目的是，实现多人协同开发页面，提升页面研发速度和下降维护难度。研发速度的提高体如今多人协同并行开发， 维护难度体如今减小版本的混乱，根据模块区分版本下降版本间代码冲突和文件错误覆盖。

拆分页面模块，从小到大的分解
1. 拆分页面模块
一个页面有不少个小单元模块组成，他来自有原始需求文档，好比
logo，导航，内容1，内容2，内容3，内容4，尾部导 航，版权信息等等。
根据他们就能够拆分出基本的模块。
2. 拆分网站模块
将整个网站安排频道或者分类进行拆分，好比
首页，内容页，文字列表页，图片列表页，频道1页面，频道2页面，分类1页面，分类2页面，后台管理页面，等等
3. 每一个网站做为一个模块。好比
商城站，支付站，论坛，三个站独立为三个大模块。

模块化实现
1. 高度耦合提取为一个模块，将模块代码做用域进行控制
代码1.非继承模块，经过后代选择符方式控制做用域

<div class="mod"> <h3 class="title">title</h3> <div class="con">        con    </div>     <a class="more">more</a> </div>

.mod {} .mod .title {} .mod .con {} .mod .more {}

<div class="footer"> <ul> <li><a href="" title="">关于</a></li> <li><a href="" title="">合做</a></li> <li><a href="" title="">招聘</a></li> </ul> Copyright © 2009 某公司 版权全部 </div>

.footer {} .footer ul {} .footer p {}

代码2.继承模块，提取众多模块中公共部分，具体模块经过优先级进行处理。继承模块方面整站某些模块的批量修改处理，也提升复用性，下降代码重复。

.mod {} .mod .title {} .mod .con {} .mod .more {}  .note {} .note .title {} .note .con {} .note .more {}

<div class="mod note"> <h3 class="title">title</h3> <div class="con">        con    </div>     <a class="more">more</a> </div>

2. 页面模块
页面模块代码做用域的控制经过css文件来控制。某类具备高度耦合的页面使用自身的css文件。
3. 模块间的公开接口
上面是模块的封装，公开的接口在页面中表现为何？
首先是reset，base，可继承模块，这些代码是开放接口，必须根据这些代码进行页面代码开发，也就是你的页面代码必须在以上代码基础上开发。
其次是css文件，css文件名称和他做用于那些页面。
再次是布局、模块class，id命名，模块在页面的哪一个位置。在CSS中的表现就是定位，布局，和部分盒模型。float、position、 width、height等等。布局一般使用css做为接口实现，若是布局具备高度的逻辑性，彻底能够经过html和css组合进行，好比960 Grid System，或者采用YUI grid.css。模块class和id的命名用于区分模块，不能在一个页面的全部css中出现不一样模块同用一个class和id名。

规划整站模块

上文提到的基本的原理，真正实施起来仍是存在不少问题，模块粒度问题，公共模块与普通模块的区分，继承模块是否值得继承等等，页面模块如何划分。
首先，了解你的项目，经过画网站树状图了解你网站的整体结构和页面模块
其次，理清结构逻辑和视觉逻辑，结构逻辑就是看你的页面由那些模块组成，视觉逻辑了解可继承模块，布局逻辑（网格布局或者非网格布局）

附图：

 

【本文首发于： 百度泛用户体验】

http://www.baiduux.com/blog/2010/02/24/%e5%89%8d%e7%ab%af%e6%a8%a1%e5%9d%97%e5%8c%96%e8%ae%be%e8%ae%a1%e6%80%9d%e8%b7%af/

【 关注百度技术沙龙】