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)});
最新资讯
圆通速递:计划非公开发行A股股票募集资金总额不超过37.9亿元

圆通速递:计划非公开发

圆通速递发布公告称,计划非公开发行A股股票的募集资金
想不起来自己的钱是怎么没的?是移动支付让你失忆了

想不起来自己的钱是怎

如果付款的时候是用手机扫一扫二维码来支付,你的心痛程
诺基亚第三季度调整后营业利润4.86亿欧元,低于市场预期

诺基亚第三季度调整后

诺基亚表示,7-9月基本盈利仍为每股0.05欧元,与去年同期
金洲慈航宣布终止收购优胜教育 因后者经营陷入困境

金洲慈航宣布终止收购

基于优胜腾飞书面回复及我方了解的情况来看,目前优胜腾
“营养又美味”的金属“汉堡”

“营养又美味”的金属

中国科学院合肥物质科学研究院方前锋研究员课题组利用
恒大汽车完成第一期上市辅导

恒大汽车完成第一期上

据深圳证监局10月27日披露,海通证券对恒大汽车科创板上
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,