yepnope.js 异步加载资源文件

283 阅读 0 评论 187 点赞

我是靠谱客的博主儒雅灯泡，最近开发中收集的这篇文章主要介绍yepnope.js 异步加载资源文件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

典型代码示例

复制代码代码如下:

 
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(); 
}); 
} 
}]); 