Yepnope.js是一个超高速的加载器，根据条件异步加载资源，允许你只加载使用过的资源(css和js)。

yepnope.js的一个典型实例

yepnope({

test : Modernizr.geolocation，

是的：“normal.js”，

否：[polyfill.js ， wrapper.js]

});

此示例指示如果Modernizr.geolocation为true，则加载normal.js，如果为false，则加载polyfill.js和wrapper.js。

yepnope完整语法

yepnope([{

Test: /*布尔(ish)输入条件*/，

Yep:/* array(of string)| string-当条件为真时加载的资源*/，

no:/* array(of string)| string-当条件为false时加载的资源*/，

both:/* array(of strings)| string-无论条件是否为真，都会加载该条件*/，

load:/* array(of strings)| string-无论条件是否为真，都将被加载*/，

回调：/*函数(测试结果，key) |对象{key: fn}回调函数*/，

Complete: /* function加载完成后要执行的函数*/

},]);

为什么使用yepnope

Gzip之后只有1.6K，比大多数资源加载器都小。

可以加载CSS和JS。

Yepnope已经通过了作者能找到的所有浏览器的测试。

Yepnope将资源加载和执行完全分开，这样就可以控制资源的执行顺序。

提供友好的API，促进资源的逻辑组合。

模块化设计，可以自行扩展功能(见后面的前缀和过滤器)

鼓励按需加载资源。

融入现代生活

默认情况下，它总是按照资源列表的顺序(您提供的文件列表的顺序)执行。

可以处理资源回退，并且仍然优先并行下载依赖脚本。通过查看代码更容易理解：

yepnope([

{

load: http://Ajax . Google APIs . com/Ajax/libs/jquery/1 . 5 . 1/jquery . min . js ，

完成：函数(){

如果(！window.jQuery ) {

Yep nope( local/jquery . min . js )；

}

}

},

{

load : jquery.plugin.js ，

完成：函数(){

jQuery(function () {

jQuery( div )。插件()；

});

}

}

]);

而其他加载器可能必须这样处理它：

some loader( http://Ajax . Google APIs . com/Ajax/libs/jquery/1 . 5 . 1/jquery . min . js ，function(){

如果(！window.jQuery ) {

some loader( local/jquery . min . js ， jquery . plugin . js )；

/*注意这一点和yepnope的区别。yepnope加载失败后，只需要重新加载备用资源，不会影响依赖该资源的其他文件的执行*/

}否则{

some loader( jquery . plugin . js )；

}

});

yepnope的不足

它不总是最快的。经过labjs等优化后，加载速度可能会比yepnope更好，但你需要根据自己的实际情况考虑使用哪种加载器。

为资源设置特定的缓存头是很重要的。

不像RequireJS等类库有自己的生成工具和丰富的API，yepnope只实现了基本的loader功能。

默认情况下，它总是按照您提供的资源列表的顺序执行，这可能会影响速度。

yepnope使用实例

直接传入字符串

Yep nope(/URL/to/your/script . js )；

传入一个Object对象。

yepnope( {

加载：“/url/to/your/script.js”

} );

回调函数实例

yepnope( {

测试：窗口。JSON，

load:“/URL/to/your/script . js”，

回调：函数(url，结果，关键字){

//无论何时运行，您的脚本都刚刚执行。

alert( script.js已加载！);

}

} );

complete函数实例

yepnope( {

测试：窗口。JSON，

不是：“json2.js”，

完成：函数(){

var数据=窗口。JSON . parse( { JSON : string } )；

}

} );

Key maping实例

yepnope( {

test : Modernizr.geolocation，

是：{

rstyles : regular-styles.css

},

不：{

mstyles : modified-styles.css ，

geo poly : geolocation-poly fill . js

},

回调：函数(url，结果，关键字){

if ( key===地缘政治){

alert(这是地理定位聚合填充！);

}

}

} );

当然，

回调函数

yepnope( {

test : Modernizr.geolocation，

是：{

rstyles : regular-styles.css

},

不：{

mstyles : modified-styles.css ，

geo poly : geolocation-poly fill . js

},

回拨：{

rstyles :函数(网址，结果，关键字){

警报(这是常规款式!);

},

mstyles :函数(网址，结果，关键字){

警报(这是修改过的款式!);

},

地缘政治：函数(网址，结果，关键字){

警报(这是地理定位聚合填充!);

}

},

完成：函数(){

警报(所有内容都已加载到该测试对象中!);

}

} );

yepnope官方提供的3个Prefixes

css！前缀：可以加载任何后缀的文件作为钢性铸铁文件

yepnope( css！mystyles.php？version=1532’)；

预载！前缀：预加载资源到缓存中，但不执行（下次负荷时候才执行)

yepnope( {

加载："预加载！ jquery.1.5.0.js ，

回调：函数(网址，结果，关键字){

window.jQuery//未定义

是的没有(jquery。1 .5 .0 .js)；

window.jQuery//对象

}

} );

ie！前缀：判断是否工业管理学(工业工程)浏览器（除ie！外，还支持ie5，ie6，ie7，ie8，ie9，iegt5，iegt6，iegt7，iegt8，ielt7，ielt8，及雅思9分这几种前缀)

yepnope({

load: [normal.js ， ie6！ie7！ie-patch.js] //仅ie6或ie7(在修补程序上)

});