模塊的加載啟動(dòng)

Sea.js 是一個(gè)模塊加載器，模塊加載器需要實(shí)現(xiàn)兩個(gè)基本功能：

1. 實(shí)現(xiàn)模塊定義規(guī)范，這是模塊系統(tǒng)的基礎(chǔ)。

2. 模塊系統(tǒng)的啟動(dòng)與運(yùn)行。

模塊定義規(guī)范的實(shí)現(xiàn)

這就是 define，require，exports，module 的實(shí)現(xiàn)。具體實(shí)現(xiàn)細(xì)節(jié)，有興趣的可以看 Sea.js 的源碼：seajs/src?？梢园凑?Gruntfile.js 中聲明的合并順序閱讀，核心是 module.js 文件。

define 等方法的具體使用，請(qǐng)閱讀：CMD 模塊定義規(guī)范

模塊系統(tǒng)的啟動(dòng)

有了 define 等模塊定義規(guī)范的實(shí)現(xiàn)，我們可以開發(fā)出很多模塊。但光有一堆模塊不管用，我們還得讓它們能跑起來。

首先就是啟動(dòng)問題。比如在 Node 中，啟動(dòng)很簡(jiǎn)單：

$ node main.js

這就是啟動(dòng)。

再舉一個(gè)例子，操作系統(tǒng)的啟動(dòng)：大家都知道的，按一下開機(jī)鍵就好。

在 Sea.js 里，要啟動(dòng)模塊系統(tǒng)很簡(jiǎn)單：

<script src="path/to/sea.js"></script><script>  seajs.use('./main');</script>

seajs.use Function

用來在頁(yè)面中加載模塊。

seajs.use seajs.use(id, callback?)

通過 use 方法，可以在頁(yè)面中加載任意模塊：

// 加載模塊 main，并在加載完成時(shí)，執(zhí)行指定回調(diào)seajs.use('./main', function(main) {
  main.init();
});

use 方法還可以一次加載多個(gè)模塊：

// // 并發(fā)加載模塊 a 和模塊 b，并在都加載完成時(shí)，執(zhí)行指定回調(diào)seajs.use(['./a', './b'], function(a, b) {
  a.init();
  b.init();
});

callback 參數(shù)可選，省略時(shí)，表示無需回調(diào)。

與 DOM ready 的關(guān)系

注意：seajs.use 與 DOM ready 事件沒有任何關(guān)系。如果某些操作要確保在 DOM ready 后執(zhí)行，需要使用 jquery 等類庫(kù)來保證，比如：

seajs.use(['jquery', './main'], function($, main) {
  $(document).ready(function() {
    main.init();
  });
});

sea.js 的引入

在調(diào)用 seajs.use 之前，需要先引入 sea.js 文件，推薦直接使用 script 標(biāo)簽同步引入：

<script src="path/to/sea.js"></script>

為了滿足某些場(chǎng)景下的性能優(yōu)化需求，也可以將 sea.js 的源碼內(nèi)嵌：

<script>// sea.js 的源碼</script>

注意：代碼內(nèi)嵌時(shí)，需要通過 seajs.config 手動(dòng)配置 base 路徑。

最佳實(shí)踐

1. seajs.use 理論上只用于加載啟動(dòng)，不應(yīng)該出現(xiàn)在 define 中的模塊代碼里。在模塊代碼里需要異步加載其他模塊時(shí)，推薦使用 require.async 方法。

2. 引入 sea.js 時(shí)，可以把 sea.js 與其他文件打包在一起，可提前合并好，或利用 combo 服務(wù)動(dòng)態(tài)合并。無論哪一種方式，為了讓 sea.js 內(nèi)部能快速獲取到自身路徑，推薦手動(dòng)加上 id 屬性：

<script src="path/to/sea.js" id="seajsnode"></script>

加上 seajsnode 值，可以讓 sea.js 直接獲取到自身路徑，而不需要通過其他機(jī)制去自動(dòng)獲取。這對(duì)性能和穩(wěn)定性會(huì)有一定提升，推薦默認(rèn)都加上。

小結(jié)

seajs.use 是模塊加載器必備的一個(gè)接口。在 seajs 上，還有用于配置的 config 方法、方便調(diào)試的 cache 等接口，這些會(huì)在接下來的文檔中詳細(xì)闡述。