小程序模板網(wǎng)

微信小程序開發(fā)require的加載與初始化模塊機(jī)制

發(fā)布時(shí)間:2021-05-31 11:38 所屬欄目:小程序開發(fā)教程

  在學(xué)習(xí)開發(fā)微信小程序中, 分析總結(jié)了最近版本微信小程序模塊化的函數(shù) require的加載與初始化模塊機(jī)制,歸納說來,小程序JS模塊加載可分為兩大步驟:JS模塊加載和JS模塊初始化。

  JS模塊加載:一次性加載全部JS, 但并不一定立即執(zhí)行

  先提一提微信小程序架構(gòu): 類瀏覽器 -> HTTP本地服務(wù) -> 云端服務(wù)

  微信小程序運(yùn)行的架構(gòu),基本上是瀏覽器 -> HTTP本地服務(wù) -> 云端服務(wù), HTTP本地服務(wù)用來讀取本地文件或者代理云端的文件資源。讀取項(xiàng)目中JS文件, 是由HTTP本地服務(wù)取本地存儲(chǔ)的腳本文件.

  似乎比較簡(jiǎn)單,一個(gè)HTML 引用所有JS文件

  既然采用了這種架構(gòu),那微信小程序就類似瀏覽器那樣,借助一個(gè)HTML頁面來引用加載所有的JS文件。(注:這同NODE.JS的方式區(qū)別)

  在小程序開發(fā)開具的HTTP服務(wù)部分代碼,可以看到這個(gè)服務(wù)干了這件事情:

  微信小程序包目錄下面所有.js文件, 會(huì)按方式插入生成一個(gè)HTML文件,然后類似瀏覽器方式加載.

  讓HTTP本地服務(wù)配合,對(duì)JS文件作的包裝手法

  可是事情并未結(jié)束,這種方式一加載,所有js文件都會(huì)立即執(zhí)行,亂糟糟生成一團(tuán),怎么可能..那require函數(shù)又拿來干什么呢?原來這兒,HTTP服務(wù)在返回.JS文件內(nèi)容的,給腳本內(nèi)容包裝上了一層: define函數(shù)

/

  define函數(shù)非常簡(jiǎn)單,大致如下:

/

  二, JS模塊初始化:按需遞歸式require初始化

  先看看微信小程序require函數(shù)的定義:

/

  從上面可以看出, require函數(shù)只是通過模塊名,從內(nèi)存中獲取腳本內(nèi)容執(zhí)行,并置標(biāo)志以保證只執(zhí)行一次.

  再精簡(jiǎn)一下:

  require --調(diào)用-> factory --->模塊中可能再require另一個(gè)模塊...這樣就是一個(gè)典型的遞歸結(jié)構(gòu)。

  三,補(bǔ)充一下:頁面js 其實(shí)也是被require函數(shù)加載

  所謂頁面JS,,就是在app.json中注冊(cè)的page的js, 它們并沒有被其它JS require方式引用,

  那么它們?cè)谑裁磿r(shí)候初始化?

  回到之前本地代理服務(wù)器的代碼,留意下面一點(diǎn):

/

  原來它們還是使用require函數(shù)初始化,而且是加載后立即執(zhí)行。

  目前通常微信小程序代碼結(jié)構(gòu)不會(huì)太復(fù)雜,但隨著產(chǎn)品的發(fā)展,需求的增加, 代碼結(jié)構(gòu)可能越來越復(fù)雜,越來越注意模塊化.同時(shí),如何將舊有JS模塊在微信小程序中重用,這也是個(gè)重要話題。 所以深入理解微信小程序的JS模塊化機(jī)制也是很有價(jià)值的.


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/25856.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢