微信小程序练习：模块化

一、什么是模块化微信小程序中的模块化是指将代码拆分成多个独立的.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 classtitle引用来自不同模块的变量和函数/view view classappindex.js模块引用来自全局模块的变量{{appMsg}}/view view classappindex.js模块引用来自全局模块的函数{{appFuncResult}}/view view classcommonindex.js模块引用来自不同目录下模块的变量{{comMsg}}/view view classcommonindex.js模块引用来自不同目录下模块的函数{{comFuncResult}}/view view classmyindexindex.js模块引用来自相同目录下不同模块的变量{{myIndexMsg}}/view view classmyindexindex.js模块引用来自相同目录下不同模块的函数{{myIndexFuncResult}}/view view classselfindex.js模块引用来自本模块的变量{{indexMsg}}/view view classselfindex.js模块引用来自本模块的函数{{indexFuncResult}}/view6、修改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; }四、预览展示