微信小程序学习之路《九》 模块化
微信小程序开发 - 模块化
JavaScript模块化参考文档 |
JS 模块化
微信小程序秉承了JavaScript模块化的机制，将一些公共的代码抽离成为一个单独的 js 文件作为一个模块，通过module.exports或者exports暴露对象，通过require来获取对象。
需要注意的是：
|
以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如果逻辑比较多，可以单独抽出来放到一个文件里。 |