微信小程序 require机制详解及实例代码
微信小程序require机制详解
一,JS模块加载：一次性加载全部JS,但并不一定立即执行.
先提一提微信小程序架构:类浏览器->HTTP本地服务->云端服务
微信小程序运行的架构,基本上是浏览器->HTTP本地服务->云端服务，HTTP本地服务用来读取本地文件或者代理云端的文件资源。读取项目中JS文件,是由HTTP本地服务取本地存储的脚本文件.
似乎比较简单,一个HTML引用所有JS文件
既然采用了这种架构，那微信小程序就类似浏览器那样，借助一个HTML页面来引用加载所有的JS文件。（注：这同NODE.JS的方式区别）
在小程序开发开具的HTTP服务部分代码，可以看到这个服务干了这件事情：
微信小程序包目录下面所有.js文件,会按<scriptsrc="../xxx.js">方式插入生成一个HTML文件,然后类似浏览器方式加载.
让HTTP本地服务配合,对JS文件作的包装手法
可是事情并未结束，这种方式一加载,所有js文件都会立即执行,乱糟糟生成一团,怎么可能..那require函数又拿来干什么呢?原来这儿，HTTP服务在返回.JS文件内容的，给脚本内容包装上了一层:define函数
代理服务部分代码:
(projectManager.js)
functiongetScripts(projInfo,callback){
...
fs.readFile(fname,'utf8',function(err,scripts){
....
scripts='define("'+moduleName+'",function(require,module,exports,'+noBrowserStr+
'){'+scripts+'\n});',
needRequire&&(scripts+='require("'+moduleName+'")'),//page页面js文件，会添加上require自己，加载后立即初始化。
.....
callback(null,scripts)//scripts串内容作为HTTPGET的返回
define函数非常简单，大致如下：
......
var
......
moduleList={};
define=function(moduleName,factory){//define是全局函数,每个JS文件都默认会调用.
moduleList[moduleName]={status:status1,factory:factory}
};
从上面代码看出，，这样一来，每加载一个JS文件，只是将其文件名与脚本内容串加入了内存中的一个变量保存,并未执行。注意，这就与普通的HTML脚本引用加载立即执行完全不同了.
接下来，就轮到微信小程序的require函数出场了。
二,JS模块初始化：按需递归式require初始化
先看看微信小程序require函数的定义：
....
require=function(moduleName){
....
varmodule=moduleList[moduleName];//define函数调用时为moduleList赋的值
.....
if(module.status===status1){
//如果未初始化,则初始化
varfactory=module.factory,//这个factory就是这个JS文件的脚本.
obj={exports:{}},u=void0;
factory&&(u=factory(o(moduleName),obj,obj.exports)),module.exports=obj.exports||u,module.status=status2
}
returnmodule.exports
}
从上面可以看出,require函数只是通过模块名,从内存中获取脚本内容执行,并置标志以保证只执行一次.
再精简一下:
require--调用->factory--->模块中可能再require另一个模块...
这样就是一个典型的递归结构。
三，补充一下：页面js其实也是被require函数加载
所谓页面JS,，就是在app.json中注册的page的js,它们并没有被其它JSrequire方式引用，
那么它们在什么时候初始化？
回到之前本地代理服务器的代码，留意下面一点：
代理服务部分代码:
(projectManager.js)
functiongetScripts(projInfo,callback){
...
fs.readFile(fname,'utf8',function(err,scripts){
....
//page页面js文件，needRequire值为TRUE，会添加上require自己
needRequire&&(scripts+='require("'+moduleName+'")'),
.....
原来它们还是使用require函数初始化，而且是加载后立即执行。
目前通常微信小程序代码结构不会太复杂,但随着产品的发展,需求的增加,代码结构可能越来越复杂,越来越注意模块化.同时,如何将旧有JS模块在微信小程序中重用,这也是个重要话题。所以深入理解微信小程序的JS模块化机制也是很有价值的.
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！