從 RequireJS 到 SeaJS（1）

RequireJS 釋出 1.0.0 了，很值得關注，看是否有可借鑒之處。

本次比較不涉及具體實作代碼，主要比較兩者的 API 設計。

http://requirejs.org

http://seajs.org

首先，從 requirejs.org 首頁可以得知，RequireJS 的定位是：

RequireJS 是一個 JavaScript 檔案和子產品加載器，特别為浏覽器優化，同時也可運作在 Rhino 和 Node 環境中。

SeaJS 的定位是：

SeaJS 是一個适用于浏覽器端的 JavaScript 子產品加載器。

不要小看這兩句話，任何類庫/架構的定位，或者說願景/目标，最終會決定該類庫/架構的方方面面。比如：

RequireJS 的定位中，除了是子產品加載器，還是檔案加載器，這決定了 RequireJS 需要實作類似 LABjs 等 script loader 的功能。LABjs 的核心功能是異步加載腳本并提供運作的依賴等待：

1

2

3

4

<code>$LAB</code>

<code>   </code><code>.script("a.js")</code>

<code>   </code><code>.script("b.js").wait()</code>

<code>   </code><code>.script("c.js");</code>

為了提供類似功能，RequireJS 開發了 order 插件：

<code>require(["order!one.js", "order!two.js", "order!three.js"], function () {</code>

<code>    </code><code>//This callback is called after the three scripts finish loading.</code>

<code>});</code>

order 功能是 JavaScript 檔案加載器必備的功能，RequireJS 有檔案加載器的定位，是以才有了 order 插件的設計。

而對于 SeaJS 來說，定位為很純粹的子產品加載器，是以不需要考慮普通腳本的 order 加載，如果需要腳本加載功能，直接和 LABjs 一塊用就好：

5

6

7

8

<code>define(function(require) {</code>

<code>  </code><code>var $LAB = require('labjs/2.0.3/lab.js');</code>

<code>   </code><code>$LAB</code>

<code>      </code><code>.script('a.js')</code>

<code>      </code><code>.script('b.js').wait()</code>

<code>      </code><code>.scrpt('c.js');</code>

<code>);</code>

SeaJS 推薦用組合的思路解決問題：LABjs + SeaJS = JavaScript 檔案和子產品加載器。

上面是 SeaJS 的狹義定位，SeaJS 還有一個廣義定位：

SeaJS 是浏覽器端的 NodeJS.

在廣義定位下，SeaJS 包括以下部分：

一套子產品書寫格式。

一個适用于浏覽器端的子產品加載器。

一組預設推薦的子產品。

類似 npm 的包管理工具。

調試等開發者工具。

等等。

狹義定位對應 github 中的：seajs/seajs

廣義定位對應 github 中的：seajs

RequireJS 和 SeaJS 狹義定位上的差異，将直接導緻兩者之間的最佳使用場景和 API 設計差異，後續博文會進一步提及。

SeaJS 廣義定位中的定語很重要，是“浏覽器端的”，這将直接決定 SeaJS 和 NodeJS 的差異，後續博文會進一步提及。

requirejs.org 首頁還列舉了 RequireJS 支援的浏覽器，這和 SeaJS 沒什麼差異。其實兩者涉及到的 DOM 操作都不多，大部分代碼是純 JavaScript 代碼，相容性上都很不錯。

On Script Loaders