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中eval函数的使用示例
Jul 21 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
Aug 15 Javascript
javascript中Date对象的getDay方法使用指南
Dec 22 Javascript
javascript动态获取登录时间和在线时长
Feb 25 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
AngularJS实现Input格式化的方法
Nov 07 Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
Nov 03 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 Javascript
koa router 多文件引入的方法示例
May 22 Javascript
js实现简单掷骰子小游戏
Oct 24 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
我的论坛源代码(一)
2006/10/09 PHP
php 删除目录下N分钟前创建的所有文件的实现代码
2013/08/10 PHP
三种php连接access数据库方法
2013/11/11 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
JavaScript的面向对象(二)
2006/11/09 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
2014/05/08 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
JavaScript中object和Object的区别(详解)
2017/02/27 Javascript
nodejs async异步常用函数总结(推荐)
2017/11/17 NodeJs
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
python中实现精确的浮点数运算详解
2017/11/02 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
Pycharm+Scrapy安装并且初始化项目的方法
2019/01/15 Python
linux下安装python3和对应的pip环境教程详解
2019/07/01 Python
Python 中PyQt5 点击主窗口弹出另一个窗口的实现方法
2019/07/04 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
Python函数的默认参数设计示例详解
2019/12/01 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
记录一下scrapy中settings的一些配置小结
2020/09/28 Python
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
自我反省检讨书
2014/01/23 职场文书
婚礼答谢词范文
2015/09/29 职场文书
《比的意义》教学反思
2016/02/18 职场文书