使用jQuery動(dòng)態(tài)加載js腳本文件的方法

更新時(shí)間：2014年04月03日 10:58:54 作者：

動(dòng)態(tài)加載Javascript是一項(xiàng)非常強(qiáng)大且有用的技術(shù)。這方面的主題在網(wǎng)上已經(jīng)討論了不少，我也經(jīng)常會(huì)在一些個(gè)人項(xiàng)目上使用RequireJS和Dojo加載js

它們很強(qiáng)大，但有時(shí)候也會(huì)得不償失。如果你使用的是jQuery，它里面有一個(gè)內(nèi)置的方法可以用來(lái)加載單個(gè)js文件。當(dāng)你需要延遲加載一些js插件或其它類型的文件時(shí)，可以使用這個(gè)方法。下面就介紹一下如何使用它！

一、jQuery getScript()方法加載JavaScript

jQuery內(nèi)置了一個(gè)方法可以加載單一的js文件；當(dāng)加載完成后你可以在回調(diào)函數(shù)里執(zhí)行后續(xù)操作。最基本的使用jQuery.getScript的方法是這樣：

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

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

/*
做一些加載完成后需要執(zhí)行的事情
*/

});

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

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

jQuery.getScript("/path/to/myscript.js")
 .done(function() {
  /* 耶，沒(méi)有問(wèn)題，這里可以干點(diǎn)什么 */
 })
 .fail(function() {
  /* 靠，馬上執(zhí)行挽救操作 */
});

最常見(jiàn)的使用jQuery.getScript的地方是延遲加載一個(gè)js插件，而且在加載完成時(shí)執(zhí)行它：

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

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

二、緩存問(wèn)題

有一個(gè)非常重要的問(wèn)題，使用jQuery.getScript時(shí)，你需要用一個(gè)時(shí)間戳字符串跟在需要加載的js地址后面，防止它被緩存。但是，如果你希望這個(gè)腳本被緩存，你需要設(shè)置全局緩存變量，像下面這樣：

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

jQuery.ajaxSetup({
  cache: true
});

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

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

在加載腳本時(shí)一定要小心緩存問(wèn)題！

您可能感興趣的文章:

相關(guān)文章

jquery自定義插件開(kāi)發(fā)之window的實(shí)現(xiàn)過(guò)程
這篇文章主要介紹了jquery自定義插件開(kāi)發(fā)之window的實(shí)現(xiàn)過(guò)程的相關(guān)資料,需要的朋友可以參考下
2016-05-05
jQuery.form插件的使用及跨域異步上傳文件
這個(gè)跨域異步上傳功能我們借助了Jquery.form插件。接下來(lái)通過(guò)本文給大家介紹jQuery跨域異步上傳文件的相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧
2016-04-04
淺談jQuery的offset()方法及示例分享
這篇文章主要介紹了淺談jQuery的offset()方法及示例分享的相關(guān)資料,需要的朋友可以參考下
2015-07-07
jquery通過(guò)name屬性取值的簡(jiǎn)單實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jquery通過(guò)name屬性取值的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-06-06
jQuery中的height innerHeight outerHeight區(qū)別示例介紹
這篇文章主要介紹了jQuery中的height innerHeight outerHeight的區(qū)別,需要的朋友可以參考下
2014-06-06
jquery 年會(huì)抽獎(jiǎng)程序
最近公司年會(huì)，有個(gè)流程要抽獎(jiǎng)，特寫(xiě)了個(gè)一個(gè)簡(jiǎn)單的，純jq代碼，發(fā)給大家共享一下
2011-12-12
使用 jQuery 實(shí)現(xiàn)表單驗(yàn)證功能
表單作為 HTML 最重要的一個(gè)組成部分，幾乎在每個(gè)網(wǎng)頁(yè)上都有體現(xiàn)，例如用戶提交信息、用戶反饋信息和用戶查詢信息等，因此它是網(wǎng)站管理者與瀏覽者之間溝通的橋梁。下面通過(guò)實(shí)例代碼給大家介紹jQuery 實(shí)現(xiàn)表單驗(yàn)證功能
2017-07-07
asp.net 30分鐘掌握無(wú)刷新 Repeater
經(jīng)過(guò)數(shù)個(gè)版本的迭代后, JQueryElement 3.3.0 版本中的 Repeater 基本上已經(jīng)完善, 這里將分功能的總結(jié)講解一下 Repeater 的使用方法.
2011-09-09
jquery插件實(shí)現(xiàn)圖片對(duì)比
這篇文章主要為大家詳細(xì)介紹了jquery插件實(shí)現(xiàn)圖片對(duì)比，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
基于Jquery和html5的7款個(gè)性化地圖插件
現(xiàn)在我們經(jīng)常會(huì)用到一些地圖應(yīng)用，無(wú)論是在網(wǎng)頁(yè)上還是手機(jī)App中，地圖貌似是一個(gè)不可或缺的應(yīng)用。本文將帶領(lǐng)大家一起來(lái)看看jQuery和HTML5的個(gè)性化地圖插件，都是比較實(shí)用的，感興趣的朋友一起學(xué)習(xí)吧
2015-11-11