首頁  >  文章  >  web前端  >  javascript可程式的腳本載入用法實例詳解

javascript可程式的腳本載入用法實例詳解

伊谢尔伦
伊谢尔伦原創
2017-07-21 15:45:511487瀏覽

可編程的腳本載入

雖然3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤簡單得令人心動,但有些情況確實需要更精緻的腳本載入方式。我們可能只想給那些滿足一定條件的用戶加載某個腳本,譬如白金會員或達到一定級別的玩家,也可能只想當用戶單擊激活時才加載某個特性,譬如聊天小部件。
1、直接載入腳本
我們可以用類似下面這樣的程式碼插入3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤。


var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = '/js/feature.js';
head.appendChild(script);

稍等,我們如何知道腳本何時載入結束呢?我們可以為腳本本身添加一些程式碼來觸發事件,但如果要為每個待加載腳本都添加這樣的程式碼,那也太鬧心了。或者是另一種情況,即我們不可能為第三方伺服器上的腳本添加這樣的程式碼。 HTML5 規格定義了一個可以綁定回呼的onload 屬性。


script.onload = function() {
// 现在可以调用脚本里定义的函数了
};

不過, IE8 及較舊的版本並不支援onload , 它們支援的是onreadystatechange。某些瀏覽器在插入3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤時還會出現一些「靈異事件」。而且,這裡甚至還沒談到錯誤處理呢!為了避免
所有這些令人頭痛的問題,在此強烈建議使用腳本載入庫。

yepnope的條件載入
yepnope是一個簡單的、輕量級的腳本載入函式庫(壓縮後的精簡版只有1.7KB),其設計目標是真誠服務最常見的動態腳本載入需求。
yepnope 最簡單的用法是,載入腳本並對腳本完成運行這一事件傳回一個回呼。


yepnope({
  load: 'oompaLoompas.js',
  callback: function() {
  console.log('oompa-Loompas ready!');
  }
});

還是無動於衷?下面我們要用yepnope 來並行載入多個腳本並按給定次序運行它們。舉個例子,假設我們想載入Backbone.js,而這個腳本又依賴Underscore.js。為此,我們只需用數組形式提供這兩個腳本的位置作為載入參數。


yepnope({
  load: ['underscore.js', 'backbone.js'],
  complete: function() {
  // 这里是Backbone 的业务逻辑
  }
});

請注意,這裡使用了complete(完成)而不是callback(回呼)。

其差異在於,腳本載入清單中的每個資源都會執行callback,而只有當所有腳本都載入完成後才會執行complete。 yepnope 的標誌性特徵是條件載入。給定test 參數,yepnope 會根據該參數值是否為真而載入不同的資源。舉個例子,可以以一定的準確度判斷用戶是否在用觸控螢幕設備,從而據此相應地加載不同的樣式表及腳本。


yepnope({
  test: Modernizr.touch,
  yep: ['touchStyles.css', 'touchApplication.js'],
  nope: ['mouseStyles.css', 'mouseApplication.js'],
  complete: function() {
  // 不管是哪一种情况,应用程序均已就绪!
  }
});

我們只用寥寥幾行程式碼就搭好了舞台,可以基於用戶的接入設備而給他們完全不同的使用體驗。當然,不是所有的條件載入都需要備齊yep(是)和nope(否)這兩種測試結果。 yepnope 最常見的用法之一就是載入墊片腳本以彌補老式瀏覽器缺少的功能。


yepnope({
  test: window.json,nope: ['json2.js'],
  complete: function() {
  // 现在可以放心地用JSON 了
  }
});

頁面使用了yepnope 之後應該變成下面這個漂亮的標記結構:


<html>
<head>
  <!-- metadata and stylesheets go here -->
  <script src="headScripts.js"></scripts>
  <script src="deferredScripts.js" defer></script>
</head>
<body>
  <!-- content goes here -->
</body>
</html>

很眼熟?這個結構和討論defer 屬性那一節給出的結構一樣,唯一的區別是這裡的某個腳本檔案已經拼接了yepnope.js(很可能就在deferredScripts.js 的頂部),這樣就可以獨立地載入那些根據條件再載入的腳本(因為瀏覽器需要墊片腳本)和那些想要動態載入的腳本(以便回應使用者的動作)。結果將會是一個更小巧的deferredScripts.js。

#

以上是javascript可程式的腳本載入用法實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn