web前端开发规范

规范概述

一个人走的更快，一群人可以走的更远，前提是统一的策略，还要不断地反省和优化。不管有多少人共同参与同一项目，尽可能确保每一行代码都像是同一个人编写的

开发目录规范开发环境规范开发编码规范

一、目录及文件命名规范

(一)、例静态专题页目录

-src/html源代码-img/image/images图片资源-jsJavaScript脚本-dep/development/package第三方依赖包

（二）、例管理端项目目录

-project--static/public静态文件--js--css--tpl--index.html...--src源代码（逻辑）--common公共资源--img--css...--component组件--home--login...--api接口请求--view/page模板文件

（三）、命名规范

目录，文件名称统一小驼峰命名法。productDetail.html

二、环境要求

（一）、开发环境统一

Node.js 8.9 或更高版本，你可以使用 nvm 或 nvm-windows 在一台电脑中管理多个 Node 版本使用VS Code进行代码编写规定 Tab 大小为 2 个空格，保证在所有环境下获得一致展现(settings.json文件修改"editor.tabSize": 2)安装插件 Vetur（ Vue开发扩展及 Vue 文件代码格式化）使用 Chrome 浏览器并安装 Vue.js devtools 进行调试

三、编码规范

（一）、HTML / Template 编码规范

HTML换行缩进：采用 tab空格尽量减少标签层级双标签必须闭合，单标签用斜线闭合行内元素里面不可使用块级元素 href="https://www.cnblogs.com/catchFish-ing/test">

避免使用已过时标签，如：font对于属性的定义，使用双引号，不要使用单引号为每个 HTML 页面根元素添加 lang 属性 lang="zh-CN">通过声明一个明确的字符编码，让浏览器轻松、快速的确定网页内容渲染方式，通常指定为UTF-8

.....

【语义化】尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价；任何时候都要尽量使用最少的标签并保持最小的复杂度

（二）、css / Less / Sass 编码规范

类名使用小写字母，以中划线分隔id 采用驼峰式命名Less / Sass 中的变量、函数、混合等采用驼峰式命名所有声明语句都应当以分号结尾 最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错,尤其压缩打包出错选择器不要超过4层（在Less / Sass中避免嵌套超过4 层）缩进使用两个空格代替 Tab为选择器分组时，将单独的选择器单独放在一行每条样式声明应该独占一行尽可能不要使用行内（inline）样式组件之间的完全解耦，不会造成命名空间的污染，如：.mod-xxx ul li 的写法带来的潜在的嵌套风险。选择器权重（样式覆盖）非通用样式使用嵌套方式进行编写，避免影响其他自己不了解样式，造成样式覆盖Vue 中样式谨慎使用 scoped，会影响样式选择器性能，请使用第一点进行特有样式编写样式需要修改时，尽量找到原样式声明进行修改属性的书写顺序, 举个例子.box{/* 定位 */display:block;position:absolute;left:0;top:0;/* 盒模型 */width:50px;height:50px;margin:10px;border:1pxsolid black;/ *其他* /color:#efefef;}定位相关, 常见的有：display position left top float 等盒模型相关, 常见的有：width height margin padding border 等其他属性

（三）、JavaScript 编码规范

常量建议还是使用大写字符+下划线命名。 const PRICE_MAX=10000;函数按职责命名，一般都是动词开头。 function setUserInfo(){}变量不要先使用后声明不要在同个作用域下声明同名变量在必要的地方添加非空判断以提高代码的稳健性使用===代替==，!==代替!=（==会自动进行类型转换，可能会出现奇怪的结果）使用三目运算代替简单的 if-elseletcount=100;count=seat<5?20:seat<10?60:90;正确使用 null不要用null来判断函数调用时有无传参不要与未初始化的变量做比较正确使用 undefined不要直接使用 undefined 进行变量判断使用typeof和字符串 undefined 对变量进行判断不要给变量赋值 undefined（undefined 本身就表示一个变量未定义）普通函数：首字母小写，驼峰式命名，统一使用动词或者动词+名词形式,如：fnGetVersion()对象方法与事件响应函数：对象方法命名使用fn+对象类名+动词+名词形式,如：fnAddressGetEmail()事件响应函数：fn+触发事件对象名+事件名或者模块名，如：fnDivClick()

【常用的动词】

get获取/set设置,add增加/remove删除create创建/destory移除start启动/stop停止open打开/close关闭,read读取/write写入load载入/save保存,create创建/destroy销毁begin开始/end结束,backup备份/restore恢复import导入/export导出,split分割/merge合并inject注入/extract提取,attach附着/detach脱离bind绑定/separate分离,view查看/browse浏览edit编辑/modify修改,select选取/mark标记copy复制/paste粘贴,undo撤销/redo重做insert插入/delete移除,add加入/append添加clean清理/clear清除,index索引/sort排序find查找/search搜索,increase增加/decrease减少play播放/pause暂停,

(四)、 编写注释

公共组件需要在文件头部加上注释说明：/***文件用途说明*作者姓名、联系方式（旺旺）*制作日期**/注释单独一行，不要在代码后的同一行内加注释：// 个人信息p.s. 部分编写思路参考别的码友，welcome您的观光,感谢！