一次痛苦的seajs查“錯”經歷

關於Seajs這裡無需多講，作為一個前端開發或多或少都是聽過它的大名。

最近接手一個專案，模組編寫使用CMD規範，載入使用Seajs。OK，暫時也不太好更改這種模式，那就遵循現有的規範來寫程式碼吧。

但是在檢視頁面載入的檔案列表時，我瞬間一臉懵逼，為啥呢？多出來幾個“不速之客”！如下圖

好吧，這麼說，可能大家還是一臉懵逼，六神無主，我們來看看具體的程式碼

    function getData() {
        //執行獲取資料前需要載入2個依賴的模組
        var $u = require('WebTools'),
            $ = require('jquery');
    }

一眼看上去簡直是非常理想的模組按需載入的思路，getData函式的執行需要依賴於WebTools和jquery這2個模組，但是在它執行之前是不需要載入這2位大爺的，因此，我們在這個函式內部採取希望引入相應的模組。一切設想都是美好的，這裡同樣如此。

然後，程式碼執行，在getData還未執行時，我“驚喜”地發現，模組居然被引入了。發現這個問題以後，我在seajs的全域性配置檔案中，看是否這2個模組走了“快速”通道被預載入了，然後，配置檔案如下：

    preload: ['jquery','commonTemplate','WebTools']

哦，原來是在這裡設定了模組預載入啊，問題的癥結原來是出在這裡？於是，我把這句配置程式碼註釋掉，重新整理頁面，尼瑪...那幾個模組檔案還是被載入了。

難道是快取？不說了，我要清快取了，清完快取，重新整理頁面，模組還是被引用了！！！啥也不說了，讓我哭會兒先。這個時候看來沒什麼招了，那就去seajs的官方文件上瞅瞅去。

從文件上，連結到了<a href="http://www.zhangxinxu.com/sp/seajs/docs/rules.html" target="_blank">[張老師的部落格]，我直接把關鍵的資訊貼到下面

從這上面的說明，告訴我們，模組的載入實現不是執行時的，seajs會解析js靜態文字，提取require的模組對應的檔案並將它們載入到頁面上。而且，不管這個require程式碼是否執行，都不影響它的載入。ps.讓seajs做一個固執的美男子。

為了驗證這段話的真實性，於是我註釋掉沒有執行的require程式碼，這些模組果然沒有被載入，看來真是這個原因，原來我們一直以為的按需載入都是自己誤解下的“按需載入”。

那麼，我們想在這裡按需載入，程式碼不執行時不載入相應的模組，就得使用上面提到的

    require.asyc('./a.js',function(a){
        //a是載入成功的模組輸出
    })

經過這個“痛苦”迷惑的過程，終於把問題搞清楚了。其實歸根結底還是由於自己在使用一個框架之前沒有非常深入地去了解它的機制，沒有了解透徹的第三方庫或者框架對於我們的專案而言無異於酣睡的猛虎/定時的炸彈。切忌人與亦云，自勉！

----前端C羅