微信小程序 require機制詳解

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

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

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

似乎比較簡單,一個HTML 引用所有JS文件

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

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

微信小程序包目錄下面所有.js文件, 會按<script src="../xxx.js"> 方式插入生成一個HTML文件,然后類似瀏覽器方式加載.

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

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

代理服務(wù)部分代碼:

(projectManager.js)
function getScripts(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串內(nèi)容作為HTTP GET的返回

define函數(shù)非常簡單，大致如下：

......
  var 
  ......
  moduleList = {}; 
  define = function(moduleName, factory) { //define是全局函數(shù),每個JS文件都默認會調(diào)用. 
    moduleList[moduleName] = { status: status1, factory: factory }
  };

從上面代碼看出，，這樣一來，每加載一個JS文件，只是將其文件名與腳本內(nèi)容串加入了內(nèi)存中的一個變量保存,并未執(zhí)行。 注意，這就與普通的HTML 腳本引用加載立即執(zhí)行完全不同了.

接下來，就輪到微信小程序的require函數(shù)出場了。

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

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

....
  require = function(moduleName) {    
    ....
    var module = moduleList[moduleName]; //define函數(shù)調(diào)用時為moduleList賦的值
    .....
    if (module.status === status1) { 
      //如果未初始化,則初始化
      var factory = module.factory, //這個factory就是這個JS文件的腳本.
      obj = { exports: {} }, u = void 0;
      factory && (u = factory(o(moduleName), obj, obj.exports)), module.exports = obj.exports || u, module.status = status2
    }
    return module.exports
  }

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

再精簡一下:

require --調(diào)用-> factory --->模塊中可能再require另一個模塊...

這樣就是一個典型的遞歸結(jié)構(gòu)。

三，補充一下：頁面js 其實也是被require函數(shù)加載

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

那么它們在什么時候初始化？

回到之前本地代理服務(wù)器的代碼，留意下面一點：

代理服務(wù)部分代碼:
(projectManager.js)
function getScripts(projInfo, callback) {
 ...
  fs.readFile(fname, 'utf8', function(err, scripts) {
    ....  
    //page頁面js文件，needRequire值為TRUE，會添加上require自己
    needRequire && (scripts += 'require("' + moduleName + '")'), 
    .....

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

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

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

最新評論