layui原始碼詳細分析系列之模組載入機制

這個系列的文章主要是分析layui原始碼，所以文章是針對於主要的功能或者單獨的內建模組來書寫的，本章主要分析layui框架自己的模組載入機制的實現。

該框架的模組載入機制主要是使用define和use這兩個方法來實現的，define方法適用於定義模組，use方法是用於使用模組，它們都定義在lay建構函式的原型物件上，而window.layui = new lay()；，所以可以通過layui.define、layui.use來直接呼叫。

define以及use方法的定義如下：

lay.fn.define = function
(deps, callback) ;

lay.fn.use = function
// 相關處理**
};

index.js檔案**如下：
layui.define(['layer'], function
(exports) );
})

在html檔案中使用index模組:
layui.config().use('index');

2、直接使用use方法

layui.use(['layer'], function
() );

本章就使用第一種方式來講解layui框架的模組載入機制，例子就使用上面1中的例子，具體分析步驟如下：

1、先分析index.js中define方法的邏輯處理

2、再分析use方法的邏輯處理

我詳細分析了define方法執行的每一步並繪製了邏輯圖，具體如下：

具體的步驟如上圖所示，實際上define還會呼叫use方法，雖然define方法是定義模組的實際上還呼叫了use方法。

use方法的邏輯處理的每一步分析，實際上在define中就具體分析了，在單獨使用use的過程中，大部分地處理是相同的，但還是有所區別，具體如下圖所示：

因為相關的邏輯分析細節比較多，通過圖的方式會更加直觀，文字描述會比較繁瑣。

具體的**分析注釋以及邏輯分析圖我會上傳到我的github上，該框架的模組載入機制主要就是通過define以及use來實現，內部實際上維護了config.status來記錄模組的載入狀態，維護config.modules來儲存模組的url，內部通過script標籤來載入模組。

通過今天的學習，對於簡單模組載入機制有了一定的認知，對於物件導向以及相關**的組織也有了一定的理解，不出意外，明天會分析element.js模組。

致遠行的你我