按需加载js推荐插件：yepnope.js及使用教程

　　yepnope.js是一个超高速的按条件异步加载资源的加载器，允许你只加载使用到的资源(css及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; //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'] // ie6 or ie7 only (on patch)});

转载自：http://lanhy2000.blog.163.com/blog/static/43678608201284105234584/

　　哈尔滨品用软件有限公司致力于为哈尔滨的中小企业制作大气、美观的优秀网站，并且能够搭建符合百度排名规范的网站基底，使您的网站无需额外费用，即可稳步提升排名至首页。欢迎体验最佳的哈尔滨网站建设。