小程序 JS 模块化实践一、实验目的掌握小程序中 JS 模块的导出与引入方法将代码拆分到独立 js 文件实现代码复用并通过 WXSS 为不同模块输出内容设置不同背景样式直观区分不同模块的数据。二、项目结构├─utils │ ├─moduleA.js // A模块 │ └─moduleB.js // B模块 └─pages └─index ├─index.js ├─index.wxml ├─index.wxss └─index.json三、原理说明module.exports模块导出把变量、函数暴露出去供其他 js 文件调用。require()引入外部 js 模块拿到导出的对象。onLoad 页面加载生命周期读取模块数据并 setData将数据传给 wxml 渲染。给两个模块对应的 view 设置不同 class使用不同背景色区分 A、B 模块。四、运行效果页面加载后展示两组信息蓝色背景区域模块 A 的变量、模块 A 函数返回结果绿色背景区域模块 B 的变量、模块 B 函数返回结果五、小结小程序支持 CommonJS 模块化可将功能拆分到独立 js 文件降低主页面代码复杂度提高代码复用性便于后期维护。
