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 相关文章推荐
js的with语句使用方法
Sep 21 Javascript
不同浏览器对回车提交表单的处理办法
Feb 13 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 Javascript
JavaScript实现公历转农历功能示例
Feb 13 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
微信小程序实现城市列表选择
Jun 05 Javascript
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
简单了解node npm cnpm的具体使用方法
Feb 27 Javascript
uni app仿微信顶部导航条功能
Sep 17 Javascript
微信小程序开发中var that =this的用法详解
Jan 18 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(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
jQuery替换字符串(实例代码)
2013/11/13 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
2015/06/26 Javascript
js实现仿爱微网两级导航菜单效果代码
2015/08/31 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
React学习笔记之条件渲染(一)
2017/07/02 Javascript
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
JavaScript 装逼指南(js另类写法)
2020/05/10 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
浅谈django的render函数的参数问题
2018/10/16 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
详解Python:面向对象编程
2019/04/10 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
Python分析彩票记录并预测中奖号码过程详解
2019/07/09 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
Python图像处理之膨胀与腐蚀的操作
2021/02/07 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
Styleonme中文网:韩国高档人气品牌
2017/06/21 全球购物
工作中个人的自我评价
2013/12/31 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
简易离婚协议书范本
2014/10/24 职场文书
公司2014年度工作总结
2014/12/10 职场文书
教师个人教学总结
2015/02/11 职场文书
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python