项目中最实用的前端开发规范

前端的开发规范其实不需要定的太细，掌握好原则即可，依据这些原则，再去根据项目制定具体的要求，就可形成相关文档。比如，定好主题颜色后即可根据主题确定具体的颜色、字体、边框、边距、图标等。

根据之前做过的项目，我总结了20条原则，作为后期前端开发规范，无法面面俱到，仅供参考。

1、必须使用构建工具，坚持前后端分离。

2、缩进规范，排版清楚。

3、注释详细。

4、发布的代码中没有debugger

5、图标采用webfont，尽可能不随意引入图片

6、文件结构合理，分类清楚。

7、尽可能采用绝对路径，以免路由或代理引起的路径错误。

8、所有页面主题风格一致，用色和谐，不特立独行。

9、JS代码采用严格模式，“use strict”;HTML采用XHTML格式。

10、注意变量前加var/let/const，每个语句后加;，不能省，可使用ESLINT做检查。

11、代码中不要保留大段的注释(废弃不用的代码)和大量的空行。

12、变量定义尽量放到文件或函数的前面。

13、CSS尽量放在单独的文件中，注释样式的顺序，避免多余的重绘和重排。

14、避免使用一个小功能引入一个大框架，物尽其用。

15、公共方法、组件提取封装，以便复用。

16、优先使用ES6及以上的新特性，兼容Chrome,Safari,Firefox以及其他webkit内核浏览器。

17、变量命名要有意义。

18、注意安全性，做好水印、埋点。

19、对页面加载进行优化，代码逻辑清楚，逻辑调用有备注指引，需求变更需要注明。

20、样式与模板分离、模板与数据分离。