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中去掉数组中的重复值的实现方法
Aug 03 Javascript
Jquery解析Json格式数据过程代码
Oct 17 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
SuperSlide标签切换、焦点图多种组合插件
Mar 14 Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 Javascript
基于Javascript实现弹出页面效果
Jan 01 Javascript
总结Javascript中的隐式类型转换
Aug 24 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
Oct 07 Javascript
微信小程序全局变量的设置、使用、修改过程解析
Sep 24 Javascript
深入学习Vue nextTick的用法及原理
Oct 08 Javascript
OpenLayers3加载常用控件使用方法详解
Sep 25 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
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
jQuery实现的兼容性浮动层示例
2016/08/02 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
postman自定义函数实现 时间函数的思路详解
2019/04/17 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
2019/07/05 Javascript
react实现同页面三级跳转路由布局
2019/09/26 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
vue中改变滚动条样式的方法
2020/03/03 Javascript
在Echarts图中给坐标轴加一个标识线markLine
2020/07/20 Javascript
Python操作MongoDB详解及实例
2017/05/18 Python
浅谈Python处理PDF的方法
2017/11/10 Python
Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
2018/11/30 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
EJB3.1都有哪些改进
2012/11/17 面试题
乐观大学生的自我评价
2014/01/10 职场文书
《小鹰学飞》教学反思
2014/04/23 职场文书
彩妆大赛策划方案
2014/05/13 职场文书
2014年高二班主任工作总结
2014/12/16 职场文书
网络营销计划书
2015/01/17 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
2019年教师节活动策划方案
2019/09/09 职场文书
python中取整数的几种方法
2021/11/07 Python
Java 超详细讲解十大排序算法面试无忧
2022/04/08 Java/Android
Oracle用户管理及赋权
2022/04/24 Oracle