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 （of strings） | string - 条件为真时加载的资源 */, nope : /* array （of strings） | string - 条件为假时加载的资源 */, both : /* array （of strings） | string - 条件无论真假都加载 */, load : /* array （of strings） | 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表示使用 key maping 时候的文件名缩写）

yepnope（ {test : window.JSON,load : "/url/to/your/script.js",callback : function （ url, result, key ） { // whenever this runs, your script has just executed. alert（ "script.js has loaded！" ）;} } ）;

complete函数实例

yepnope（ {test : window.JSON,nope : "json2.js",complete : function （） { var data = window.JSON.parse（ "{ "json" : "string" }" ）;} } ）;

Key maping实例

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（ "This is the geolocation polyfill！" ）; }} } ）;

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

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（ "This is the regular styles！" ）; }, "mstyles" : function （ url, result, key ） {alert（ "This is the modified styles！" ）; }, "geopoly" : function （ url, result, key ） {alert（ "This is the geolocation polyfill！" ）; }},complete : function （） { alert（ "Everything has loaded in this test object！" ）;} } ）;

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; //undefinedyepnope（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"] // ie6 or ie7 only （on patch）}）;