1、关于前端代码规范建设目的
1）规范代码可以促进团队合作。
2）规范代码可以减少bug处理，提升项目质量。
3） 规范代码可以减少项目维护成本。
4） 规范代码有助于代码审核。
5） 规范代码，有助于养成代码规范的习惯，有助于程序员自身的成长。
---------------------------------------------------------------------------------
2、项目代码规范说明
2.1 文件目录结构
要求：①层级结构清晰。②开发环境和生成环境分离代码。
备注：dist可以借助前端自动化工具打包生成。
2.2 html 规范
- html 文件及文件夹采用小写单词，用‘-’进行连接。
- 文件应以
“<!DOCTYPE ......>”首行顶格开始，推荐使用“<!DOCTYPE html>”。 - 每个界面都必须配置上相应的title。
- 必须申明文档的编码charset，文件编码统一为utf-8编码，
<meta charset="utf-8"/>。 - 根据页面内容和需求填写适当的
keywords和description。 - html 文档结构顺序和视觉顺序基本保持一致。按从上至下、从左往右的视觉顺序书写html结构。
- 布局使用div进行布局，有表现具体表格形式的数据，使用table进行展示。
- 结构、表现、行为 三者分离，避免内联。使用link 将css文件引入，并置于head中。使用script 将js文件引入，并置于body底部。
- 保持良好的简洁的树形结构。每个块级元素都另起一行，每一行都使用tab缩进对齐（head 和body的子元素不需要缩进）；删除冗余的行尾的空格；使用4个空格代替1个tab。
- 结构上如果可以并列书写，就不要嵌套。可以写成
<div></div><div></div>那么就不要写成。 - 如果结构已经可以满足视觉和语义的要求，那么就不要有额外的冗余的结构。比如
<div><h2></h2></div>已经能满足要求，那么就不要再写成<div><div><h2></h2></div></div>。 - 一个标签上引用的className不要过多，越少越好。比如不要出现这种情况：
<div class="class1 class2 class3 class4"></div>。 - 对于一个语义化的内部标签，应尽量避免使用className。比如在这样一个列表中，li标签中的itm应去除：
<ul class="m-help"><li class="itm"></li><li class="itm"></li></ul>。 - 所有编码均遵循xhtml标准, 标签 & 属性 & 属性命名 必须由小写字母及下划线数字组成, 且所有标签必须闭合, 包括
br (<br />), hr(<hr />)等; 属性值必须用双引号包括。 - 必须为含有描述性表单元素(input, textarea)添加label, 如
<p>姓名:<input type=”text” id=”name” name=”name” /></p>须写成:<p><label for=”name”>姓名: </label><input type=”text” id=”name” /></p>。 - 重要图片必须加上alt属性;重要元素和截断元素要加上title。
- 特殊符号使用: 尽可能使用代码替代: 比如 <(<) & >(>) & 空格( ) & ?(?) 等等。
- 在页面中尽量避免使用style属性,即style=”…”。
- 语义化html, 内联元素中不可嵌套块级元素。
2.3 样式规范
- 文件命名采用小写，用‘-’进行连接。
- 样式统一放在assets/dist/style文件夹（发布版本）和assets/src/style (开发版本)。
- 对于部署出去的项目，样式需要进行压缩。
- CSS书写顺序
-
位置属性(position, top, right, z-index, display, float等)
-
大小(width, height, padding, margin)
-
文字系列(font, line-height, letter-spacing, color- text-align等)
-
背景(background, border等)
-
其他(animation, transition等)
- 使用CSS属性缩写
CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。
- 去掉小数点前的‘0’
-
16进制颜色缩写
有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。
- 在看得懂得前提下进行命名简写
2.4 图片规范
- 图片命名采用小写，用‘_’进行连接。
- 图片统一放在assets/dist/images文件夹（发布版本）和assets/src/images(开发版本)。
- 能用样式的就不用图片，比如“色块”背景。
- 如果页面中有较多的小icon，首先考虑使用webfont,如果webfont不能满足需求（如兼容性）,那么必须使用css sprite将图片合并，减少页面请求提高访问速度。
- 在能保证最不失真的情况下,尽可能的压缩图片文件的大小。
- 命名尽量短，使用缩写，如button用btn，background用bg代替。
- 图片分为通用图片和模块图片。通用图片放在通用图片的文件夹里面，模块图片放在模块图片的文件夹里面。通用图片命名规范：类别_功能[_状态]；模块图片命名规范：模块_类别[_功能][_状态]。
- 图片尽量复用。模块图标被复用后，得改名为通用图标命名方式，并迁移到通用文件夹下，防止修改单个模块图标造成其他模块图标混乱。
- 移除没用到图片，防止项目臃肿。
2.5 脚本规范
-
文件命名采用小写，用‘-’进行连接。（或采用小驼峰）
-
文件编码统一为utf-8,书写过程中，每行代码结束必须有分号。
-
变量命名：驼峰式命名。全局变量不要太多，集中声明，不能覆盖。
-
类命名：首字母大写，驼峰式命名（大驼峰）。
-
函数命名：首字母小写，驼峰式命名（小驼峰）。
-
命名语义化，尽可能利用英文单词或缩写。
-
尽量避免使用存在兼容性或者消耗资源的方法或属性。比如 eval()、innerText。
-
URL传参数值为中文字符（未明确字符）需要进行编码。
-
循环或者条件语句必须使用花括号包围。
-
禁止使用未定义变量，使用变量前必须先定义。
-
对于定义过的变量必须使用。
3、结束语
为提高团队协作效率, 便于开发人员开发及后期优化维护, 输出高质量的代码文档, 希望本文能够给你提供灵感和帮助。若有不合理地方，请不吝指出。
7243
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
