一、什么是模块化
微信小程序中的模块化，是指将代码拆分成多个独立的.js文件，每个文件就是一个模块。模块可以定义自己的变量和函数，并通过module.exports对外暴露接口；其他模块通过require()引入后即可使用。
模块化的好处：
- 代码复用：同一个模块可以被多个页面引用
- 职责分离：不同功能放在不同文件，便于维护
- 避免全局污染：模块内的变量默认是私有的
二、案例描述
设计一个小程序，演示在index.js模块中引用来自全局模块、本模块、不同目录下其它模块、相同目录下其它模块中的变量和函数的方法。
三、实现步骤
1、创建不同目录下的模块
// common/common.js var comMsg = '来自不同目录下模块的变量' function comFunc() { return '来自不同目录下模块的函数' } module.exports = { comMsg: comMsg, comFunc: comFunc }2、创建相同目录下的模块my-index.js
在pages/index/目录下新建my-index.js：
// pages/index/my-index.js var myIndexMsg = '来自相同目录下不同模块的变量' function myIndexFunc() { return '来自相同目录下不同模块的函数' } module.exports = { myIndexMsg: myIndexMsg, myIndexFunc: myIndexFunc }3、修改app.js（全局模块）
在App()函数中定义全局变量appMsg和全局函数appFunc：
// app.js App({ appMsg: '来自全局模块的变量', appFunc: function () { return '来自全局模块的函数' } })4、修改index.js（核心）
这是案例的核心——在一个页面中引用四个不同来源的模块：
// pages/index/index.js // 1. 获取全局唯一的 App 实例，引用全局模块 var app = getApp() // 2. 引用不同目录下模块 common.js var common = require('../../common/common.js') // 3. 引用相同目录下模块 my-index.js var myIndex = require('./my-index.js') // 4. 本模块(index.js)的变量和函数 var indexMsg = '来自本模块的变量' function indexFunc() { return '来自本模块的函数' } Page({ data: { appMsg: app.appMsg, appFuncResult: app.appFunc(), comMsg: common.comMsg, comFuncResult: common.comFunc(), myIndexMsg: myIndex.myIndexMsg, myIndexFuncResult: myIndex.myIndexFunc(), indexMsg: indexMsg, indexFuncResult: indexFunc() } })5、修改index.wxml
通过 Mustache 语法{{}}进行数据绑定
<view class="title">引用来自不同模块的变量和函数</view> <view class="app">index.js模块引用来自全局模块的变量：{{appMsg}}</view> <view class="app">index.js模块引用来自全局模块的函数：{{appFuncResult}}</view> <view class="common">index.js模块引用来自不同目录下模块的变量：{{comMsg}}</view> <view class="common">index.js模块引用来自不同目录下模块的函数：{{comFuncResult}}</view> <view class="myindex">index.js模块引用来自相同目录下不同模块的变量：{{myIndexMsg}}</view> <view class="myindex">index.js模块引用来自相同目录下不同模块的函数：{{myIndexFuncResult}}</view> <view class="self">index.js模块引用来自本模块的变量：{{indexMsg}}</view> <view class="self">index.js模块引用来自本模块的函数：{{indexFuncResult}}</view>6、修改index.wxss（作业加分项：不同背景色）
作业要求：将来自不同模块的变量和函数输出信息加上不同的背景颜色。
page { height: 100vh; } .title { font-size: 40rpx; font-weight: bolder; color: #0000ff; margin: 30rpx 20rpx 20rpx; } view { font-size: 32rpx; line-height: 2em; padding: 0 20rpx; } /* 全局模块 - 青色 */ .app { background-color: #b2ebf2; } /* 不同目录模块 - 黄色 */ .common { background-color: #fff9c4; } /* 相同目录模块 - 红色 */ .myindex { background-color: #ffcdd2; } /* 本模块 - 绿色 */ .self { background-color: #c8e6c9; }
