yepnope.js 異步加載資源文件
更新時間:2011年09月08日 00:17:30 作者:
yepnope.js是一個能夠根據輸入條件來選擇性異步加載資源文件的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:/­/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({
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:/­/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加載失敗的情況做了一個備用處理。
您可能感興趣的文章:
相關文章
layui實現(xiàn)數(shù)據表格table分頁功能(ajax異步)
這篇文章主要為大家詳細介紹了layui實現(xiàn)數(shù)據表格table分頁功能、異步加載,表格渲染,含條件查詢,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-07-07