javascript可程式的腳本載入用法實例詳解
- 伊谢尔伦原創
- 2017-07-21 15:45:511494瀏覽
可編程的腳本載入
雖然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中文網其他相關文章！