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编程起步(第四课)
Feb 27 Javascript
js 浮动层菜单收藏
Jan 16 Javascript
Js 中debug方式
Feb 07 Javascript
jQuery easyui datagrid动态查询数据实例讲解
Feb 26 Javascript
js实现的标题栏新消息闪烁提示效果
Jun 06 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
Sep 14 Javascript
JS未跨域操作iframe里的DOM
Jun 01 Javascript
jQuery表格的维护和删除操作
Feb 03 Javascript
JS排序之冒泡排序详解
Apr 08 Javascript
JavaScript使用Ajax上传文件的示例代码
Aug 10 Javascript
webpack多入口多出口的实现方法
Aug 17 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 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 syntax error, unexpected $end 错误的一种原因及解决
2008/10/25 PHP
批量修改RAR文件注释的php代码
2010/11/20 PHP
PHP中去掉字符串首尾空格的方法
2012/05/19 PHP
php删除字符串末尾子字符,删除开始字符,删除两端字符(实现代码)
2013/06/27 PHP
php实现文件编码批量转换
2014/03/10 PHP
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
Laravel 框架返回状态拦截代码
2019/10/18 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
jquery js 重置表单 reset()具体实现代码
2013/08/05 Javascript
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
vue2.0 自定义日期时间过滤器
2017/06/07 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
vue框架中props的typescript用法详解
2020/02/17 Javascript
Django小白教程之Django用户注册与登录
2016/04/22 Python
Python生成器以及应用实例解析
2018/02/08 Python
利用nohup来开启python文件的方法
2019/01/14 Python
Python Tkinter 简单登录界面的实现
2019/06/14 Python
Django如何将URL映射到视图
2019/07/29 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
python装饰器练习题及答案
2019/11/01 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
详解pandas映射与数据转换
2021/01/22 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
运动会广播稿200米
2014/01/27 职场文书
感恩母亲节演讲稿
2014/05/07 职场文书
董事长助理工作职责范本
2014/07/01 职场文书
学校清明节活动总结
2014/07/04 职场文书
2014教师研修学习体会
2014/07/08 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers
Mysql基础之常见函数
2021/04/22 MySQL
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL