可編程的腳本載入
雖然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中文網其他相關文章!