关于web前端工程师的一些代码规范经验建议
方法/步骤
- 1
项目结构
项目命名规范
项目：用项目对应的英文单词命名
文件及文件夹:
全部英文小写字母，可以使用中线，不可出现其他字符，如login,my-order
调用 `/lib`里面的文件需包含版本号，压缩文件需包含`min`关键词，其他插件则可不包含，如：`/lib/jquery.1.9.1.js`
格式&编码
文本文件： `.xxx` UTF-8_\(无BOM\)_ 编码
图片文件： `.png` _(PNG-24)_ `.jpg` _(压缩率8-12)_
动态图片： `.gif`
压缩文件： `.tar.gz` `.zip``.rar`
- 2
CSS 命名规范
所有的命名用小写的英文单词
不使用简单的方位词直接命名，如"left"，"bottom"
不缩写单词，除非一看就明白的单词
长名称或词组可以使用下划线作为连接符
避免选择器嵌套层级过多，少于3级
不要随意使用id，id应该按需使用，而不能滥用
使用CSS缩写属性 ，比如padding:0 10px 5px 5px等等，这样精简代码同时又能提高用户的阅读体验。
- 3
CSS格式化
使用不换行方式书写，增加书写速度
px像素（Pixel），相对长度单位，像素px是相对于显示器屏幕分辨率而言的。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
rem也是相对长度单位，但相对的只是HTML根元素。
vw代表视窗(Viewport)的宽度为1%，如果视窗宽度为1000px，那么50vw = 500px
vh代表窗口高度的百分，如果视窗高度为800px，那么50vh = 400px
公司项目使用时注意事项：现有项目都是使用px作为单位，现推荐使用rem,vw,vh作为单位
- 4
JS 变量命名
命名方法：小驼峰式命名
命名规范：前缀应当是名词。(函数的名字前缀为动词，以此区分变量和函数)
命名建议：尽量在变量名字中体现所属类型，如:length、count等表示数字类型；而包含name、title表示为字符串类型。
- 5
JS 函数命名
命名方法：小驼峰式命名法
命名规范：前缀应当为动词
命名建议：可使用常见动词约定
- 6
S 常量命名
命名方法：名称全部大写
命名规范：使用大写字母和下划线来组合命名，下划线用以分割单词
示例
- 7
使用短线（-）或句点（.）作为分隔符号，推荐使用句点，最好使用小写英文字符，不要使用其他符号和扩展字符，如 jQuery UI 1.9.0 的源文件可命名为"jquery-ui-1.9.0.js"
使用 .js 扩展名，这个扩展名的兼容性最好。其实任何扩展名都可以，只要是 text 类型、编码正确即可
用句点分隔表示名称中的从属关系，范围大的在前，如jQuery 的表单插件 Form既可以命名为jquery.form.js
- 8
js 注意事项
书写格式
JS 换行缩进：采用tab（打散为4个空格）
结束行需添加分号`;`
性能
尽量选用局部变量而不是全局变量
尽量使用链式写法
尽量减少DOM调用
将js脚本放到页面底部
使用jquery的data来存取数据，减少对dom的操作
使用on方法绑定事件，这是jquery的推荐使用
选择器的选择：尽量不用标签选择器，能用ID选择器的就不用class选择器
- 9
标签使用规范
尽量减少标签层级
双标签必须闭合，单标签用斜线闭合
HTML第一行统一使用HTML5标准<!DOCTYPE html>
一律统一标签结尾斜杠的书写形式：`<br />` `<hr />` 注意之间空格
避免使用已过时标签，如：`<font>` `<frame>` `<s>`
`<img>`标签默认缺省格式：`<img src="#" alt="缺省时文字" />`
`<a>`标签缺省格式：`<a href="#" title="链接名称">xxx</>` 注：`target="_blank"` 根据需求决定
style、link、script可省略type属性，因为 text/css 和 text/javascript 分别是他们的默认值
- 10
注意事项
手机端的自适应布局尽量采用弹性布局，而不是百分比
`css`文件都 置于头部
HTML换行缩进：采用 tab空格
其他效果`js`及`统计代码` 文件置于尾部
手机端的页面都按750px来做，显示效果按375px
图片规范
图片大小：切图时使用web格式保存，减小图片大小
图片尺寸：一律采用整数，如20X20，50X50
图片合并：小图片一律要合并，并保存对应的psd文件，以便后期修改
END