典型代碼示例
復制代碼 代碼如下:
yepnope({
test : Modernizr.geolocation,
yep : 'normal.js',
nope : ['polyfill.js', 'wrapper.js']
});
當Modernizr.geolocation為真時，加載yep項也就是”normal.js”，否則加載nope項——可以同時加載多個文件。
yepnope和現有的xxx script loader有什麼區別？
個人認為主要 是這兩點：
可以同時處理javascript以及css
能夠按條件加載
yepnope的全部參數
復制代碼 代碼如下:
yepnope([{
test : /* boolean(ish) - 你要檢查真偽的表達式 */,
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加載成功時執行相應的方法 */,
complete : /* function 都加載完成了執行這個方法 */
}, ... ]);
這裡的參數都可以是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加載失敗的情況做了一個備用處理。