yepnope.js使用详解及示例分享


Posted in Javascript onJune 23, 2014

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)
});
Javascript 相关文章推荐
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
JavaScript通过RegExp实现客户端验证处理程序
May 07 Javascript
实用的Jquery选项卡TAB示例代码
Aug 28 Javascript
js实现div弹出层的方法
Nov 20 Javascript
js的回调函数详解
Jan 05 Javascript
Javascript类型转换的规则实例解析
Feb 23 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
Jul 01 Javascript
完美解决js传递参数中加号和&号自动改变的方法
Oct 11 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
初识 Vue.js 中的 *.Vue文件
Nov 22 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
Sep 04 Javascript
js的延迟执行问题分析
Jun 23 #Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 #Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
Jun 23 #Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 #Javascript
js代码实现的加入收藏效果并兼容主流浏览器
Jun 23 #Javascript
用jquery的方法制作一个简单的导航栏
Jun 23 #Javascript
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 #Javascript
You might like
PHP迭代器实现斐波纳契数列的函数
2013/11/12 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
2017/05/10 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
JS交互点击WKWebView中的图片实现预览效果
2018/01/05 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python 调用win32pai 操作cmd的方法
2017/05/28 Python
python生成excel的实例代码
2017/11/08 Python
浅谈python 里面的单下划线与双下划线的区别
2017/12/01 Python
Python字符串拼接六种方法介绍
2017/12/18 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
俄罗斯皮肤健康中心:Pharmacosmetica.ru
2020/02/22 全球购物
开业典礼主持词
2014/03/21 职场文书
消防安全宣传口号
2014/06/10 职场文书
中秋晚会策划方案
2014/06/12 职场文书
党员活动总结
2015/02/04 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
学校推普周活动总结
2015/05/07 职场文书
Vue自定义铃声提示音组件的实现
2022/01/22 Vue.js