使用jQuery異步加載 JavaScript腳本解決方案

更新時(shí)間：2014年04月20日 15:09:59 作者：

這篇文章主要介紹了如何使用jQuery異步加載JavaScript腳本,需要的朋友可以參考下

JavaScript 加載器在 Web 開發(fā)中是非常強(qiáng)大和有用的工具。目前流行的幾個(gè)加載器，像 curljs、LABjs 和 RequireJS 使用都很廣泛。他們功能強(qiáng)大的，但有些情況下可以有更簡(jiǎn)單的方案。

如果你正在使用 jQuery，有一個(gè)內(nèi)置的方法可以用來加載腳本。如果你想延遲加載插件或任何其他類型的腳本，都可以使用這種方法。下面給大家介紹如何使用它。

實(shí)現(xiàn)方法

jQuery 內(nèi)置有 getScript 方法來加載一個(gè)腳本，處理返回的結(jié)果可以有幾種方法來實(shí)現(xiàn)。最基本的用法 jQuery.getScript 看起來像這樣：

復(fù)制代碼代碼如下:

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

/* 
　　在腳本已載入并執(zhí)行后，就可以做一些處理了 
*/ 

}); 

getScript 方法返回一個(gè) jqXHR 對(duì)象，因此可以這樣使用：

復(fù)制代碼代碼如下:

 
jQuery.getScript("/path/to/myscript.js") 
.done(function() { 
/* 執(zhí)行成功后的處理 */ 
}) 
.fail(function() { 
/* 執(zhí)行失敗后的處理 */ 
}); 

使用 jQuery.getScript 的最常見場(chǎng)景是延遲加載一個(gè)插件，并在加載后調(diào)用它：

復(fù)制代碼代碼如下:

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

如果你需要做更高級(jí)的事情，如加載多個(gè)腳本和不同類型的文件（文本文件，圖像，CSS 文件等），我建議你切換到一個(gè)功能更強(qiáng)大的 JavaScript 加載器。如果只想延遲加載插件，而不是簡(jiǎn)單地在每個(gè)頁(yè)面加載的情況下，getScript 是完美的！

緩存問題

需要注意的是，當(dāng)使用 jQuery.getScript 的時(shí)候，在腳本 URL 后面會(huì)自動(dòng)被添加上時(shí)間戳，讓腳本不緩存。因此你需要設(shè)置讓所有的請(qǐng)求都緩存腳本：

復(fù)制代碼代碼如下:

 
jQuery.ajaxSetup({ 
cache: true 
}); 

如果您不希望覆蓋所有的緩存與你的 AJAX 請(qǐng)求，最好使用 jQuery.ajax 方法并把 dataType 設(shè)置為 script，例如這樣：

復(fù)制代碼代碼如下:

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

在加載腳本的時(shí)候需要特別注意緩存問題！

您可能感興趣的文章: