团队规范

⭐⭐⭐⭐⭐

良好的代码书写习惯不仅可以使你的代码更好阅读也可以减少不必要的错误和隐患，为提升开发效率本框架没有启用eslint代码校验，但是请自觉遵守eslint推荐的规则，养成规范的代码书写习惯。

一、项目约定

每位开发者的开发习惯各有千秋、每个项目通常都会有一些规范用于约束成员，使得项目代码不至于天马行空，保证了可读性。本项目采用模块化开发，同样有一些约定需要遵守。 我们以新增一个文章模块为例：

1. 页面命名

列表页固定为 list_模块名称
详情页固定为 form_模块名称
我们将文章模块命名为article，则在前端对应的目录结构中新增一个 article 文件夹，
文件夹内新增列表页 list_article 新增详情页 form_article
有些hooks涉及到页面跳转等，会固定以这样的命名方式去跳转，如果不遵守此约定将产生BUG

2. 前后端命名一致

后端的模块和控制器命名与前端保持一致，并且后端接口大部分命名是固定的，区别只是控制器名称的不同，例如文章模块：
article/addNew 新增
article/update 修改
article/delete 删除
article/queryList 查询列表
article/browse 查询详情
article/select 获取下拉数据
所有的请求均使用 post 方法，这样的约定使得前端在调用接口时省去了大量的重复代码，只需封装一个hooks传入模块名称即可。

二、良好的编码习惯

1. 变量和方法命名见名知意，使用小驼峰命名，避免使用下划线

bad

let a1 = 1  // 坚决杜绝使用让人看了也不知道是啥的字母数字组合
const user_last_login_time = {} // 不要使用下划线命名变量
list(){} // 只写一个list

good

const userLastLoginTime = {} // 小驼峰可读性更高
getUserList(){} // 方法名最好使用动词+名词的组合

2. 方法名定义推荐加上动词前缀

获取数据或值使用 get 前缀，例如： getUserAvatar()
设置数据或值使用 set/update 前缀，例如： updateUserAvatar()
格式化数据使用 format 前缀， 例如： formatUserList()
判断某种条件使用 judge 前缀，例如: judgeIsVipUser()
监听事件或数据变化使用 on 前缀，例如： onSubmitSuccess()
点击事件使用 click/tap 前缀，例如： clickUserAvatar()
跳转新页面使用 navTo 前缀，例如： navToDetailPage()

3. 命名风格全局要统一，有章可循，别这个文件这样，另一个文件又那样了

不是非要一定按照上面的前缀来命名，只要你做到让人一眼看上去就知道这个方法是干嘛的，而且要有规律可循，你可以按自己的喜好来命名。
举个例子：你知道你的某个同事喜欢用 judge 前缀来命名具有判断相关逻辑的方法，那你看他代码时一看到 judge 开头的，不用看内容只看名你就大概知道是干嘛的了，节省下来的时间干别的不香么。

4. 严格控制文件行数，最好保持在500行以下

该拆分的拆分，文件行数过多，可维护性和可读性都很差，别说什么业务本身就很复杂，拆不出来只能说你代码组织能力差。
拆分维度根据你的需求不同而不同，但是大体的思路可以是common通用方法、utils工具方法、页面中的弹窗拆成组件等，还可以根据你的业务逻辑来拆分，总之维度很多，重点是要拆的清晰，一定要避免拆的多而杂，那样还不如不拆。

5. 严格控制代码重复率，不要图方便一味复制粘贴

代码重复率是一个团队代码质量评测一个很重要的指标，显而易见重复代码会占用更多空间，并且会增加维护的困难度，修改你复用的重复代码时很容易漏掉，要耗费额外精力去验证，所以尽量拆出你的复用逻辑，别偷懒，别给自己留坑。

6. 写注释，随手写注释!

不多说，你自己去看看不爱写注释的那位同事的代码，感受一下，你就明白为啥注释这么重要了。方法最好都写注释，变量名等如果你觉得实习生都可以轻松看懂的部分可以不写。

7. 方法、类、组件遵循职责单一原则

内部所做的事情要与名字契合，不要额外写无关的逻辑

8. 使用ES6+语法，简化代码，提高效率

JavaScript语言本身也有一些令人不满意的地方，如变量提升，回调地狱等，ES6+主要是为了解决ES5的先天不足，每一次标准的诞生都意味着语言的完善，功能的加强，2015年就发布了ES6，如果你还在用老语法开发，那就真的脱节了。

9. 不要盲目追求使用新语法和一些奇淫技巧

上面虽然说了，推荐使用ES6+语法，但是要补充一句，不是让你全盘使用新特性，对于ES新特性大家要做到全面地了解，有选择地应用。

• 有些新特性并不是很好用，或者用处不是很大，用了之后反而增加他人阅读成本和编译成本，选择常用实用的特性就可以，可以参考下推荐使用的新特性，仅供参考哈。
• 根据自己所处的公司和团队环境做相应的取舍，大家对新特性的了解程度不一样，随意地使用较新的特性可能会让团队成员看不懂，如果要使用一定加好注释。
• 某些奇淫技巧也是一样，看团队可以接受的程度，如果你想秀操作最好使用时加好注释，有的团队会更注重代码可读性，会明确规定不让使用一些花里胡哨的写法，比如：

const num = ~~'1'

用~~把字符串转换成数字，但明显使用Number('1')可读性更好，相比于那一点点微乎其微的性能提升，显然可读性更重要。

10. 列表渲染和条件渲染写在标签的第一个属性

// Vue
<div v-if="show" id="" class=""></div>
<div v-else id="" class=""></div>
// 小程序
<view wx:if="{{show}}" id="" class=""></view>
<view wx:else id="" class=""></view>
<view wx:for="{{list}}" wx:key="index" id="" class="" data-index="{{index}}" bindtap="clickBtn" ></view>

11. css属性顺序

css属性的书写顺序也可以遵循一套规则，使用stylelint插件stylelint-config-recess-order可以自动调整你的属性顺序。

1. Positioning：定位相关，如position、top/bottom/left/right、z-index等
2. Box model：盒模型相关，如display、float、margin、width/height等
3. Typographic：排版相关，如font、color、line-height等
4. Visual：可视相关，如background、color等
5. Misc：其他，如opacity、animation等

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

12. 能使用CSS实现的尽量不要用JS

CSS功能现在越来越强大，用好CSS可以省去很多代码。

1. 比如：:first-child、:last-child、:nth-child(2n+1)、:not(:first-child)等等
2. 使用 flex 的 order 属性控制元素顺序
3. 还有一些简单的图形如倒三角使用CSS写就行，没必要切图，图片多了也会影响整体性能

三、eslint常用规则

1.对于变量和函数名统一使用驼峰命名法 camelcase

function myFunction () { }
const myVar = 'hello'

2.使用两个空格进行缩进 indent

function hello (name) {
  console.log(name)
}

3.字符串统一使用单引号 quotes

console.log('hello world')

4.逗号后面要加空格 comma-spacing

const list = [1, 2, 3, 4]
function test (name, options) { ... }

5.字符串拼接操作符之间要留空格 space-infix-ops

const message = 'hello, ' + name + '!'

6.多行 if 语句的的括号不能省 curly

if (options.quiet !== true) {
  console.log('done')
}

更多规则请参考eslint规则