注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

北漂的小羊

Java编程,开发者,程序员,软件开发,编程,代码。新浪微博号:IT国子监

 
 
 

日志

 
 
关于我

在这里是面向程序员的高品质IT技术学习社区,是程序员学习成长的地方。让我们更好地用技术改变世界。请关注新浪微博号: IT国子监(http://weibo.com/itguozijian)

网易考拉推荐

超高速的按条件异步加载资源的加载器典型实例:yepnope.js  

2013-01-14 18:16:48|  分类: JS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

yepnope.js是一个超高速的按条件异步加载资源的加载器,允许你只加载使用到的资源(css及js)。


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

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

yepnope的全部参数

yepnope([{ test : , yep : , nope : , both : , load : , callback : , complete : }, ... ]);

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

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)
    });
  评论这张
 
阅读(455)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016