小程序前端规范

因为公司项目代码编写太烂 遂决定写一份小程序规范，顺便分享出来

1.使用指向page自身的this

在每个页面逻辑.js文件里使用let全局声明that变量，在Page()函数的参数onLoad()方法内把this赋给that。app.js里面是onLaunch()。 component 中created()（如有，优先在此写）或attached()。
避免在每个方法里面都声明var that = this

let that
Page({
  ...
  onLoad() {
    that = this
  }
  ...
})

2.优先使用 === 判断
js是动态类语言，使用 == 会涉及到类型转换，应尽量明确变量的类型，使用 ===

推荐
// 输出为false
0 === ''
0 === '0'

不推荐
// 输出为true
0 == ''
0 == '0'
false == '0'
'\t\r\n' == 0

除了你明确知道类型转换的后果，及少数情况可灵活使用，比如

x == null
等同于
x === null || x === undefined

不过在util文件有封装判空的方法，也可以直接调用
整体而言，优先使用===，这是目前js的主流，也方便后来的人更能读懂代码

3.强制类型转换
字符串类型

推荐
const val = String(9)

不推荐
// typeof val 是 "object" 而不是 "string"
const val = new String(9) 
// 会调用 9.valueOf()
const val = 9 + ''
// 不能保证总是返回string
const val = this.reviewScore.toString()

数字类型

推荐
const val = Number('5')
const val = parseInt('5', 10) // 通过第二参数的基数来解析，避免'08'解析为16位

不推荐
const val = new Number('5')
const val = +'5'
const val = '5' >> 0
const val = parseInt('5')

4.优先使用局部变量，避免全局变量污染
尽量避免使用var，优先使用let和const，且一个声明只有一个变量

推荐
let loading = true
let flag = 1
let key= '关键字'
loading = false

不推荐
var loading = true, flag = 1, key= '关键字'
loading = false

不做修改的使用const
对象中的变量赋值时，尽量使用解构赋值

推荐
const { data } = res

不推荐
var data = res.data

5.使用属性值简写

推荐
const name = 'Adair'
const gender = 'man'
const obj = {
  name,
  gender,
  age: '22'
}

不推荐
const name = 'Adair'
const gender = 'man'
const obj = {
  name: name,
  gender: gender,
  age: '22'
}

如果要使用var声明变量，请加上g_前缀
var 方法名使用动词+名词(doSomething)，g_d一般ata (除了isShow这类，方法名避免这样询问的名字)
6.方法声明
强烈建议方法名和变量名区分开，不要同名！
变量名使用名词，方法名使用动词+名词
代码多一点、逻辑复杂点的尽量加一下注释

推荐
getDetails () {},
setDate () {},
initData () {},
showDetails () {},
updateOrder () {}

不推荐
details: [],
details () {}

7.用=>箭头函数取代function声明函数，箭头函数不会改变this指向

推荐
success: res => {
  // 可直接使用this
}
不推荐
success: function () {
  // this的指向发生变化
}
同时建议方法简写，声明函数不带有function
推荐
onload() {}

不推荐
onload: function() {}

8.变量声明
需在wxml上使用的变需要大写量，务必在data中声明注册使用小驼峰命名，不易理解的附上简要的注释
除了特有的名词缩写，一般使用小驼峰

listloading: false, // list接口状态
payStatus: 0, // XX支付状态

使用中文名称，应使用全称

推荐
zhongDuanList: [],
zhegnQiList: []

不推荐
zd: [],
zq: []

具有布尔值或数字1和0的变量标记是和否的,
建议使用is和has、can开头

isShow: false,
hasOrder: false,
canDetele: false

字面量建议使用全大写加下划线方式命名

cosnt MAX_SIZE = 5

只有声明类的时候使用大驼峰

class Person{
    constructor(name){
        this.name = name
    }
}

过多代码集中放在一个方法内，每个方法的功能应尽量单一可重复调用，再在生命周期内调用。

减少不必要的多次setData调用

9.生命周期函数内尽量简洁
生命周期函数里，尽量写必要代码，保持逻辑结构清晰。
将接口请求等大量赋值的操作之类的集中放在一个方法内，每个方法的功能应可考虑单一可重复调用，再在生命周期内调用。

10.方法的定义放在生命周期的后面
参照微信官方指南，生命周期函数放在最前面，自定义的方法放在后面，不要穿插在一起
同时不要定义空方法，除非有特殊用途，请简要注释

推荐
  onLoad (options) {
    // 页面创建时执行
  },
  onShow () {
    // 页面出现在前台时执行
  },
  onReady () {
    // 页面首次渲染完毕时执行
  },
  onHide () {
    // 页面从前台变为后台时执行
  },
  onUnload () {
    // 页面销毁时执行
  },
  onPullDownRefresh () {
    // 触发下拉刷新时执行
  },
  onReachBottom () {
    // 页面触底时执行
  },
  onShareAppMessage () {
    // 页面被用户分享时执行
  },
  onPageScroll () {
    // 页面滚动时执行
  },
  onResize () {
    // 页面尺寸变化时执行
  },
  // 事件响应函数
  onTabItemTap (item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 自定义方法
  viewTap () {
    this.setData({
      text: 'Set some data for updating view.'
    }, () => {
      // this is setData callback
    })
  },
  // 自由数据
  customData: {
    hi: 'MINA'
  }
  
  不推荐
  onload (options) {
    // ...
  },
  onshow () {
    // ...
  },
  doSomeThing1 () {
    // ...
  },
  onAction1 () {
    // ...
  },
  doSomeThing2 () {
    // ...
  },
  onhide () {
    // ...
  },

将多次调用setData的操作，集中放在一起调用，而不是分开逐个调用

11.wxss样式命名
尽量以内容命名，以短横分隔，而不是以布局方式命名
除了少量极为固定单一，布局绝对不轻易做更改的组件样式

推荐
.page-title{}
.page-content{}

不推荐
.page-left {}
.page-right {}

12.wxml标签命名
使用小写方式，以短横分隔，或使用小驼峰
推荐

<page-title />
<pageContent />

不推荐
<page_title />

13.主要命名规则
目录名：采用小驼峰方式。例：directoryName
文件名：采用小驼峰方式。例：fileName
样式： on+以内容命名采用小写方onAction以短横分隔。例：page-content
事件处理方法：建议采用动词+名词方式。例：doSomething
变量名：采用小驼峰命名。例
只有声明js中的class类时使用大驼峰。例如：class Bean () {}如：variationName
方法名：采用小驼峰命名。例如：doSomething()