命名规范
驼峰式命名法
- 小驼峰式命名法： 首字母小写。eg: goodList、userInfo (推荐)
- 大驼峰式命名法： 首字母大写。eg：GoodList、UserInfo
文件命名
- 文件名不能含有空格
- 文件名建议只用小写字母，不使用大写字母。
- 文件名包含多个单词时，单词之间使用(-)分割。
变量命名
命名方式：小驼峰式方式
命名规范：对象+属性的描述方式
const goodNums = 10 // good
const num = 10 // bad函数
命名方式：小驼峰方式（构造函数使用大驼峰命名，私有方法加 _ 下划线]）
命名规范： 动词+名词
- can 判断是否可执行某个操作
- is 判断是否为某个值
- has 判断是否含有某个值
- get 获取某个值
//获取姓名
getName = () => {
// do something
}
//是否能进行下一步
canNext = () => {
// do something
}注释规范
单行注释 （ // ）
- 单独一行： // 与注释文字之间保留一个空格
- 在代码后面添加注释：//(双斜线)与代码之间保留一个空格，并且//(双斜线)与注释文字之间保留一个空格。
// 这是单独一行的注释
goodList.map(v => ({...v, goodNum: 2}))
const myName = 'ainier' // 在代码后面添加注释
多行注释 （/* 说明 */）
- 若开始(/
*和结束(*/)都在一行，推荐采用单行注释 - 若至少三行注释时，第一行为/
*，最后行为*/，其他行以*开始，并且注释文字与*保留一个空格。
/*
* 代码执行到这里后会调用getGoodList()函数
* getGoodList()：获取商品列表
*/
getGoodList();css规范
类名命名方式
- 单个单词： 小写字母
- 多个单词： 中间用（-）隔开
- 变量： 中间用（_）下划线隔开
// bad
.Name {
height: 50px;
}
// good
.name {
height: 50px;
}
// bad
.is_high {
...
}
// good
.is-high {
...
}
// good
<div :class="is_high" />选择器分行
每个选择器都另起一行，代码看起来美观
h1,
h2,
h3 {
...
}属性简写
尽量使用 CSS 中可以简写的属性 (如 padding)，可以提高编码效率以及代码可读性。// bad
padding-top: 15px;
padding-right: 15px;
padding-bottom: 20px;
// good
padding: 15px 15px 20px 0; // 值为0时不添加单位js规范
对象
1. 使用字面值创建对象。
const obj = new Object(); // bad
const obj = {} // good2. 适用对象属性值简写
const name = 'ainier'
// bad
const people = {
name: name,
}
// good
const people = {
name,
}
3. 把简写的属性提前
const name = 'ainier'
// bad
const people = {
age: 22,
name,
height: 180,
}
// good
const people = {
name,
age: 22,
height: 180,
}函数
1. 当必须使用函数表达式（或传递一个匿名函数）时，使用箭头函数。
// bad
[1, 2, 3].map(function(x) {
// do something
})
//good
[1, 2, 3].map((x) => {
//do something
})
2. 如果一个函数适合用一行写出并且只有一个参数，那就把花括号、圆括号和 return 都省略掉。如果不是，那就不要省略。
// good
array.map(x => x*2)
// good
array.reduce((total, n) => {
return total + n
}, 1)代码块
1. 使用大括号包裹多行代码块。
// bad
if (next)
return true;
// good
if (next) return true;
// bad
function () { return false; }
// good
function () {
return false;
}
2. 如果通过 if 和 else 使用多行代码块，把 else 放在 if 代码块关闭括号的同一行，并且前后用空格隔开。
// bad
if (next) {
// go next
}
else {
// do something
}
// good
if (next) {
// go next
} else {
// do something
}
三元运算符的使用
在比较简单的情况下使用，避免在复杂情况下使用
// bad
if(x === 1) {
return '商家'
} else {
retrun '美导'
}
// good
cosnt type = x === 1 ? '商家' : '美导'
mpvue 开发注意
以下为mpvue开发过程中遇到的问题，各位同事在开发过程中应尽量避免，欢迎补充~
- 避免使用created生命周期，由于小程序本身设计是会在刚打开的时候就初始化所有的page，所以会直接触发created生命周期。 详见(github.com/Meituan-Dia…)
- 传递Number类型的参数时，在接受时变成了String类型 (小程序自身机制)
- 下拉刷新&&上拉加载。避免在根元素使用scroll-view组件，这样会导致页面监听不到下拉刷新事件。而且包裹在scroll-view中的定位元素在滚动的时候会出现定位抖动（目前还不知道具体什么原因）
