yepnope.js 异步加载资源文件


Posted in Javascript onSeptember 08, 2011

典型代码示例

yepnope({ 
test : Modernizr.geolocation, 
yep : 'normal.js', 
nope : ['polyfill.js', 'wrapper.js'] 
});

当Modernizr.geolocation为真时,加载yep项也就是”normal.js”,否则加载nope项——可以同时加载多个文件。

yepnope和现有的xxx script loader有什么区别?
个人认为主要 是这两点:

可以同时处理javascript以及css
能够按条件加载
yepnope的全部参数

yepnope([{ 
test : /* boolean(ish) - 你要检查真伪的表达式 */, 
yep : /* array (of strings) | string - test为true时加载这项 */, 
nope : /* array (of strings) | string - test为false时加载这项 */, 
both : /* array (of strings) | string - 什么情况下都加载 */, 
load : /* array (of strings) | string - 什么情况下都加载 */, 
callback : /* function ( testResult, key ) | object { key : fn } 当某个url加载成功时执行相应的方法 */, 
complete : /* function 都加载完成了执行这个方法 */ 
}, ... ]);

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

yepnope加载jquery的实例

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(); 
}); 
} 
}]);

这段代码异步加载了jquery和jquery.plugin.js,甚至还对jquery加载失败的情况做了一个备用处理。
Javascript 相关文章推荐
javascript 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
javascript实现checkbox全选的代码
Apr 30 Javascript
JavaScript解八皇后问题的方法总结
Jun 12 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
Jun 21 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
Dec 08 Javascript
使用JavaScript根据图片获取条形码的方法
Jul 04 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
vue内置指令详解
Apr 03 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
Aug 13 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 Javascript
jquery绑定原理 简单解析与实现代码分享
Sep 06 #Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 #Javascript
JQuery扩展插件Validate—4设置错误提示的样式
Sep 05 #Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
Sep 05 #Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
Sep 05 #Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 #Javascript
JQuery扩展插件Validate 5添加自定义验证方法
Sep 05 #Javascript
You might like
在PHP里得到前天和昨天的日期的代码
2007/08/16 PHP
php使用百度天气接口示例
2014/04/22 PHP
最准确的php截取字符串长度函数
2015/10/29 PHP
PHP发送AT指令实例代码
2016/05/26 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
phpstudy隐藏index.php的方法
2020/09/21 PHP
javascript类继承机制的原理分析
2009/09/12 Javascript
Ext.MessageBox工具类简介
2009/12/10 Javascript
jQuery Dialog 弹出层对话框插件
2010/08/09 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
JavaScript操作 url 中 search 部分方法函数
2016/06/15 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
vue实现抖音时间转盘
2019/09/08 Javascript
浅谈Layui的eleTree树式选择器使用方法
2019/09/25 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
[54:05]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第一场 1月9日
2021/03/11 DOTA
Python实现JSON反序列化类对象的示例
2018/01/31 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
python3 配置logging日志类的操作
2020/04/08 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
HTML5上传文件显示进度的实现代码
2012/08/30 HTML / CSS
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
计算机专业职业规划
2014/02/28 职场文书
外贸员简历中的自我评价
2014/03/04 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers