yepnope.js使用詳解及示例分享
yepnope.js的一個(gè)典型實(shí)例:
yepnope({
test : Modernizr.geolocation,
yep : 'normal.js',
nope : ['polyfill.js', 'wrapper.js']
});
此實(shí)例表示如果Modernizr.geolocation為真的時(shí)候加載normal.js，為假則加載polyfill.js及wrapper.js。
yepnope完整語法：
yepnope([{
test : /* boolean(ish) 輸入條件 */,
yep : /* array (of strings) | string - 條件為真時(shí)加載的資源 */,
nope : /* array (of strings) | string - 條件為假時(shí)加載的資源 */,
both : /* array (of strings) | string - 條件無論真假都加載 */,
load : /* array (of strings) | string - 條件無論真假都加載 */,
callback : /* function ( testResult, key ) | object { key : fn } 回調(diào)函數(shù) */,
complete : /* function 加載完成后執(zhí)行的函數(shù) */
}, ... ]);
為什么使用yepnope：
Gzip后只有1.6K比大多數(shù)的資源加載器都小
可以加載CSS及JS
yepnope通過了作者能找到的所有的瀏覽器的測(cè)試
yepnope完全分離資源加載和執(zhí)行，這樣你可以控制資源的執(zhí)行順序
提供友好的API和促進(jìn)資源的邏輯組合
模塊化設(shè)計(jì)，你可以自己擴(kuò)充功能（見稍后的Prefixes及filters）
鼓勵(lì)按需加載資源
集成在 Modernizr 中
默認(rèn)總是按照資源列表（你所提供的文件列表順序）順序執(zhí)行
可處理資源回退（fallback），且仍優(yōu)先并行下載依賴的腳本，看下代碼更容易理解：
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();
});
}
}
]);
而其他加載器則可能必須這樣處理:
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' );
/*注意這點(diǎn)和yepnope的區(qū)別，yepnope加載失敗后僅需重新加載備用資源即可，不會(huì)影響依賴此資源的其他文件執(zhí)行*/
} else {
someLoader( 'jquery.plugin.js' );
}
});
yepnope的不足
并不總是最快的，像labjs等優(yōu)化后可能加載速度優(yōu)于yepnope，但需要根據(jù)你的實(shí)際情況考慮使用哪個(gè)加載器
需要給資源設(shè)置一定的緩存頭（這一點(diǎn)很重要）
并不像RequireJS等類庫有自己的生成工具及豐富的API，yepnope僅實(shí)現(xiàn)了基本加載器功能
默認(rèn)總是按照你提供的資源列表順序執(zhí)行，這一點(diǎn)有可能會(huì)影響速度
yepnope使用實(shí)例:
直接傳入字符串
yepnope( '/url/to/your/script.js' );
傳入一個(gè)Object對(duì)象
yepnope( {
load : '/url/to/your/script.js'
} );
回調(diào)函數(shù)實(shí)例（回調(diào)函數(shù)中url表示加載的資源文件名;result表示test參數(shù)的結(jié)果;key表示使用 key maping 時(shí)候的文件名縮寫）
yepnope( {
test : window.JSON,
load : '/url/to/your/script.js',
callback : function ( url, result, key ) {
// whenever this runs, your script has just executed.
alert( 'script.js has loaded!' );
}
} );
complete函數(shù)實(shí)例
yepnope( {
test : window.JSON,
nope : 'json2.js',
complete : function () {
var data = window.JSON.parse( '{ "json" : "string" }' );
}
} );
Key maping實(shí)例
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!' );
}
}
} );
當(dāng)然回調(diào)函數(shù)你還可以這樣寫:
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個(gè)Prefixes
css! Prefix:可以加載任何后綴的文件作為css文件
yepnope( 'css!mystyles.php?version=1532' );
preload! Prefix:預(yù)加載資源到緩存中,但不執(zhí)行（下次load時(shí)候才執(zhí)行）
yepnope( {
load : 'preload!jquery.1.5.0.js',
callback : function ( url, result, key ) {
window.jQuery; //undefined
yepnope(jquery.1.5.0.js);
window.jQuery; //object
}
} );
ie! Prefix(es):判斷是否IE瀏覽器（除ie!外,還支持 ie5, ie6, ie7, ie8, ie9, iegt5, iegt6, iegt7, iegt8, ielt7, ielt8, 及 ielt9這幾種Prefix）
yepnope({
load: ['normal.js', 'ie6!ie7!ie-patch.js'] // ie6 or ie7 only (on patch)
});
相關(guān)文章
微信小程序自定義select下拉選項(xiàng)框組件的實(shí)現(xiàn)代碼
微信小程序中沒有select下拉選項(xiàng)框，所以只有自定義。這篇文章主要介紹了微信小程序自定義select下拉選項(xiàng)框組件,需要的朋友可以參考下2018-08-08
同時(shí)使用n個(gè)window onload加載實(shí)例介紹
window onload加載多個(gè)同時(shí)使用，想必有很多人沒有用過吧，接下來為大家詳細(xì)介紹下具體的使用方法，感興趣的朋友可以參考下2013-04-04
這篇文章主要介紹了JS求解三元一次方程組值的方法,涉及JS數(shù)學(xué)運(yùn)算的相關(guān)操作技巧,需要的朋友可以參考下2017-01-01
JavaScript實(shí)現(xiàn)頁面截圖3種解決方案
網(wǎng)頁截圖是指將網(wǎng)頁上的內(nèi)容截取下來,并保存為圖片的過程,下面這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)頁面截圖的3種解決方案,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06
基于HTML模板和JSON數(shù)據(jù)的JavaScript交互(移動(dòng)端)
這篇文章主要介紹了基于HTML模板和JSON數(shù)據(jù)的JavaScript交互(移動(dòng)端)的相關(guān)資料,需要的朋友可以參考下2016-04-04
JS監(jiān)聽dom高度變化幾種常用方法總結(jié)
我們?cè)陂_發(fā)中會(huì)遇到一些需求,需要監(jiān)聽元素變化,比如元素屬性變化,元素大小變化,這篇文章主要給大家介紹了關(guān)于JS監(jiān)聽dom高度變化幾種常用方法的相關(guān)資料,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了JS的拖拽屬性draggable詳解,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
JavaScript中如何跳出forEach循環(huán)代碼示例
循環(huán)遍歷一個(gè)元素是開發(fā)中最常見的需求之一,下面這篇文章主要給大家介紹了關(guān)于JavaScript中如何跳出forEach循環(huán)的相關(guān)資料,文章通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06
Python版實(shí)現(xiàn)微信公眾號(hào)掃碼登陸
這篇文章主要介紹了Python版實(shí)現(xiàn)微信公眾號(hào)掃碼登陸，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要介紹用js的confirm實(shí)現(xiàn)的刪除條目時(shí)彈出的確認(rèn)對(duì)話框，詢問是否要?jiǎng)h除這條記錄,需要的朋友可以參考下2014-06-06