微信小程序学习之路《九》模块化

微信小程序开发 - 模块化

JavaScript模块化参考文档

JS 模块化

微信小程序秉承了JavaScript模块化的机制，将一些公共的代码抽离成为一个单独的 js 文件作为一个模块，通过module.exports或者exports暴露对象，通过require来获取对象。

需要注意的是：

exports 是 module.exports 的一个引用，因此在模块里边随意更改 exports 的指向会造成未知的错误。推荐采用module.exports 来暴露模块接口。
小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中。

以util.js文件中模块化处理时间为例：

 /**
 * 处理具体业务逻辑
 */
function formatTime(date) {
  //获取年月日
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()

  //获取时分秒
  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds();

  //格式化日期
  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}

/**
 * 模块化导出暴露接口
 */
module.exports = {
  formatTime: formatTime
}

使用方式：

//导入模块化方式
var util = require('../../utils/util.js')
Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(function (log) {        
        return util.formatTime(new Date(log))
      })
    })
  }
})

WXML 模块化

wxml代码里也可以根据界面上不同的部分去分块。从主wxml文件里分出来的文件，可以写成一个模板template，或者另外一段wxml代码，通过import或者include导入，实现模块化。

WXSS 模块化

wxss也支持模块化，用@import来导入其它wxss文件到主wxss文件中（要放在主wxss文件最上面）。如：@import "base.wxss";

模块化的几个小建议

1、js共用的模块抽出来，放到一个文件夹里，取名如common，里面可以再按功能去分更细的模块，如网络请求模块common/net.js，工具方法集common/util.js，websocket相关模块等等。

2、把共用的页面头部、底部，放到page/common/ 里面，记得把js和wxml也放在一起。

3、引用外部的库的话，把它们的文件统一放到 lib/ 目录里。

4、之前文章提到的页面和文件的目录划分，也不用去改。如page/ 目录专门存放页面，一对名字（xxx.wxml和xxx.js）就对应一个页面，如果只是页面的一部分，可以放到page/[page_name]/ 目录里，表示这个页面专门用的模块，但如果是几个页面共享的，可以放在上面第2点提到的page/common/ 里

5、模板放tpl/ 目录里，并按页面来分文件夹放。

6、相关的event handler如果逻辑比较多，可以单独抽出来放到一个文件里。

微信小程序学习之路《九》 模块化

猜你喜欢

微信小程序学习之路《九》模块化