小程序笔记 -- 封装函数

封装就是把实现某 功能 的代码拿出来做为单独的函数, 在不同的地方可以直接使用

封装函数最大好处就是可以避免代码的重复书写, 从而提高效率

如果某功能要经常使用, 则应该考虑将这个功能封装为函数, 否则用一次这个功能就得写一次该功能的代码

小程序中的封装, 也就是js封装

1.单独创建一个js文件, 不用创建其它的wxml, wxss, json文件

2.书写js内容, 这仅仅是一个js文件, 不需要使用Page()注册

 

/**commons.js文件 */

// 定义的常量
var URL = 'http://127.0.0.1:4444/';

// 定义的函数
var concatUrl = function (url) {
  return URL + url;
}

/****************************************************/
// 将下面两个变量暴露出来
// 只有暴露出来的变量外部才能引用
// model.exports一般是放在js文件的最后面， 以防止变量未定义时， 就向外面暴露
module.exports = {
  URL : URL,      // 前面一个是外部引用时使用的名称， 后一个是本js中变量的名称
  geRealtUrl: concatUrl
}

3.在任意js文件中使用封装的函数

/**index.js */

// 在此使用require引入目标js文件, 用变量_js表示
// 因此commons.js文件相当被抽象为了一个对象 : _js
var _js = require("../../commons/utils/commons.js");

Page({
  data: {
  },
  onLoad: function() {
    // 使用对象 _js 调用它里面已暴露的变量
    var url = _js.geRealtUrl("adrress");
    console.log(url);
    console.log(_js.URL);
  }
})

从这里面可以看出:使用对象_js可以调用commons中已暴露的变量

而不仅仅是函数, 如这里使用_js.URL 得到的是commons.js中的常量

因此可以考虑将常量放入这样的js文件中

 

例: 

在项目中不可避免地要使用登陆功能, 而登陆功能要使用的地方很多

比如要执行收藏,支付等功能之前都是需要用户登陆的

如果在执行这些功能的时候, 检测到用户没有登陆或登陆状态不合适, 需要登陆或重新登陆

则可以直接调用封装好的登陆功能

/**utils.js */

// 登陆功能
var login_util = function () {
  wx.login({
    success: function(res) {
      if (res.code) {
        //发起网络请求
        wx.request({
          url: 'http://127.0.01:4444/login',   // 开发者服务器中的请求url
          data: {
            code: res.code
          }
        })
      } else {
        console.log('登录失败！' + res.errMsg)
      }
    }
  });
}

// 将变量暴露出来
module.exports = {
  login_util: login_util
}

这里说明一下: url: 'http://127.0.01:4444/login 测试的时候不要使用https请求

除非做了服务器端已ssl化, 否则会报错: Invalid character found in method name. HTTP method names must be tokens

/**login.js */
var loginUtil = require("../../commons/utils/commons.js");
Page({
  data: {
  },
  login: function() {
    loginUtil.login_util();  // 直接使用封装的登陆
  }
})

有时候需要检测session_key是否有效, 如果过期了, 就要重新登陆

那么可以直接把检测session_key这个操作给封装了:

/**utils.js */

// 登陆功能
var login_util = function() {
  wx.login({
    success: function(res) {
      if (res.code) {
        //发起网络请求
        wx.request({
          url: 'http://127.0.01:4444/login', // 开发者服务器中的请求url
          data: {
            code: res.code
          },
          success : function(res) {
            console.log(res.data);
          }
        })
      } else {
        console.log('登录失败！' + res.errMsg)
      }
    }
  });
};

// 检测session_key, 如果过期重新登陆
var checkSession_util = function() {
  wx.checkSession({
    success: function(e) {
      console.log("未过期");
    },
    fail: function() {
      login_util();
    }
  })
}

// 将变量暴露出来
module.exports = {
  login_util: login_util,
  checkSession_util: checkSession_util
}

这样封装以后, 要直接登陆:调用login_util, 要检测session_key登陆则使用checkSession_util