实战中微信开发模块化的详细讲解(微信小程序模块化的用法)

JavaScript模块规范

模块化在任何大规模应用中都非常普遍。与一些更传统的编程语言不同，JavaScript（ECMA -262版本）不支持本机模块化。

为了在现有的运行环境中实现“模块”的效果，Javascript社区做了很多努力。有两种流行的JavaScript模块规范:CommonJS、AMD、UMD、CMD等。

CommonJSCommonJS规范是服务器端Javascript模块规范。

Node.js的模块化系统是参照CommonJS规范实现的。NPM还遵循commonJS定义的软件包规范，从而形成了一个完整的生态系统。

CommonJS定义的模块分为:{模块引用（require）} {模块定义（exports）} {模块标识（module）}。Require（）用于引入外部模块；exports对象用于导出当前模块的方法或变量，这是唯一的导出端口；模块对象代表模块本身。

英国监管wiki.commonjs.org/wiki....

函数math class（）{ } math class。PI = 3.14数学课。E = 2.72math class . prototype . add = function（a，b）{ return a+b；};module.exports = MathClassvar MathClass = require（。/mathcongjs . js’）；page（{ onLoad:function（）{ console . log（& quot；PI:& quot；+MathClass。PI）；var math class = new math class（）；console . log（& quot；-4:& quot；+math class . add（3，4））；}});AMDAMD是“异步模块定义”的缩写，意思是“异步模块定义”，是前端模块规范。

RequireJS是AMD规范的实现。

AMD规范定义了自由变量或全局变量定义的函数。

定义（id？，依赖关系？，工厂）；Id是一个字符串类型，表示模块标识，是一个可选参数。如果不存在，默认情况下应该将模块标识符定义为加载程序中所请求脚本的标识符。如果存在，那么模块标识必须是顶级或绝对标识。

Dependencies是当前模块所依赖的数组字面量，并且已由模块定义的模块标识。

工厂是需要实例化的函数或对象。

AMD监管github.com/amdjs/amdj....

定义（amp#39;mathAMD & amp#39;，【】，function（I）{ function math class（）{ } math class。PI = 3.14数学课。E = 2.72math class . prototype . add = function（a，b）{ return a+b；};返回MathClass});定义（【& quotmathAMD & quot】，function（require，exports，math class）{ Page（{ onLoad:function（）{ console . log（& quot；PI:& quot；+ MathClass。PI）；var math class = new math class（）；console . log（& quot；-4:& quot；+math class . add（3，4））；} });});UMDCommonJS模块按照服务器端优先的原则开发，选择同步加载模块。它的模块不需要包装，但它只支持对象模块。AMD以browser -优先的原则开发，选择异步加载模块。它的模块支持对象、函数、构造函数、字符串、JSON等多种类型的模块，因此在浏览器中非常灵活。这迫使人们提出另一种更通用的格式UMD（通用模块定义），希望提供一种跨平台的解决方案。

（function（root，factory）{ if（type of define = = = = & amp；#39;功能与应用。#39;& amp& ampdefine . amd）{ define（【& amp；#39;jquery和#39;】，工厂）；} else if（导出类型= = = & amp#39;对象与主题。#39;）{ module . exports = factory（require（& amp；#39;jquery和#39;));} else { root . return exports = factory（root . jquery）；} }（this，function（$）{ function my func（）{ }；返回myFunc}));UMD的实现非常简单。首先判断是否支持AMD（定义是否存在），如果存在，则该模块由AMD加载。然后判断是否支持Node.js模块格式（是否存在导出），如果存在则使用Node.js模块格式。如果前两个不存在，模块将向全局（窗口或全局）公开。

（function（global，factory）{ if（type of define = = = & amp；#39;功能与应用。#39;& amp& ampdefine . amd）{ define（factory）；} else if（导出类型= = = & amp#39;对象与主题。#39;）{ module . exports = factory（）；} else { root . return exports = factory（）；} }（this，function（）{ function math class（）{ } math class。PI = 3.14数学课。E = 2.72math class . prototype . add = function（a，b）{ return a+b；};返回MathClass}) );var math class = require（& amp；#39;。/math UMD . js & amp；#39;);page（{ onLoad:function（）{ console . log（& quot；PI:& quot；+ MathClass。PI）；var math class = new math class（）；console . log（& quot；-4:& quot；+math class . add（3，4））；}});CMDCMD是通用模块定义，CMD规范由中国制定。就像AMD有一个requireJS，CMD有一个实现SeaJS的浏览器一样，SeaJS也有和requireJS一样的问题需要解决，只是在模块定义的模式和模块加载的时机（可以说是运行和解析）上有所不同。

Sea.js提倡一个模块一个文件，遵循统一的编写方法。

定义（id？、deps？，factory）因为CMD重视一个文件和一个模块，所以它经常使用文件名作为模块ID，而CMD重视附近的依赖关系，所以它一般不会将依赖关系写在define参数中，而是写在工厂中。

工厂是一个具有三个参数的函数，function（require、exports、module）。

Require是一个接受模块ID作为唯一参数的方法，用于获取其他模块提供的接口。

Exports是一个向外部提供模块接口的对象。

模块是存储与当前模块关联的一些属性和方法的对象。

CMD模块规格https://github.com/cmdjs/spec...

定义（& quotpages/module/mathcmd . js & quot；，function（require，exports，module）{ function math class（）{ } math class。PI = 3.14数学课。E = 2.72math class . prototype . add = function（a，b）{ return a+b；};module.exports = MathClass}）定义（& quotpages/module/mathcmd . js & quot；，function（require，exports，module）{ function math class（）{ } math class。PI = 3.14数学课。E = 2.72math class . prototype . add = function（a，b）{ return a+b；};module.exports = MathClass}）微信小程序的模块化机制微信小程序继承了JavaScript的模块化机制，通过module.exports公开对象，通过require获取对象。

模块开发以微信小程序快速入门为例，微信小程序模块采用CommonJS规范。

utils/util.js

函数format time（date）{ var year = date . get full year（）var month = date . get month（）+1 var day = date . get date（）var hour = date . get hours（）var minute = date . get minutes（）var second = date . get seconds（）；返回【年、月、日】。映射（格式编号）。加入（amp#39;/& amp；#39;）+& amp；#39;& amp#39;+【时、分、秒】。映射（格式编号）。加入（amp#39;:& amp#39;）}函数format number（n）{ n = n . tostring（）return n【1】？n:& amp；#39;0 & amp#39;+n } module . exports = { format time:format time } pages/log/log . js

var util = require（& amp；#39;../../utils/util . js & amp；#39;）Page（{ data:{ logs:【】}，onLoad:function（）{ this . setdata（{ logs:（wx . getstoragesync（& amp；#39;日志& amp#39;) || []).map（function（log）{ return util。format time（new date（log）}）} }）模块应该作为前端程序在微信浏览器中运行。由于CommonJS规范是服务器端模块规范，微信小程序在运行时会自动转换为前端模块规范。

以微信小程序快速启动的调试代码为例

utils/util.js

定义（& quotutils/util . js & quot；、function（require，module）{ var window = { math:math }/*与Babel兼容*/、位置、文档、导航器、自身、本地存储、历史记录、缓存；函数format time（date）{ var year = date . get full year（）var month = date . get month（）+1 var day = date . get date（）var hour = date . get hours（）var minute = date . get minutes（）var second = date . get seconds（）；返回【年、月、日】。映射（格式编号）。加入（amp#39;/& amp；#39;）+& amp；#39;& amp#39;+【时、分、秒】。映射（格式编号）。加入（amp#39;:& amp#39;）}函数format number（n）{ n = n . tostring（）return n【1】？n:& amp；#39;0 & amp#39;+n } module . exports = { format time:format time } }）页面/log/log.js

定义（& quotpages/log/logs . js & quot；、function（require，module）{ var window = { math:math }/*与Babel兼容*/、位置、文档、导航器、自身、本地存储、历史记录、缓存；var util = require（& amp；#39;../../utils/util . js & amp；#39;）Page（{ data:{ logs:【】}，onLoad:function（）{ this . setdata（{ logs:（wx . getstoragesync（& amp；#39;日志& amp#39;) || []).map（function（log）{ return util . format time（new Date（log））}）}）；要求（& quotpages/log/logs . js & quot；微信小程序运行的代码基本符合CMD模块规范。

未定义第三方模块微信小程序运行环境导出和模块，因此无法通过require导入模块，需要强制导出第三方模块后才能正常导入。

微信小程序使用immutable . js segmentfault.com/a/11....

微信小程序使用下划线。js segmentfault.com/a/11....

ECMAScript 6模块系统ECMAScript 6中，模块是作为重要部分添加的。

ES6的模块提供了两种新语法，即导出和导入。

导出模块导出

导出字母a = 1；导出A类{ }；导出字母b =（）=》；{};导入模块导入

从& amp#39;。/a & amp；#39;；console . log（a）；从& amp#39;。/a & amp；#39;；console . log（obj . a）；微信小程序尚未实现ECMAScript 6。

【相关建议】

1.下载微信微信官方账号平台源代码。

2.分享微信微信官方账号开发信用卡支付的实例教程。

3.微信开发的微信支付

4.详细讲解微信小程序支付功能开发的错误总结。

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：实战中微信开发模块化的详细讲解(微信小程序模块化的用法) https://zhujicankao.com/113124.html