规范
命名规范
命名分类
camelCase（驼峰式，也叫小驼峰命名，e.g. userInfo）PascalCase（帕斯卡命名式，也叫大驼峰命名，e.g. UserInfo）kebab-case（短横线连接式，e.g. user-info）snake_case（下划线连接式，e.g. user_info）
变量命名
- 命名方式 : 小驼峰式命名方法
- 命名规范 : 类型+对象描述或属性的方式
// bad
var getTitle = "LoginTable"
// good
let tableTitle = "LoginTable"
函数命名
- 命名方式 : 小驼峰方式 ( 构造函数使用大驼峰命名法 )
- 命名规则 : 前缀为动词
动词 含义 返回值
can 判断是否可执行某个动作 (权 ) 函数返回一个布尔值。true：可执行；false：不可执行
has 判断是否含有某个值 函数返回一个布尔值。true：含有此值；false：不含有此值
is 判断是否为某个值 函数返回一个布尔值。true：为某个值；false：不为某个值
get 获取某个值 函数返回一个非布尔值
set 设置某个值 无返回值、返回是否设置成功或者返回链式对象
推荐：
//是否可阅读
function canRead(){
return true;
}
//获取姓名
function getName{
return this.name
}
常量命名
- 命名方法 : 全部大写
- 命名规范 : 使用大写字母和下划线来组合命名，下划线用以分割单词。
推荐：
const MAX_COUNT = 10;
const URL = 'http://test.host.com';
类命名
- 类名大写
- 公共属性和方法 : 小驼峰
- 私有属性和方法 : 下划线(_) + 小驼峰
html规范
-
如没有children，使用单标签
<div>children</div> <div></div> -> <div />
css规范
- 类名使用小写字母，以中划线分隔
- id 使用小写字母，以下划线分隔（区分类名）
- scss 中的变量采用大写，以下划线分隔，函数、混合采用驼峰式命名
- 嵌套层级不要超过三层
- 过度嵌套导致代码变得臃肿、复杂，代码可读性会降低
- 打包后的css文件大小会变大，影响加载速度
- css解析规则是从右到左，可能会影响性能（目前未找到有相关论证的文章）
- 不要在ID选择器前面进行嵌套其它选择器
- ID在页面就是唯一的，css解析规则是从右到左，ID选择器前进行嵌套是多余的
js规范
- 使用es6语法
- 禁止回调地狱
vue规范
- 单个vue文件代码行数不要超过500行
- 代码行数较多时应考虑进行拆分
- 非全局组件css必须添加scoped
- 防止样式污染
- 非必要不直接通过js操作dom
- 直接操作dom耗性能，交给vue去处理
- 通过addEventListener手动添加的事件，不需要时务必删除
- 防止内存溢出，比如在mounted中添加，在beforeDestroy中删除
- 提交类的按钮必须防止多次执行
- 通过添加disabled、loading交互
- 通过添加节流、防抖
- 模板语法中禁止进行复杂的计算
- 模板语法保持简单，通过函数或计算属性等返回计算的结果
- 尽量不使用内敛样式，使用类名设置样式
- 一次性更新响应式变量中的对象
- 不要分多次，每次更新对象中的一个key
// bad case this.obj.a = 1; this.obj.b = 2; this.obj.c = 3; // right case this.obj = { a:1, b: 2, c: 3 } - 嵌套三层及以上的组件传参
- 如果页面较为复杂且公用数据较多，考虑使用
vuex - 如果页面复杂程度一般，考虑使用
provide/inject - 使用
$attrs/$listeners透传，结合inheritAttrs（避免属性渲染到 HTML 的原生标签上） - 最后考虑
props传参
- 如果页面较为复杂且公用数据较多，考虑使用
