网站前台模块化要点整理

一、什么是模块化？
1，“模块化是指解决一个复杂问题时自顶向下逐层把软件系统划分成若干模块的过程。

每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体，完成整个系统所要求的功能。

模块具有以下几种基本属性：接口、功能、逻辑、状态，功能、状态与接口反映模块的外部特性，逻辑反映它的内部特性。

在软件的体系结构中，模块是可组合、分解和更换的单元。

”（百度词条）我们所借鉴的是一种思维的方式。

二、页面制作为什么需要模块化？
1，站点内容越来越多、代码越来越臃肿，渐渐影响到了客户端的体验（主要是打开速度），影响到了维护的效率。

2，解决方法：减少代码冗余、提高代码重用率、图片压缩等等
3，模块化优点：提高代码重用率、提高开发效率、减少沟通成本、降低维护成本、降低耦合、降低发布风险、减少Bug定位时间和Fix成本、提高页面容错、更好的实现快速迭代
三、模块化具体实现方法
1，实现思路：“模块化的思维”【按照制定的相关规则、规范去做，统一接口规范。

】
2，具体方法：
（1）各模块间出现类似的部分，提出来做为公共的定义，减少冗余
应用在百万年薪项目中：主要的相同部分有：
①转发微博、发私信弹出层（样式+js），
②地区、职业、专业弹出层（样式+js），
③清除浏览器自带标签默认值，
④实现圆角的（样式或js），
⑤头部（top_new.ascx）,
⑥友情链接、底部（bottom_new.ascx）
⑦表情弹出层
（2）合并背景小图片，减少http请求，提高网站速度
（3）可以被重复调用的代码举例，及命名规则【以css属性名的首字母+属性值命名】
①文字样式
.f12{font-size:12px}
.f14{font-size:14px}
.fwb{font-weight:bold}
.fwn{font-weight:normal}
.tdu{text-decoration:underline}
.tdn{text-decoration:none}
②文字定位
.tl{ text-align:left}
.tr{ text-align:right}
.fl{ float:left; display:inline;}
.fr{ float:right; display:inline;}
③宽度、高度
.w100{ width:100px;}
.h100{ height:100px;}
④边距
.m10{ margin:10px;}
.mt20{margin-top:20px; }
.mb20{ margin-bottom:20px;}
.ml20{ margin-left:20px;}
.mr20{ margin-right:20px;}
.p10{ padding:10px;}
.pt20{padding-top:20px; }
.pb20{ padding-bottom:20px;}
.pl20{ padding-left:20px;}
.pr20{ padding-right:20px;}
（4）视觉上的模块化：
分模块呈现的页面，可以定义一个.box{ border:1px solid #ccc; margin:10px 0;}再根据实际情况调用不同的样式（例如：找工作首页）
代码：
<style>
.fl{ float:left; display:inline;}
.fr{ float:right; display:inline;}
.box{ border:1px solid #ccc; margin:10px 0;}
</style>
<div class="box fl w700">左边内容</div>
<div class="box fr w200">右边内容</div>
（5）利用css样式的优先级，用相近的css代码控制相近的样式，以减少用户控件的使用
例如：友情链接在A页面中是宽600px、背景颜色是蓝色；在B页面中是宽700px、背景颜色是红色，现在只用一个控件来实现
样式：
.box{ border:1px solid #ccc; marging:10px 0;}
. blue .box{ background:blue; width:600px;}
.red .box{ background:red; width:700px;}
用户控件：（可命名为youqing.ascx）
<div class="box">友情链接内容</div>
A页面html代码：
<div class="blue">调用用户控件</div>
B页面html代码：
<div class="red">调用用户控件</div>。