目录
此文参考 Denson / 微信小程序开发规范文档
JavaScript数据交互规范
网络请求(wx.request)
1. loading提示优化
loading提示能让用户知道当前的操作进度，合理地显示loading提示，有助于提升产品气质和用户体验。
通常我们认为，发起请求即显示loading提示，请求完成隐藏loading提示。用户所处的网络环境较差时，loading提示会正常显示隐藏，用户所处网络环境良好时，loading提示会闪一下。大多时候用户所处的网络环境都是良好的，网络请求能即时返回结果，此时就没必要显示loading提示，也可以避免那尴尬的一闪。
团队约定
网络请求在800毫秒内返回了结果，不显示loading提示，超过800毫秒还未返回结果开始显示loading提示。
实现思路
在请求之前声明一个变量loadingStatus来控制loading提示何时显示。loadingStatus有以下两个值，分别代表二个状态：
| 值 | 状态说明 | 是否显示loading提示 |
|---|---|---|
| 1 | 初始值 | 显示 |
| 0 | 请求完成 | 不显示 |
let loadingStatus = 0;在请求之前放置一枚定时器，这个定时器在800毫秒之后执行，在其内控制是否显示loading提示。
/*
* 定时器在800毫秒后执行时，会判断loadingStatus状态，
* 如果loadingStatus还是初始值1（没有被改变过），就显示loading提示。
* 如果loadingStatus不是1，说明网络请求已返回（此时loadingStatus的值应该是0）。
*/
setTimeout(() => {
if (loadingStatus === 1) {
wx.showLoading({
title: '加载中...'
})
}
}, 800);
在wx.request参数的complete里改变loadingStatus的值
wx.request({
...
complete: function () {
// 请求完成，改变loadingSataus的值
loadingSataus = 0;
}
})
完整流程
...
getUserInfo: function () {
// 其它代码...
let loadingStatus = 1;
setTimeout(() => {
if (loadingStatus === 1) {
wx.showLoading({
title: '加载中...'
})
}
}, 800)
// 开始请求
wx.request({
url: 'your api url',
method: 'GET',
data: {
userid: 123456
},
success: function (res) {
// 处理返回结果
},
fail: function () {
// 处理失败
},
complete: function () {
// 请求完成，关掉loading，改变loadingSataus的值
wx.hideLoading();
loadingSataus = 0;
}
})
},
...2. 限制重复请求
我们的程序里有很多个请求，某个网络请求在未完成的情况下，该请求不应该再被发起，必须加以限制，保证业务流程有序进行。尽管 有些限制在后端处理了，但前端也必须加以限制，把隐患扼杀在摇篮。
连续的重复请求不加限制，会让前端程序数据错乱（如列表类数据加载），也会给后端造成不必要性能的负担，甚至引起数据库数据错乱。如：签到，领取积分，点赞（听说手快能多点几个）。
实现思路
在全局声明一个requestStatus用来控制请求是否能再次发起。
| 值 | 状态说明 | 是否允许发起请求 |
|---|---|---|
| -1 | 初始值，请求从未发起过 | 允许 |
| 0 | 正在请求中 | 不允许 |
| 1 | 请求完成 | 允许 |
onLoad: function () {
/*
* 当requestStatus为-1或1时可以再次发起网络请求，为0时不可发起。
*/
this.requestStatus = -1;
} 在发起请求之前通过requestStatus判断是否能发起请求。
// requestStatus值为0，表明已经有一个当前的请求在执行，不能再次发起请求，中断操作。
if(that.requestStatus === 0) {
return;
}
// 如果可以发起请求，发起之前把requestStatus值改为0
this.requestStatus = 0;
请求完成，在wx.request参数的complete里改变requestStatus的值
// 其它代码...
complete: function () {
// 把requestStatus的值改为1
this.requestStatus = 1;
}完整流程
...
onLoad: function () {
this.requestStatus = -1;
}
...
getUserInfo:()=> {
// 进入请求之前，检查是否可以发起网络请求
if(this.requestStatus === 0) {
return;
}
// 如果可以请求，就把requestStatus的值改成0
this.requestStatus = 0;
// 开始请求
wx.request({
url: 'your api url',
method: 'GET',
data: {
userid: 123456
},
success: function (res) {
// 请求成功的代码
},
fail: function () {
// 请求失败的代码
},
complete: function () {
this.requestStatus = 1;
}
})
},
...3. 请求错误处理
不管网络请求返回错误error还是请求失败fail，都应该反馈给用户。
部分开者开发过程中处理网络请求结果时，只处理请求成功返回成功的结果，而对返回错误和请求失败没做处理，这是不科学的。（数据没有请求成功，又不给用户对应的错误反馈，用户会一脸懵比的。）
团队约定
为了方便开者准确定位错误和更舒适的用户体验，每个网络请求必须处理请返回错误error和请求失败fail，并适当地反馈给用户。
wx.request参数的fail方法必须写法。
getUserInfo: function () {
...
wx.request({
url: 'your api url',
method: 'GET',
data: {
userid: userid + ''
},
success: function (res) {
if (res.data.code === 200) {
// 请求成功，返回成功
// ...
} else {
// 请求成功，返回错误
wx.showToast({
title: '数据返回错误',
image: '/images/toast_warning.png',
duration: 1000
})
}
},
fail: function () {
// 请求失败
wx.showToast({
title: '请求失败',
image: '/images/toast_warning.png',
duration: 1000
})
},
complete: function () {
// 不管是请求成功还是失败
}
})
},
ps：
Page参数内的方法声明顺序
使用微信开发者工具新建一个Page时，在
.js的Page函数的参数内自带了一些属性和方法，自定义方法放在这些方法后面。
JavaScript格式规范
前奏
约定JavaScript使用ES6标准开发
wxs(WeiXin Script)和JavaScript是不同的语言，有自己的语法，wxs请参考wxs文档，这里的规范仅针对js。
变量命名
关于变量命名，主流分为驼峰式命名和下划线式命名两大阵营。我们约定，统一使用驼峰式命名。
- 推荐写法
let userId = 654321; function getUserInfo () { .... } - 不推荐写法
let user_id = 654321; function get_user_info () { .... }
分号
尽管现在JavaScript引擎知道该在什么情况下自动添加分号，由于项目历史原因和避免代码压缩时产生不必要的问题，我们约定使用分号。分号紧跟代码的最后一个字符。
- 推荐写法
let loading = -1;- 不推荐写法
let loading = -1 ;
逗号
逗号分割列表时，逗号放置在当前行的末尾。
- 推荐写法
let bar = 1, foo = 2;- 不推荐写法
let bar = 1 , foo = 2;
数组（或对象）的最后一个元素（或属性）后面的逗号是拖尾逗号，示例：
let o = {
a: 1,
b: 2, // 拖尾逗号
}
对于数组和对象，最后一个元素或属性与右括号]或}不在同一行时，可以（但不要求）使用拖尾逗号；在同一行时，禁止使用拖尾逗号。
- 推荐写法
let arr = ['name', 'age', 'gender', ] let o1 = {a: 1,b: 2}; let o2 = { a: 1, b: 2, };- 错误写法
let arr = ['name','age','gender',] let o1 = {a: 1,b: 2,}
同一行内代码用到逗号，逗号后面加一个空格字符，提高代码可读性。
- 推荐写法
let bar = 1, foo = 2; let arr = [1, 2, 3, 4, 5];- 不推荐写法
let bar = 1,foo = 2; let arr = [1,2,3,4,5]
缩进
统一使用2个空格字符进行代码缩进。
操作符前后加一个空格字符。
- 推荐写法
let a = 1 + 2;- 不推荐写法
let a = 1+2;
函数
函数声明式声明函数时，函数名与参数括号()连在一起，之间不加空格；参数括号()与函数体的左大括号{之间一个空格字符。
- 推荐写法
function getInfo(userId) { ... }- 不推荐写法
function getInfo1 (userId) { ... } function getInfo2(userId){ ... }
函数字面量里，关键字function与参数括号()之间一个空格字符，参数括号()与函数体的左大括号{之间一个空格字符。
- 推荐写法
let getInfo = function (userId) { ... }- 不推荐写法
let getInfo1 = function(userId) { ... } let getInfo2 = function(userId){ ... }
函数调用时，禁止有空格。
- 推荐写法
getInfo();- 错误写法
getInfo ();
对象字面量
对象字面量的属性名和冒号:之间不能有空格字符，冒号:和属性值之间一个空格字符。
- 推荐写法
let o1 = { a: 1, b: 2, c: 3 } let o2 = { e: 5, f: 6, g: 7, }- 不推荐写法
let o1 = { a:1, b :2, c : 3} let o2 = { e:5, f :6, g : 7, }
对象字面量在一行内时，左括号{和右括号}与代码各间隔一个空格字符。
- 推荐写法
let o1 = { a: 1, b: 2, c: 3 }- 不推荐写法
let o1 = {a: 1, b: 2, c: 3}
单行代码
在单行代码中使用空格。
- 推荐写法
function foo() { return true } if (true) { return true }- 不推荐写法
function foo(){return true} if(true){return true}
代码块
大括号{}包裹起来的代码叫代码块，示例：
{
let userId = 654321;
}
代码块前统一加一个空格字符
- 推荐写法
if (true) { return '成功！' } function getInfo() { ... }- 不推荐写法
if (true){ return '成功！' } function getInfo(){ ... }
计算属性
在对象的计算属性内，禁止有空格。
- 推荐写法
obj['name']- 不推荐写法
obj['name' ] obj[ 'name']
空行
空行对分离代码逻辑有帮助，但过多的空行会占据太多的屏幕空间，影响代码可读性。我们约定，最大连续空行数为2。
推荐写法
if(true) { console.log('成功！'); } function getUserInfo () { ... }不推荐写法
if(true) { console.log('成功！'); } function getUserInfo () { ... }
在非空文件中，拖尾空行可以减少版本控制时的代码冲突。
- 推荐写法
function getUserInfo () { ... } // ↑上面一行是空行
- 不推荐写法
function getUserInfo () { ... }
大括号{}风格
用来描述大括号{}与代码块相对位置的方法很多，如下：
我们约定，使用风格一。
- 风格一
if (true) { console.log('true'); } else { console.log('false'); }- 风格二
if (true) { console.log('true'); } else { console.log('false'); }- 风格三
if (true) { console.log('true'); } else { console.log('false'); }我们约定，使用风格一。
JavaScript注释规范
注释
注释分为单行注释和多行注释。
单行注释以//开头。
多行注释以/*开始，以*/结束。
/* * 多行注释 * 示例 */
团队约定
单行注释
一般用于简单的描述，如状态描述，属性描述等。书写时应遵循以下规范：
- 注释符号
//与注释内容之间一个空格字符 - 注释位于注释代码上面
- 单独占一行
示例
- 推荐写法：
// 初始化 let statusCode = -1;- 不推荐写法：
let statusCode = -1; // 初始化
多行注释
一般用于描述某一块代码的功能，逻辑思路，或参数说明等。书写时应该遵循以下规范
- 注释开始符号
/*和结束符号*/各占一行 - 结束符号
*/前面加一个空格字符 - 代码块与代码块之间相隔一行
示例
- 推荐写法：
/* * 多行注释 * 多行注释 * 多行注释 */- 不推荐写法：
/* 多行注释 * 多行注释 * 多行注释 * 多行注释 */ /* 多行注释多行注释 */
文件注释
文件注释位于文件的最前面，主要是对当前这个文件的代码做个整体说明或注意的事项
示例
- 推荐写法：
/*! * jRaiser 2 Javascript Library * sizzle - v1.9.1 (2013-03-15T10:07:24+0800) * http://jraiser.org/ | Released under MIT license * * Include sizzle (http://sizzlejs.com/) */
javascript语言规范
前奏
约定JavaScript使用ES6标准开发
wxs(WeiXin Script)和JavaScript是不同的语言，有自己的语法，wxs请参考wxs文档，这里的规范仅针对js。
关键字
任何时候，避免使用语言保留关键字命名。
变量声明
使用let代替var声明变量，
let loadding = -1; loadding = 0;
使用const声明常量，常量名要求大写，多个词之间以下划线_连接。
const { HOST, GET_URL } = require("../../utils/api.js");
js允许一个声明可以有多个变量。我们约定，一个声明只有一个变量。
- 推荐写法
let a = 0; let b = 1; let c = 2;- 不推荐写法
let a = 0, b = 1, c = 2;
字符串
字符串统一使用单引号''，不使用双引号""
let title = '标题标题标题标题标题标题标题';
字符串需要换行或由代码生成的字符串时使用模板字符串 ``
- 推荐写法
// 字符串换行 let content = `文本文本文本文本文本文本文本文本文本`; // 代码拼接生成字符串 let editor = '编辑内容'; let text = `本文本文本文本文本文${editor}`;- 不推荐写法
// 字符串换行,使用 \n let content = '文本文本文本文本文本文本文本文本文本、 \n 文本文本文本文本文本 \n文本文本文本。'; // 代码拼接生成字符串 let editor = '编辑内容'; let text = '本文本文本文本文本文' + editor;
函数
使用箭头函数。箭头函数不仅简洁，还可以保留this指向
[1,2,3].map((item, index) => {
let res = item + index;
return res + 1;
});
函数只有一个参数时，参数的()省略:
let show = a => {
alert(a*2);
}
函数体只有一个return语句时，函数体的{}省略：
let show = (a,b) => a+b;
数组
使用字面量创建数组
let arr = [];
使用新方法forEach，map，filter，reduce处理数组数据，代码书写更简洁
- 推荐写法
// 取出数组里的偶数 let arr = [1,2,3,4,5,6,7,8]; let result = arr.filter(item=>item%2===0) // 输出：[2, 4, 6, 8]- 不推荐写法
// 取出数组里的偶数 let arr = [1,2,3,4,5,6,7,8]; let result = []; for(let i=0; i<arr.length; i++) { let item = arr[i]; if(item%2===0) { result.push(item) } } // 输出：[2, 4, 6, 8]
使用解构赋值和扩展运算符...简化代码
对象
使用字面量值创建函数
let obj = {};
属性简写，属性名跟值的变量（key和value）一样时，只写属性名
- 推荐写法
let a = 5; let obj = { a, b: 12 }- 不推荐写法
let a = 5; let obj = { a：a b: 12 }
方法简写，不写function和:
- 推荐写法
let obj = { a:13, show(){ console.log(this.a); } }- 不推荐写法
let obj = { a: 13, show: function(){ console.log(this.a); } }
this
用到this转换的地方，统一使用that
let that = this;
扫一扫
2957
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
