在學習開發微信(xin)小(xiao)程序中, 分(fen)(fen)析(xi)總結了最近版本微信(xin)小(xiao)程序模(mo)塊化的函數 require的加載與初始化模(mo)塊機(ji)制,歸納(na)說來,小(xiao)程序JS模(mo)塊加載可(ke)分(fen)(fen)為兩大步(bu)驟:JS模(mo)塊加載和JS模(mo)塊初始化。
JS模(mo)塊加(jia)載(zai):一次性加(jia)載(zai)全部JS, 但(dan)并不一定立(li)即執行
先(xian)提一提微信小程序架構: 類瀏覽器 -> HTTP本(ben)地服(fu)務(wu) -> 云(yun)端服(fu)務(wu)
微信小程序運行的(de)架(jia)構,基(ji)本上是(shi)瀏覽器(qi) -> HTTP本地(di)服務 -> 云端服務, HTTP本地(di)服務用來讀取本地(di)文件或者(zhe)代理云端的(de)文件資源。讀取項(xiang)目中(zhong)JS文件, 是(shi)由HTTP本地(di)服務取本地(di)存儲的(de)腳本文件.
似乎比較簡單,一個HTML 引(yin)用(yong)所(suo)有JS文件
既然采用(yong)(yong)了(le)這種架(jia)構,那微信(xin)小(xiao)程序就類似瀏覽(lan)器那樣,借助(zhu)一(yi)個HTML頁面來引(yin)用(yong)(yong)加載所(suo)有(you)的(de)JS文件。(注(zhu):這同NODE.JS的(de)方式區別(bie))
在(zai)小程(cheng)序開發開具的HTTP服務部分(fen)代碼(ma),可(ke)以看到(dao)這個(ge)服務干(gan)了(le)這件事情:
微(wei)信小程序包目(mu)錄下面所有.js文件(jian), 會按方式(shi)插入生成(cheng)一個HTML文件(jian),然后類似瀏覽器(qi)方式(shi)加載.
讓HTTP本地服務配合,對(dui)JS文(wen)件作的包裝手法
可(ke)是(shi)事情并未(wei)結(jie)束(shu),這種方(fang)式一(yi)加(jia)載,所有(you)js文(wen)件都(dou)會立即(ji)執行,亂糟(zao)糟(zao)生成一(yi)團(tuan),怎么可(ke)能..那require函(han)數又拿來(lai)干什么呢?原來(lai)這兒(er),HTTP服務在(zai)返回.JS文(wen)件內容(rong)的(de),給腳本內容(rong)包(bao)裝上了一(yi)層(ceng): define函(han)數

define函(han)數非(fei)常簡(jian)單(dan),大致(zhi)如(ru)下:

二, JS模塊初始(shi)化:按需遞(di)歸式require初始(shi)化
先看(kan)看(kan)微信小程(cheng)序require函數的定(ding)義:

從上(shang)面可以看出, require函數只是通過模塊名,從內存中獲取腳本內容執行,并置標志以保證只執行一次.
再精(jing)簡(jian)一下:
require --調用-> factory --->模(mo)塊(kuai)(kuai)中可能再require另一個模(mo)塊(kuai)(kuai)...這樣(yang)就是一個典(dian)型(xing)的遞歸結構。
三,補充一下:頁(ye)面js 其實也(ye)是被(bei)require函(han)數加載
所謂頁(ye)面JS,,就是(shi)在app.json中(zhong)注冊的page的js, 它(ta)們并(bing)沒(mei)有被其(qi)它(ta)JS require方式引用(yong),
那(nei)么它(ta)們在什么時候初始化?
回(hui)到之前本(ben)地代理服務器的代碼,留意下(xia)面(mian)一點:

原來它們還是(shi)使用require函數初(chu)始化(hua),而(er)且是(shi)加(jia)載后(hou)立即執行。
目前通常微信小程序(xu)代(dai)碼結構不會太復(fu)(fu)雜,但隨著產(chan)品的發展,需(xu)求(qiu)的增加, 代(dai)碼結構可能越(yue)來越(yue)復(fu)(fu)雜,越(yue)來越(yue)注意模塊化.同時,如何將(jiang)舊(jiu)有(you)JS模塊在微信小程序(xu)中(zhong)重用,這也是個(ge)重要(yao)話題。 所以深入理解(jie)微信小程序(xu)的JS模塊化機(ji)制(zhi)也是很有(you)價值的.