yepnope.js – 异步加载资源文件

yepnope.js是一个能够根据输入条件来选择性异步加载资源文件的js脚本,可以在页面上仅加载用户需要的js/css。

典型代码示例


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

当Modernizr.geolocation为真时,加载yep项也就是”normal.js”,否则加载nope项——可以同时加载多个文件。

yepnope和现有的xxx script loader有什么区别?

个人认为主要 是这两点:

  • 可以同时处理javascript以及css
  • 能够按条件加载

yepnope的全部参数

yepnope([{
  test : /* boolean(ish) - 你要检查真伪的表达式             */,
  yep  : /* array (of strings) | string - test为true时加载这项  */,
  nope : /* array (of strings) | string - test为false时加载这项 */,
  both : /* array (of strings) | string - 什么情况下都加载              */,
  load : /* array (of strings) | string - 什么情况下都加载              */,
  callback : /* function ( testResult, key ) | object { key : fn }   当某个url加载成功时执行相应的方法         */,
  complete : /* function   都加载完成了执行这个方法                                                   */
}, ... ]);

这里的参数都可以是array或者object,在加载多个资源文件的时候有用。

yepnope加载jquery的实例

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

这段代码异步加载了jquery和jquery.plugin.js,甚至还对jquery加载失败的情况做了一个备用处理。

6 replies on “yepnope.js – 异步加载资源文件”

  1. 看起来很有趣
    不过我现在把这些事直接扔给YUI3了,YUI3的loader真是太方便了

  2. 一般的异步加载器都可以加条件,只是没接口化罢了,比如国外的开源加载器 requireJs 可以这样:
    require(Modernizr.geolocation ? [‘normal.js’] : [‘polyfill.js’, ‘wrapper.js’], function () {
    if (!window.jQuery) {
    yepnope(‘local/jquery.min.js’);
    }
    }
    );
    国内也有类似的开源框架:Orderjs,seajs等。

Comments are closed.