微信小程序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)
    });
  },
})

笔记

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