小程序模板网

微信小程序开发require的加载与初始化模块机制

2021-05-31 寸白军

  在学习开发微信小程序中, 分析总结了最近版本微信小程序模块化的函数 require的加载与初始化模块机制,归纳说来,小程序JS模块加载可分为两大步骤:JS模块加载和JS模块初始化。

  JS模块加载:一次性加载全部JS, 但并不一定立即执行

  先提一提微信小程序架构: 类浏览器 -> HTTP本地服务 -> 云端服务

  微信小程序运行的架构,基本上是浏览器 -> HTTP本地服务 -> 云端服务, HTTP本地服务用来读取本地文件或者代理云端的文件资源。读取项目中JS文件, 是由HTTP本地服务取本地存储的脚本文件.

  似乎比较简单,一个HTML 引用所有JS文件

  既然采用了这种架构,那微信小程序就类似浏览器那样,借助一个HTML页面来引用加载所有的JS文件。(注:这同NODE.JS的方式区别)

  在小程序开发开具的HTTP服务部分代码,可以看到这个服务干了这件事情:

  微信小程序包目录下面所有.js文件, 会按方式插入生成一个HTML文件,然后类似浏览器方式加载.

  让HTTP本地服务配合,对JS文件作的包装手法

  可是事情并未结束,这种方式一加载,所有js文件都会立即执行,乱糟糟生成一团,怎么可能..那require函数又拿来干什么呢?原来这儿,HTTP服务在返回.JS文件内容的,给脚本内容包装上了一层: define函数

  define函数非常简单,大致如下:

  二, JS模块初始化:按需递归式require初始化

  先看看微信小程序require函数的定义:

  从上面可以看出, require函数只是通过模块名,从内存中获取脚本内容执行,并置标志以保证只执行一次.

  再精简一下:

  require --调用-> factory --->模块中可能再require另一个模块...这样就是一个典型的递归结构。

  三,补充一下:页面js 其实也是被require函数加载

  所谓页面JS,,就是在app.json中注册的page的js, 它们并没有被其它JS require方式引用,

  那么它们在什么时候初始化?

  回到之前本地代理服务器的代码,留意下面一点:

  原来它们还是使用require函数初始化,而且是加载后立即执行。

  目前通常微信小程序代码结构不会太复杂,但随着产品的发展,需求的增加, 代码结构可能越来越复杂,越来越注意模块化.同时,如何将旧有JS模块在微信小程序中重用,这也是个重要话题。 所以深入理解微信小程序的JS模块化机制也是很有价值的.


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/25856.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询