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

yepnope.js的一个典型实例:

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

此实例表示如果Modernizr.geolocation为真的时候加载normal.js，为假则加载polyfill.js及wrapper.js。

yepnope完整语法：

yepnope([{
test:/*boolean(ish)输入条件*/,
yep:/*array(ofstrings)|string-条件为真时加载的资源*/,
nope:/*array(ofstrings)|string-条件为假时加载的资源*/,
both:/*array(ofstrings)|string-条件无论真假都加载*/,
load:/*array(ofstrings)|string-条件无论真假都加载*/,
callback:/*function(testResult,key)|object{key:fn}回调函数*/,
complete:/*function加载完成后执行的函数*/
},...]);

为什么使用yepnope：

Gzip后只有1.6K比大多数的资源加载器都小
可以加载CSS及JS
yepnope通过了作者能找到的所有的浏览器的测试
yepnope完全分离资源加载和执行，这样你可以控制资源的执行顺序
提供友好的API和促进资源的逻辑组合
模块化设计，你可以自己扩充功能（见稍后的Prefixes及filters）
鼓励按需加载资源
集成在Modernizr中
默认总是按照资源列表（你所提供的文件列表顺序）顺序执行
可处理资源回退（fallback），且仍优先并行下载依赖的脚本，看下代码更容易理解：

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

而其他加载器则可能必须这样处理:

someLoader("http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js",function(){
if(!window.jQuery){
someLoader("local/jquery.min.js","jquery.plugin.js");
/*注意这点和yepnope的区别，yepnope加载失败后仅需重新加载备用资源即可，不会影响依赖此资源的其他文件执行*/
}else{
someLoader("jquery.plugin.js");
}
});

yepnope的不足

并不总是最快的，像labjs等优化后可能加载速度优于yepnope，但需要根据你的实际情况考虑使用哪个加载器
需要给资源设置一定的缓存头（这一点很重要）
并不像RequireJS等类库有自己的生成工具及丰富的API，yepnope仅实现了基本加载器功能
默认总是按照你提供的资源列表顺序执行，这一点有可能会影响速度

yepnope使用实例:

直接传入字符串

yepnope("/url/to/your/script.js");

传入一个Object对象

yepnope({
load:"/url/to/your/script.js"
});

回调函数实例（回调函数中url表示加载的资源文件名;result表示test参数的结果;key表示使用keymaping时候的文件名缩写）

yepnope({
test:window.JSON,
load:"/url/to/your/script.js",
callback:function(url,result,key){
//wheneverthisruns,yourscripthasjustexecuted.
alert("script.jshasloaded!");
}
});

complete函数实例

yepnope({
test:window.JSON,
nope:"json2.js",
complete:function(){
vardata=window.JSON.parse("{"json":"string"}");
}
});

Keymaping实例

yepnope({
test:Modernizr.geolocation,
yep:{
"rstyles":"regular-styles.css"
},
nope:{
"mstyles":"modified-styles.css",
"geopoly":"geolocation-polyfill.js"
},
callback:function(url,result,key){
if(key==="geopoly"){
alert("Thisisthegeolocationpolyfill!");
}
}
});

当然回调函数你还可以这样写:

yepnope({
test:Modernizr.geolocation,
yep:{
"rstyles":"regular-styles.css"
},
nope:{
"mstyles":"modified-styles.css",
"geopoly":"geolocation-polyfill.js"
},
callback:{
"rstyles":function(url,result,key){
alert("Thisistheregularstyles!");
},
"mstyles":function(url,result,key){
alert("Thisisthemodifiedstyles!");
},
"geopoly":function(url,result,key){
alert("Thisisthegeolocationpolyfill!");
}
},
complete:function(){
alert("Everythinghasloadedinthistestobject!");
}
});

yepnope官方提供的3个Prefixes

css!Prefix:可以加载任何后缀的文件作为css文件

yepnope("css!mystyles.php?version=1532");

preload!Prefix:预加载资源到缓存中,但不执行（下次load时候才执行）

yepnope({
load:"preload!jquery.1.5.0.js",
callback:function(url,result,key){
window.jQuery;//undefined
yepnope(jquery.1.5.0.js);
window.jQuery;//object
}
});

ie!Prefix(es):判断是否IE浏览器（除ie!外,还支持ie5,ie6,ie7,ie8,ie9,iegt5,iegt6,iegt7,iegt8,ielt7,ielt8,及ielt9这几种Prefix）

yepnope({
load:["normal.js","ie6!ie7!ie-patch.js"]//ie6orie7only(onpatch)
});