寫筆記的時候才注意到我看的源代碼是 3.0.0 的，但是官方釋出的最新版本是 2.3.0。相信大部分是相同的，是以先把這個記完，再看一次 2.3.0 的代碼。
整個seajs采用的是2空格縮進，避免分号的寫法，我不是很習慣，但不影響閱讀。
文檔中各個源檔案所包含的内容大緻如下：
<code>intro.js</code> 檔案頭 <code>sea.js</code> 定義全局 <code>global.seajs</code> 對象和 <code>seajs.data</code> 對象 <code>util-lang.js</code>，語言相關工具 定義用于判斷對象類型的 <code>isXxxxx()</code> 函數，以及一個與語言無關的 <code>cid()</code>。 <code>util-events.js</code> 定義 seajs 的事件處理相關函數，包括 <code>on()</code>、<code>off()</code>、<code>emit()</code> <code>util-path.js</code> 定義用于路徑處理的工具函數 <code>util-request.js</code> 定義請求檔案的工具函數 <code>seajs.request()</code> 等 <code>util-deps.js</code> 定義用于分析依賴關系的 <code>parseDependencies()</code> <code>module.js</code> seajs 的核心，子產品類。 也包含部分 seajs 的方法 <code>config.js</code> 定義 <code>seajs.config()</code>，以及 <code>data</code> 部分屬性的預設值
是以合并之後的整個 seajs 代碼看起來就像這樣
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<code>(</code><code>function</code><code>(global, undefiend) {</code>
<code> </code><code>global.seajs = {</code>
<code> </code><code>data: {}</code>
<code> </code><code>}</code>
<code> </code><code>var</code> <code>isObject = </code><code>function</code><code>() {}</code>
<code> </code><code>var</code> <code>isString = </code><code>function</code><code>() {}</code>
<code> </code><code>var</code> <code>isArray = </code><code>function</code><code>() {}</code>
<code> </code><code>var</code> <code>isFunction = </code><code>function</code><code>() {}</code>
<code> </code><code>var</code> <code>cid = </code><code>function</code><code>() {}</code>
<code> </code><code>data.events = {}</code>
<code> </code><code>seajs.on = </code><code>function</code><code>() {}</code>
<code> </code><code>seajs.off = </code><code>function</code><code>() {}</code>
<code> </code><code>seajs.emit = </code><code>function</code><code>() {}</code>
<code> </code><code>// path utils, and</code>
<code> </code><code>seajs.resolve = </code><code>function</code><code>() {}</code>
<code> </code><code>var</code> <code>loaderDir</code>
<code> </code><code>var</code> <code>parseDependencies = </code><code>function</code><code>() {}</code>
<code> </code><code>function</code> <code>Module() {}</code>
<code> </code><code>seajs.config = </code><code>function</code><code>() {}</code>
<code>})(</code><code>this</code><code>);</code>
首先是定義了一個産生 isXxxx 的函數工廠 <code>isType()</code>
<code>function</code> <code>isType(type) {</code>
<code> </code><code>return</code> <code>function</code><code>(obj) {</code>
<code> </code><code>return</code> <code>{}.toString.call(obj) == </code><code>"[object "</code> <code>+ type + </code><code>"]"</code>
<code>}</code>
從這個工廠的代碼可以看出來，<code>isXxxx()</code> 主要是通過 <code>Object.prototype.toString</code> 的值來判斷對象類型的。
當然也有例外：
<code>// 畢竟 Array.isArray() 是 [native code]，效果會高得多</code>
<code>var</code> <code>isArray = Array.isArray || isType(</code><code>"Array"</code><code>)</code>
這裡有幾件事情我不是很明白： 就是為什麼不使用 <code>typeof</code> 運算符來判斷類型，一般語言中運算符實作會比比較字元串快得多。 <code>{}.toString.call(obj)</code> 和 <code>Object.prototype.toString.call(obj)</code> 的作用是一樣的，但是在運作時，每執行一次 <code>isXxxx</code> 就會産生一個新的 <code>{}</code> 對象；而 <code>Object.prototype</code> 始終都是同一個對象，似乎可以減少不少開銷 jQuery 的 <code>isFunction()</code> 等方法都是通過 <code>jQuery.type()</code> 來實作的，而 <code>jQuery.type</code> 中則是通過定義了一個 <code>class2type</code> 字典對象來做類型映射，
2014-09-09 補充 我在 seajs 的 issue 上問了這個問題，于是上面的幾個問題就都找到答案了： <a href="https://github.com/seajs/seajs/issues/1314" target="_blank">https://github.com/seajs/seajs/issues/1314</a> 參考玉伯的部落格 <a href="https://github.com/lifesinger/lifesinger.github.com/issues/175" target="_blank">https://github.com/lifesinger/lifesinger.github.com/issues/175</a>
<code>jQuery.each(</code><code>"Boolean Number String Function Array Date RegExp Object Error"</code><code>.split(</code><code>" "</code><code>), </code><code>function</code><code>(i, name) {</code>
<code> </code><code>class2type[ </code><code>"[object "</code> <code>+ name + </code><code>"]"</code> <code>] = name.toLowerCase();</code>
<code>});</code>
這種作法也會比每次都拼字元串（<code>"[object " + type + "]"</code>）來比較要效率高一些吧。 不過 seajs 和 jquery 都沒有直接依賴 <code>typeof</code> 運算符來實作 <code>isXxxx</code>，我相信絕對不是偶然，一定有啥原因，不過這個原因我目前就不清楚了，希望玉伯能看到這個部落格，稍作解釋
seajs 隻為全局對象 <code>seajs</code> 添加了事件處理。事件的回調函數鍊儲存在 <code>seajs.data.events</code> 中，以事件名稱為 key，<code>Array</code> 對象儲存的回調函數鍊為 value。
因為 seajs 的事件主要為了插件而定義，是以對參數并沒有嚴格的校驗。比如
<code>// 自定義一個比較奇葩的事件，這不會報錯</code>
<code>seajs.on(</code><code>null</code><code>, </code><code>"fake callback"</code><code>);</code>
<code>// 但是執行就會出錯了</code>
<code>seajs.emit(</code><code>"null"</code><code>)</code>
<code>// 輸出：TypeError: string is not a function</code>
看樣子，插件開發者得自己注意下這個問題了。
看完 seajs 的源碼，大概定義了這麼一些事件
<code>error</code>，貌似跟 NodeJS 有點關系，沒仔細看
<code>load</code>，在子產品對象狀态變成 <code>LOADING</code> 後觸發，參數是所有依賴子產品的 URI。
<code> </code><code>// Emit `load` event for plugins such as combo plugin</code>
<code> </code><code>var</code> <code>uris = mod.resolve()</code>
<code> </code><code>emit(</code><code>"load"</code><code>, uris)</code>
<code>exec</code>，在子產品對象狀态變成 <code>EXECUTED</code> 後觸發，參數就是子產品對象本身
<code>fetch</code>，在子產品對象狀态剛變成 <code>FETECHING</code> 時觸發，參數是一個臨時對象<code>emitData</code>，事件結果儲存在 <code>emitData.requestUri</code>，用于後面的 <code>request</code> 請求資料。
<code> </code><code>// Emit `fetch` event for plugins such as combo plugin</code>
<code> </code><code>var</code> <code>emitData = { uri: uri }</code>
<code> </code><code>emit(</code><code>"fetch"</code><code>, emitData)</code>
<code> </code><code>var</code> <code>requestUri = emitData.requestUri || uri</code>
<code>request</code>，在 <code>fetch</code> 事件後對 <code>emitData.requestUri || uri</code> 進行了處理之後，通過 <code>seajs.request()</code> 請求資料之前觸發，參數是一個臨時對象，變量名複用的 <code>emitData</code>。事件處理完成後根據 <code>emitData.requested</code> 的值來判斷是否需要調用 <code>seajs.request</code> 請求資料。
<code> </code><code>// Emit `request` event for plugins such as text plugin</code>
<code> </code><code>emit(</code><code>"request"</code><code>, emitData = {</code>
<code> </code><code>uri: uri,</code>
<code> </code><code>requestUri: requestUri,</code>
<code> </code><code>onRequest: onRequest,</code>
<code> </code><code>charset: isFunction(data.charset)</code>
<code> </code><code>? data.charset(requestUri) || </code><code>'utf-8'</code>
<code> </code><code>: data.charset</code>
<code> </code><code>})</code>
<code> </code><code>if</code> <code>(!emitData.requested) {</code>
<code> </code><code>// ...</code>
<code>resolve</code>，在 <code>Module.resolve</code> 中調用 <code>seajs.resolve()</code> 之前觸發，參數是一個臨時對象 <code>emitData</code>。事件中如果産生了有效的 <code>emitData.uri</code>，則不再調用<code>seajs.resolve()</code>
<code> </code><code>// Emit `resolve` event for plugins such as text plugin</code>
<code> </code><code>var</code> <code>emitData = { id: id, refUri: refUri }</code>
<code> </code><code>emit(</code><code>"resolve"</code><code>, emitData)</code>
<code> </code><code>return</code> <code>emitData.uri || seajs.resolve(emitData.id, refUri)</code>
<code>config</code>，在 <code>seajs.config()</code> 中，完成對 config 對象的處理之後觸發，參數就是 config 對象。
<code>seajs.config = </code><code>function</code><code>(configData) {</code>
<code> </code><code>// ...</code>
<code> </code><code>emit(</code><code>"config"</code><code>, configData)</code>
<code> </code><code>return</code> <code>seajs</code>
<code>Module</code> 類才是 seajs 的重頭戲，核心的核心。seajs 作為一個子產品加載器，是以子產品都是以一個 <code>Module</code> 對象儲存在 <code>cachedMods</code> 中的。
<code>var</code> <code>cachedMods = seajs.cache = {}</code>
每個子產品都有 8 種狀态，它一定是在這 8 種狀态之一，而且貌似狀态改變還是不可逆的。
<code>var</code> <code>STATUS = Module.STATUS = {</code>
<code> </code><code>// 沒定義狀态值為 0 的狀态常量，這是初始狀态</code>
<code> </code><code>// 1 - The `module.uri` is being fetched</code>
<code> </code><code>FETCHING: 1,</code>
<code> </code><code>// 2 - The meta data has been saved to cachedMods</code>
<code> </code><code>SAVED: 2,</code>
<code> </code><code>// 3 - The `module.dependencies` are being loaded</code>
<code> </code><code>LOADING: 3,</code>
<code> </code><code>// 4 - The module are ready to execute</code>
<code> </code><code>LOADED: 4,</code>
<code> </code><code>// 5 - The module is being executed</code>
<code> </code><code>EXECUTING: 5,</code>
<code> </code><code>// 6 - The `module.exports` is available</code>
<code> </code><code>EXECUTED: 6,</code>
<code> </code><code>// 7 - 404</code>
<code> </code><code>ERROR: 7</code>
其中 <code>SAVED</code> 狀态可以了解為 <code>FETCHED</code> 狀态。除了初始狀态 <code>0</code> 和錯誤狀态 <code>ERROR: 7</code> 之外，其它 6 個狀态都是成對出現的，即 <code>ING</code> 狀态和 <code>ED</code> 狀态，這三對狀态清晰的劃分出來三個處理過程：fetch、load、exec，對應于子產品對象的 3 個方法：<code>fetch()</code>, <code>load()</code>, <code>exec()</code>。
從代碼内容來看，這三個主要過程方法主要功能分别可以用一句話說明：
<code>fetch</code>，從 URL 加載子產品定義，得到 factory 函數，并将 factory 函數指派給對應的子產品對象（通過 <code>Module.get()</code> 建立或擷取）；
<code>load</code>，fetch 并 load 所有依賴子產品，并在保證所有依賴子產品都是 LOADED 狀态之後，調用入口子產品（<code>_entry</code>）的 <code>callback</code>（貌似隻有通過 <code>seajs.use()</code> 建立的匿名子產品才有 <code>callback</code>）
<code>exec</code>，在調用這個方法的時候，可以保證所有依賴子產品都已經是 LOADED 狀态了，是以 <code>exec</code>就隻是簡單的執行 factory 函數，并傳回 <code>exports</code>。factory 隻執行一次，然後将 <code>exports</code> 緩存下來。
現在來看看入口函數 <code>seajs.use()</code>、子產品定義函數 <code>define()</code>、子產品關系過程處理方法 <code>fetch()</code>,<code>load()</code>, <code>exec()</code> 的主要調用關系：
<code>// seajs.use 隻調用了 Module.use，是以它們的調用關系可以看作等同</code>
<code>seajs.use = Module.use = </code><code>function</code><code>() {</code>
<code> </code><code>Module.get()</code>
<code> </code><code>exec() </code><code>// 通過 _entry.callback 調用</code>
<code> </code><code>load()</code>
<code>define = Module.define = </code><code>function</code><code>() {</code>
<code> </code><code>Module.save(id, factory)</code>
<code>Module.prototype.fetch = </code><code>function</code><code>() {</code>
<code> </code><code>define() </code><code>// 通過 seajs.request() 調用</code>
<code>Module.prototype.load = </code><code>function</code><code>() {</code>
<code> </code><code>pass()</code>
<code> </code><code>fetch()</code>
<code> </code><code>// [遞歸]</code>
<code> </code><code>// 結束的條件是 _entry.remain === 1，</code>
<code> </code><code>// 即目前是最後一個依賴子產品</code>
<code> </code><code>// 遞歸結束時調用 _entry.callback，即調用了 exec</code>
<code> </code><code>load() </code>
<code>Module.prototype.exec = </code><code>function</code><code>() {</code>
<code> </code><code>exec() </code><code>// 通過 define 中定義的 factory 函數調用</code>
<code>Module.prototype.pass = </code><code>function</code><code>() {</code>
<code> </code><code>// 結束條件是把 _entry 傳遞到最末一層依賴</code>
<code> </code><code>// 遞歸過程通過 _entry.remain 進行了引用記數</code>
各函數和方法具體處理過程看代碼就明白了，因為遞歸關系有點複雜，還有一些回調關系在裡面，是以看起來有點繞，不過還算是看得明白。
本文轉自邊城__ 51CTO部落格，原文連結：http://blog.51cto.com/jamesfancy/1549706，如需轉載請自行聯系原作者
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)