yepnope.js 異步加載資源文件
更新時(shí)間：2011年09月08日 00:17:30 作者：
yepnope.js是一個(gè)能夠根據(jù)輸入條件來選擇性異步加載資源文件的js腳本，可以在頁面上僅加載用戶需要的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ù)
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í)例
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();
});
}
}]);
這段代碼異步加載了jquery和jquery.plugin.js，甚至還對(duì)jquery加載失敗的情況做了一個(gè)備用處理。
復(fù)制代碼 代碼如下:
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:/­/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è)備用處理。
您可能感興趣的文章:
相關(guān)文章
微信小程序?qū)崿F(xiàn)手勢(shì)滑動(dòng)卡片效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)手勢(shì)滑動(dòng)卡片效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
這篇文章主要為大家詳細(xì)介紹了js圖片輪播效果實(shí)現(xiàn)原理，幫助大家更好地實(shí)現(xiàn)圖片輪播效果，真正理解圖片輪播原理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-12-12
js Html結(jié)構(gòu)轉(zhuǎn)字符串形式顯示代碼
js Html結(jié)構(gòu)轉(zhuǎn)字符串形式顯示代碼，需要的朋友可以參考下。2011-11-11
JavaScript類的繼承操作實(shí)例總結(jié)
這篇文章主要介紹了JavaScript類的繼承操作,結(jié)合實(shí)例形式總結(jié)分析了JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)中類的繼承常見實(shí)現(xiàn)方式與操作技巧,需要的朋友可以參考下2018-12-12
js下的一些小技巧，需要的朋友可以下。2009-12-12
本文介紹了jQuery擴(kuò)展、私有域、定義插件的基本步驟等知識(shí)，有需要的朋友可以看下2016-11-11
本篇文章主要是對(duì)使用js判斷控件是否獲得焦點(diǎn)的方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
javascript一些不錯(cuò)的函數(shù)腳本代碼
收集一些不多見的好用的自定義函數(shù)代碼 計(jì)算字符長(zhǎng)度的js函數(shù) 去字符中前后的空格的js函數(shù) 圖片自適應(yīng)大小函數(shù)代碼2008-09-09
在全局執(zhí)行環(huán)境中使用this，標(biāo)識(shí)Global對(duì)象，在瀏覽器中就是window對(duì)象。2010-03-03
這篇文章主要介紹了javascript彈出窗口實(shí)現(xiàn)代碼，非常人性化的設(shè)計(jì)，點(diǎn)擊頁面可以彈出窗口，感興趣的小伙伴們可以參考一下2015-11-11