快捷導(dǎo)航

yepnope.js 異步加載資源文件

更新時(shí)間：2011年09月08日 00:17:30 作者：

yepnope.js是一個(gè)能夠根據(jù)輸入條件來(lái)選擇性異步加載資源文件的js腳本，可以在頁(yè)面上僅加載用戶需要的js/css。

典型代碼示例

 
yepnope({ 
test : Modernizr.geolocation, 
yep : 'normal.js', 
nope : ['polyfill.js', 'wrapper.js'] 
}); 

當(dāng)Modernizr.geolocation為真時(shí)，加載yep項(xiàng)也就是”normal.js”，否則加載nope項(xiàng)——可以同時(shí)加載多個(gè)文件。

yepnope和現(xiàn)有的xxx script loader有什么區(qū)別？
個(gè)人認(rèn)為主要是這兩點(diǎn)：

可以同時(shí)處理javascript以及css
能夠按條件加載
yepnope的全部參數(shù)

復(fù)制代碼代碼如下:

 
yepnope([{ 
test : /* boolean(ish) - 你要檢查真?zhèn)蔚谋磉_(dá)式 */, 
yep : /* array (of strings) | string - test為true時(shí)加載這項(xiàng) */, 
nope : /* array (of strings) | string - test為false時(shí)加載這項(xiàng) */, 
both : /* array (of strings) | string - 什么情況下都加載 */, 
load : /* array (of strings) | string - 什么情況下都加載 */, 
callback : /* function ( testResult, key ) | object { key : fn } 當(dāng)某個(gè)url加載成功時(shí)執(zhí)行相應(yīng)的方法 */, 
complete : /* function 都加載完成了執(zhí)行這個(gè)方法 */ 
}, ... ]); 

這里的參數(shù)都可以是array或者object，在加載多個(gè)資源文件的時(shí)候有用。

yepnope加載jquery的實(shí)例

復(fù)制代碼代碼如下:

 
yepnope([{ 
load: 'http:/&shy;/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(); 
}); 
} 
}]); 

這段代碼異步加載了jquery和jquery.plugin.js，甚至還對(duì)jquery加載失敗的情況做了一個(gè)備用處理。

您可能感興趣的文章:

yepnope.js使用詳解及示例分享

異步加載

相關(guān)文章

最簡(jiǎn)單的tab切換實(shí)例代碼
下面小編就為大家?guī)?lái)一篇最簡(jiǎn)單的tab切換實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
layui實(shí)現(xiàn)數(shù)據(jù)表格table分頁(yè)功能(ajax異步)
這篇文章主要為大家詳細(xì)介紹了layui實(shí)現(xiàn)數(shù)據(jù)表格table分頁(yè)功能、異步加載，表格渲染，含條件查詢，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-07-07
JS中some和every的區(qū)別和用法詳解
every?和?some?都是數(shù)組迭代方法,都可以遍歷數(shù)組,這篇文章主要介紹了JS中some和every的區(qū)別和用法,需要的朋友可以參考下
2023-05-05
wavesurfer.js繪制音頻波形圖的實(shí)現(xiàn)
這篇文章主要介紹了wavesurfer.js繪制音頻波形圖的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-04-04
Express框架詳解app函數(shù)使用實(shí)例
這篇文章主要為大家介紹了Express框架app函數(shù)使用實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
在一個(gè)頁(yè)面重復(fù)使用一個(gè)js函數(shù)的方法詳解
下面小編就為大家?guī)?lái)一篇在一個(gè)頁(yè)面重復(fù)使用一個(gè)js函數(shù)的方法詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧，祝大家游戲愉快哦
2016-12-12
js如何獲取兄弟、父類等節(jié)點(diǎn)
本文為大家介紹下js獲取兄弟、父類等節(jié)點(diǎn)的方法，感興趣的朋友可以參考下
2014-01-01
echarts實(shí)現(xiàn)響應(yīng)式定位和布局
這篇文章介紹了echarts實(shí)現(xiàn)響應(yīng)式定位和布局的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-06-06
淺談JavaScript變量的自動(dòng)轉(zhuǎn)換和語(yǔ)句
下面小編就為大家?guī)?lái)一篇淺談JavaScript變量的自動(dòng)轉(zhuǎn)換和語(yǔ)句。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-06-06
詳解JavaScript模塊化開(kāi)發(fā)
一個(gè)模塊就是實(shí)現(xiàn)特定功能的文件，有了模塊，我們就可以更方便地使用別人的代碼，想要什么功能，就加載什么模塊。模塊開(kāi)發(fā)需要遵循一定的規(guī)范，否則就都亂套了
2016-12-12