yepnope.js 異步加載資源文件

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

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

典型代碼示例

復制代碼代碼如下:

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

當Modernizr.geolocation為真時，加載yep項也就是”normal.js”，否則加載nope項——可以同時加載多個文件。

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

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

復制代碼代碼如下:

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

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

yepnope加載jquery的實例

復制代碼代碼如下:

 
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，甚至還對jquery加載失敗的情況做了一個備用處理。

您可能感興趣的文章:

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

異步加載

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