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

微信小程序开发 - 模块化

 

 

JavaScript模块化参考文档

 

• 1.微信小程序开发实战--模块化

• 2.该如何理解AMD，CMDCommonJS规范--JavaScript模块化规范

• 3.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如果逻辑比较多，可以单独抽出来放到一个文件里。