yepnope.js的典型實例:
1 2 3 4 5 | yepnope({
test : Modernizr.geolocation,
yep : 'normal.js' ,
nope : [ 'polyfill.js' , 'wrapper.js' ]
});
|
登入後複製
此實例表示如果Modernizr.geolocation為真的時候載入normal.js,為假則載入polyfill.js及wrapper.js。
yepnope完整語法:
1 2 3 4 5 6 7 8 9 | yepnope([{
test : ,
yep : ,
nope : ,
both : ,
load : ,
callback : ,
complete :
}, ... ]);
|
登入後複製
為什麼要用yepnope:
Gzip後只有1.6K比大多數的資源載入器都小
可以載入CSS及JS
yepnope通過了作者所能找到的所有的瀏覽器的測試
yepnope完全分離資源載入和執行,這樣你就可以控制資源的執行順序
提供友善的API和促進資源的邏輯組合
模組化設計,你可以自己擴充功能(見稍後的Prefixes及filters)
鼓勵按需加載資源
整合在 Modernizr 中
預設總是按照資源清單(你所提供的檔案清單順序)順序執行
可處理資源回退(fallback),且仍優先並行下載依賴的腳本,看下程式碼更容易理解:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | yepnope([
{
load: 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' ,
complete: function () {
if ( ! window.jQuery ) {
yepnope( 'local/jquery.min.js' );
}
}
},
{
load : 'jquery.plugin.js' ,
complete: function () {
jQuery( function () {
jQuery( 'div' ).plugin();
});
}
}
]);
|
登入後複製
而其他載入器則可能必須這樣處理:
1 2 3 4 5 6 7 8 | someLoader( 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' , function (){
if ( ! window.jQuery ) {
someLoader( 'local/jquery.min.js' , 'jquery.plugin.js' );
} else {
someLoader( 'jquery.plugin.js' );
}
});
|
登入後複製
yepnope的不足
並不總是最快的,像labjs等最佳化後可能載入速度優於yepnope,但需要根據你的實際情況考慮使用哪個載入器
需要給資源設定一定的快取頭(這一點很重要)
不像RequireJS等類別庫有自己的生成工具及豐富的API,yepnope僅實現了基本載入器功能
預設總是按照你提供的資源清單順序執行,這一點有可能會影響速度
yepnope使用實例:
直接傳入字串
1 | yepnope( '/url/to/your/script.js' );
|
登入後複製
傳入一個Object物件
1 2 3 | yepnope( {
load : '/url/to/your/script.js'
} );
|
登入後複製
回呼函數實例(回呼函數中url表示載入的資源檔名;result表示test參數的結果;key表示使用 key maping 時候的檔名縮寫)
1 2 3 4 5 6 7 8 | yepnope( {
test : window.JSON,
load : '/url/to/your/script.js' ,
callback : function ( url, result, key ) {
alert( 'script.js has loaded!' );
}
} );
|
登入後複製
complete函數實例
1 2 3 4 5 6 7 | yepnope( {
test : window.JSON,
nope : 'json2.js' ,
complete : function () {
var data = window.JSON.parse( '{ "json" : "string" }' );
}
} );
|
登入後複製
Key maping實例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | yepnope( {
test : Modernizr.geolocation,
yep : {
'rstyles' : 'regular-styles.css'
},
nope : {
'mstyles' : 'modified-styles.css' ,
'geopoly' : 'geolocation-polyfill.js'
},
callback : function ( url, result, key ) {
if ( key === 'geopoly' ) {
alert( 'This is the geolocation polyfill!' );
}
}
} );
|
登入後複製
當然回呼函數你還可以這樣寫:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | yepnope( {
test : Modernizr.geolocation,
yep : {
'rstyles' : 'regular-styles.css'
},
nope : {
'mstyles' : 'modified-styles.css' ,
'geopoly' : 'geolocation-polyfill.js'
},
callback : {
'rstyles' : function ( url, result, key ) {
alert( 'This is the regular styles!' );
},
'mstyles' : function ( url, result, key ) {
alert( 'This is the modified styles!' );
},
'geopoly' : function ( url, result, key ) {
alert( 'This is the geolocation polyfill!' );
}
},
complete : function () {
alert( 'Everything has loaded in this test object!' );
}
} );
|
登入後複製
yepnope官方提供的3個Prefixes
css! Prefix:可以載入任何後綴的檔案作為css檔案
1 | yepnope( 'css!mystyles.php?version=1532' );
|
登入後複製
preload! Prefix:預先載入資源到快取中,但不執行(下次load時候才執行)
1 2 3 4 5 6 7 8 | yepnope( {
load : 'preload!jquery.1.5.0.js' ,
callback : function ( url, result, key ) {
window.jQuery;
yepnope(jquery.1.5.0.js);
window.jQuery;
}
} );
|
登入後複製
ie! Prefix(es):判斷是否IE瀏覽器(除ie!外,還支援ie5, ie6, ie7, ie8, ie9, iegt5, iegt6, iegt7, iegt8, ielt7, ieltgt5, iegt6, iegt7, iegt8, ielt7, ieltgt, 及ielt9這幾種Prefix)
1 2 3 | yepnope({
load: [ 'normal.js' , 'ie6!ie7!ie-patch.js' ]
});
|
登入後複製