WEB前端开发规范文档目录TOC o 1-1 h u 14480 WEB前端开发规范文档 1 11863 规范目的 3 24523 基本准则 4 11722 文件规范 5 3243 HTML书写规范 6 1437 HTML其他规范 6 18806 CSS书写规范 7 25483 JavaScript书写规范 8 20323 开发及测试工具约定 8 23752 其它规范 9规范目的为提高团队协作效率，便于项目参与开发人员添加功能及后期维护，输出高质量代码，特制此文档：本文档规范一经确认，前端开发人员必须按本文档规范进行开发；本文档有不对或者不合适的请及时指出，经讨论决定后方可更改。基本准则符合web标准，语义化html，遵循内容（HTML）、显示（CSS）、行为（JavaScript）分离的代码组织模式。代码格式化，保持干净整洁。缩进必须为2个空格，不允许使用制表符缩进。每一个Vue文件编写css必须在style/style标签中添加scoped属性，禁止在vue文件中编写全局样式。编辑器插件严禁安装影响代码格式的插件。css需注意层级关系，嵌套过深影响性能，严禁嵌套超过4层。css中不允许使用id与 * 选择器。
H5或小程序布局使用flex布局。H5适配使用flexible.js方案，将px转为rem单位。JavaScript中运算符“/ * - + = ()”两侧应使用空格间隔，提升代码阅读性。Vue文件中template内标签属性过长应将属性换行展。文件规范Vue文件命名应遵循项目统一规范，按照模块分类。Api方法应在不同模块根目录声明，方便维护管理。Api编写规范：HTML书写规范所有标签名与属性都必须小写。标签中无特殊情况原则上不使用style属性，样式都使用class声明。id命名必须为小驼峰式命名。class命名必须用“-”间隔，元素简写-功能名称：btn-save。属性必须使用双引号，禁止使用单引号。自定义属性均使用data-xxx方式命名。HTML其他规范文档类型声明及编码统一为html5声明类型!DCOTYPE html；编码统一为meta charset=”UTF-8” /，利用ide缩进需层次分明。非特殊情况外链样式必须在head/head之间引入。非特殊情况外链JavaScript必须在body最后/body之前引入。引入外链时需略去默认类型声明。引入外链样式或JavaScript文件必须为压缩版。
所有标签都必须闭合。遵循语义化标准使用对应功能的html标签。给重要功能的标签添加title属性，提升用户体验。特殊符号使用转义字符：空格 nbsp; gt;。CSS书写规范非特殊情况不允许使用id选择器匹配标签书写样式。“{”之前需用空格与选择器间隔。一条样式必须一行写完，不允许换行，自动换行除外。标签元素选择器只允许在全局样式或带有scoped属性的style标签中出现，其他地方禁止使用：input, div, a, span, form等元素选择器。样式中出现中文字体时必须转为unicode编码，以免编码错误乱码：font-family: “微软雅黑” = font-family: u5faeu8f6fu96c5u9ed1使用table标签时不允许使用标签自带属性布局，比如：cellspacing/cellpadding等；必须使用css控制样式。css也需要按照模块添加注释，方便查找维护。JavaScript书写规范声明变量必须换行，一个声明语句一行代码：let a = 1;let b = 2;变量声明必须为小驼峰方式声明。每个方法都必须遵循doc文档格式注释，文档规范地址： 每个循环都必须有注释，方便添加功能与维护。
函数命名必须为小驼峰方式命名；事件函数命名尽量使用handle前缀。不允许使用缩写方式编写代码：(条件) (代码块) // 严禁使用该种方式编写代码每个if都应该有 {} ，不允许出现缩写。变量与函数等声明命名必须遵循语义化规范。换行后出现新的代码块应该遵循缩进规则，具体规范可查看第一页基本准则第3条。开发及测试工具约定推荐使用 vscode 编写代码，亦可根据自己的喜好选择，但必须遵循以下规则：不可利用IDE的视图模式‘画’代码，比如：DW不可利用IDE生成相关功能代码，比如DW内置的功能js代码缩进格式必须遵循基本规则第3条规定。开发浏览器建议使用Chrome浏览器，并安装vue-devtools扩展，安装文件与说明文档在随附文件内。功能开发完成后必须自测，提测时不允许开发交给测试的功能出现阻断性bug，出现一个直接打回。交互规范在列表数据编辑保存后应刷
