使用jQuery載入js指令碼

動態載入Javascript是一項非常強大且有用的技術。這方面的主題在本站已經討論了不少，我也經常會在一些個人專案上使用RequireJS和Dojo載入js。它們很強大，但有時候也會得不償失。如果你使用的是jQuery，它裡面有一個內建的方法可以用來載入單個js檔案。當你需要延遲載入一些js外掛或其它型別的檔案時，可以使用這個方法。下面就介紹一下如何使用它！

jQuery JavaScript

jQuery內建了一個方法可以載入單一的js檔案；當載入完成後你可以在回撥函式裡執行後續操作。最基本的使用jQuery.getScript的方法是這樣：

jQuery.getScript("/path/to/myscript.js", function(data, status, jqxhr) {

        /* 
                做一些載入完成後需要執行的事情
        */        

});

這個getScript方法返回一個jqxhr，你可以像下面這樣用它：

jQuery.getScript("/path/to/myscript.js")
        .done(function() {
                /* 耶，沒有問題，這裡可以乾點什麼 */
        })
        .fail(function() {
                /* 靠，馬上執行挽救操作 */
});

最常見的使用jQuery.getScript的地方是延遲載入一個js外掛，而且在載入完成時執行它：

jQuery.getScript("jquery.cookie.js")
        .done(function() {
                jQuery.cookie("cookie_name", "value", { expires: 7 });
});

如果你需要更高階的功能，比如載入多個指令碼，或載入不同型別的檔案(文字檔案，圖片，css等)，我建議你使用一個專門的JavaScript載入工具。如果是為了延遲載入一個js外掛，避免每個頁面都去載入，這個getScript很完美了。

快取問題

有一個非常重要的問題，使用jQuery.getScript時，你需要用一個時間戳字串跟在需要載入的js地址後面，防止它被快取。但是，如果你希望這個指令碼被快取，你需要設定全域性快取變數，像下面這樣：

jQuery.ajaxSetup({
  cache: true
});

如果你並不想使用全域性快取變數，你也可以使用jQuery.ajax，並註明dataType是script：

jQuery.ajax({
      url: "jquery.cookie.js",
      dataType: "script",
      cache: true
}).done(function() {
                jQuery.cookie("cookie_name", "value", { expires: 7 });
});

在載入指令碼時一定要小心快取問題！