微信小程序ES6 --Class

ES6引入class类相当于一个在prototype中设置的函数,具有继承性和复用性。比如下面我用class封装的微信wx.request(OBJECT)网络请求。

ECMAScript 6 –Class

ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类让。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class Point {
constructor() {
// ...
}
toString() {
// ...
}
}

// 等同于

Point.prototype = {
constructor() {},
toString() {},
};

微信小程序ES6封装 –网络请求函数

封装网络请求函数。(ES6中推荐用_(下划线)来声明)为这个class的私有方法。但是,这种命名是不保险的,在类的外部,还是可以调用到这个方法。(提高代码的可读性)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
class Base{
constructor(){
"use strict";
}

request(params,noRefetch){
var that = this,
url = '网络地址' + params.url;
//设置默认网络请求
if(!params.type){
params.type = 'get';
}

wx.request({
url: url,
data: params.data,
header: {
'content-type': 'application/json',
'token': wx.getStorageSync('token') //获取token
},
method: params.type,
dataType: 'json',
responseType: 'text',
success: function(res) {
var code = res.data.code.toString();
var startChar = code.charAt(0);
if(startChar == '2'){
params.sCallback && params.sCallback(res.data);
}else{
that._processError(res);
params.sCallback && params.sCallback(res.data);
}
},
})
}
//抛出错误
_processError(res){
console.log(res)
}
}

export {Base};

继承class

pages/index/下建一个index-model.js用于业务逻辑。index.js中调用即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { Base } from '../../utils/base.js';
class Index extends Base {
constructor() {
// 微信小程序中必须用super()继承父类的构造函数
super();
}
//举一个栗子
// 用户信息
getUser(callback) {
var param = {
url: '/user/user_info',
sCallback: function (data) {
callback && callback(data)
}
}
this.request(param);
}
}
export { Index };

调用 index——model.js

pages/index/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { Index } from './index-moder.js';
//实例化
var index = new Index();

page({
data:{},
onLoad(){
this._onLoad();
},
_onLoad(callback){
index.getUser(data => {
// 打印返回信息
console.log(res)
});
},
})

笔记

虽然此方法代码量可能有点多。不过可读性,代码的可维护性,优雅性也高出了许多。