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 相关文章推荐
window.showModalDialog使用手册
Jan 11 Javascript
Opacity.js
Jan 22 Javascript
用Javascript读取中文COOKIE的解决办法
Feb 15 Javascript
ext for eclipse插件安装方法
Apr 27 Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 Javascript
JS实现进入页面时渐变背景色的方法
Feb 25 Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 Javascript
jQuery插件简单实现方法
Jul 18 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
vue 过滤器filter实例详解
Mar 14 Javascript
Vue程序调试的方法
Jun 17 Javascript
如何在面试中手写出javascript节流和防抖函数
Oct 22 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
纯真IP数据库的应用 IP地址转化成十进制
2009/06/14 PHP
PHP 多维数组排序实现代码
2009/08/05 PHP
php图片加中文水印实现代码分享
2012/10/31 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
jQuery+ajax中getJSON() 用法实例
2014/12/22 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
2015/12/08 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
Bootstrap表单控件使用方法详解
2017/01/11 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
vue深入解析之render function code详解
2017/07/18 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
微信小程序实现手势滑动效果
2019/08/26 Javascript
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
用python代码做configure文件
2014/07/20 Python
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)
2019/04/18 Python
使用Python脚本zabbix自定义key监控oracle连接状态
2019/08/28 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
html5超简单的localStorage实现记住密码的功能实现
2017/09/07 HTML / CSS
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
中学生获奖感言
2014/02/04 职场文书
工作年限证明模板
2014/11/01 职场文书
群众路线教育实践活动学习笔记
2014/11/05 职场文书
交通事故责任认定书
2015/08/06 职场文书
2016三八妇女节慰问信
2015/11/30 职场文书
浅谈JS的原型和原型链
2021/06/04 Javascript