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 中的replace方法说明
Apr 13 Javascript
利用jquery操作select下拉列表框的代码
Jun 04 Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
js获取form的方法
May 06 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
jquery if条件语句的写法
May 19 Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 Javascript
深入理解Commonjs规范及Node模块实现
May 17 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 Javascript
vue axios请求超时的正确处理方法
Apr 02 Javascript
JS实现拖动模糊框特效
Aug 25 Javascript
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
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&&mysql)五
2006/10/09 PHP
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
php使用strip_tags()去除html标签仍有空白的解决方法
2016/07/28 PHP
Yii CFileCache 获取不到值的原因分析
2017/02/08 PHP
Laravel框架执行原生SQL语句及使用paginate分页的方法
2018/08/17 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
2017/05/20 jQuery
vue构建动态表单的方法示例
2018/09/22 Javascript
vue如何获取自定义元素属性参数值的方法
2019/05/14 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
如何使用python爬取csdn博客访问量
2016/02/14 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
python 3.7.0 安装配置方法图文教程
2018/08/27 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
如何通过python实现全排列
2020/02/11 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
法国家具及室内配件店:home24
2017/01/21 全球购物
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
曼城官方网上商店:Manchester City
2019/09/10 全球购物
阿迪达斯新加坡官方网站:adidas新加坡
2019/12/06 全球购物
生物制药自我鉴定
2014/01/25 职场文书
机械系毕业生求职信
2014/05/28 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript