模块化概念

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

　　程序模块化的目的：

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>        

        

        
        
      
        
it知识库：前端模块化设计思路，转载需保留来源！
        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。