前端项目规范

全局规范&配置

一、开发规范

1.1：HTML规范

标签及属性值，尽量简易并符合语义化；

尽可能避免div过多嵌套（5层以上），影响网页加载速度；

重要图片必须加上alt属性，当图片不能正常显示时，则显示alt中的文字；

标签内有多个属性，应当分行写，提高可阅读性；

1.2：CSS规范

全局公共样式在 src\styles\index.scss中书写；

class命名采用小写字母，以中划线分割；如：.padding-content；

Id、Scss中的函数、变量等命名采用驼峰命名；如：roleManage；

使用scoped约束样式生效范围，使用::v-deep样式穿透,加快编译速度;

*：尽量避免子选择器层次过多以及标签选择器，省略零（0）后面的单位；

1.3：Js规范

方法名、参数名、变量名、局部变量统一使用小驼峰命名风格；如：saveTrackData；

命名格式采用：动词+名词，尽量语义化；如：getTraceList；

尽量使用模板字符串取代连接字符串；

Promise 回调函数，成功统一为 res，错误为 err；

*：不要使用 undefined 进行变量判断，使用 typeof 和字符串’undefined’对变量进行判断

1.4：注释规范

以下建议添加注释：

接口说明;

公共组件、函数使用说明;

vuex 中的 state, mutation, action;

组件data中的非常见单词，methods中的函数;

*：console.log()、debugger使用完及时删除

1.5：Vue规范

组件中name采用大驼峰命名，如：SendTrackEdit

*：需保证唯一性，如果添加keepAlive对页面缓存，需与路由name一致；

避免v-if和v-for用在一起，引起性能消耗；

为v-for设置Key值，便于diff算法优化；

弹框等需要大量代码去实现，以组件的方式引入；

函数中统一使用self=this来解决全局指向问题；