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://www.au92.com/archives/yepnope-js.html