前端代码的结构组织和文件的命名
原则：项目中代码的组织结构清晰，同类型的代码文件或者相同的模块归类到同一文件夹中，文件命名规范须统一且明明要有意义。
代码文件组织结构
示例（以下是一种常用的前端文件组织结构）：
JS：
1
2
| - lib（放置框架文件）
- custom.js（业务相关CSS文件）
|
CSS
1
2
3
4
| - lib(放置框架文件)
- images（图片文件）
- reset.css（统一默认元素样式文件）
- custom.css（业务相关CSS文件）
|
代码文件的命名
1
2
| 示例:jquery-1.8.2.min.js
文件名.版本号.[max|min].js
|
前端代码重构
重构主要过程分为以下步骤：
1
2
3
4
5
| 1. 删除无用代码，精简代码。无用代码一般集中在CSS、JS文件中。
2. 前端代码规范化。清除内联与head中的CSS样式，写在CSS文件中，调整代码缩进。更改标准已不推荐的标签。统一命名规则。缩小Js变量的作用域。
3. 整理基础类库。统一UI插件的使用、统一基础方法的使用。
4. 前端代码模块化。
5. 提高页面加载性能。
|
合理使用前端框架
1
2
3
| 1. 根据项目需求选用：Ajax操作、模板化、json|XML、浏览器支持、移动端|PC端
2. 根据项目特点选用：开发周期、前端团队能力、是否长期维护
3. 根据框架特点选用：是否满足需求、框架性能、版权、技术支持、收费、文档等
|
多浏览器测试
1
2
3
4
5
6
7
8
9
10
| 1. Ie7、Ie8兼容
2. HTML5兼容
- 使用W3C提供的HTML、CSS标准验证工具进行检查
- JavaScript代码规范JSLint
3. 明确支持的浏览器范围，可按照此4类浏览器支持的标准制定浏览器支持情况
- 外观和交互符合设计需求
- 外观上有所差异，但不影响整体效果
- 外观和设计不符合，但不影响页面交互
- 完全不支持设计的功能
4. 避免出现浏览器兼容问题
|
代码和资源的压缩合并
1
2
3
4
5
6
7
8
| 1. Web服务器开启Gzip压缩
2. JavaScript代码压缩：
- 去除多余空格和回车
- 替换长变量名
- 简化代码写法
3. CSS代码压缩（与JS类似）
4. HTML代码压缩（有争议）
5. 图片资源压缩
|
前端代码基本命名规范
1
2
3
4
5
6
7
8
9
| 1. W3C规范建议标签与属性名都应为小写，属性值使用双引号闭合
2. 给所有关键元素定义id与Class，便于CSS与Js进行交互
- 名称中全部使用小写
- id中关键词使用下划线_连接
- class的关键词使用中划线-连接
- 如果class名称仅作为js调用的钩子使用，则添加js作为前缀
- HTML代码层级缩进为4个空格
- 包含子元素则此元素起始与闭合标签独占一行
3. 给HTML代码添加必要的注释
|
CSS命名规范及格式规范
1
2
3
4
5
6
| 1. 组成类名的关键字使用中划线连接
2. 取父元素的Class名作为前缀
3. CSS样式定义中，左大括号放置在选择器的同一行，切之间添加一个空格
4. 多个选择其具有相同的样式声明时，每个选择器都应该独占一行
5. 样式声明顺序按字母顺序排列，不考虑浏览器前缀
6. 样式定义按照模块来分组，不同模块的定义之间使用一个空行来分割
|
