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取得url地址参数实例
Feb 22 Javascript
JS中 用户登录系统的解决办法
Apr 15 Javascript
jquery插件validate验证的小例子
May 08 Javascript
使用documentElement正确取得当前可见区域的大小
Jul 25 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 Javascript
javascript学习指南之回调问题
Apr 23 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
深入理解Vue 的条件渲染和列表渲染
Sep 01 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
Dec 04 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
May 04 Javascript
vue中关闭eslint的方法分析
Aug 04 Javascript
Vue CL3 配置路径别名详解
May 30 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 验证图片生成函数
2009/05/21 PHP
php中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
encode脚本和normal脚本混用的问题与解决方法
2007/03/08 Javascript
js 利用className得到对象的实现代码
2011/11/15 Javascript
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
JS document对象简单用法完整示例
2020/01/14 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
JS实现简易贪吃蛇游戏
2020/08/24 Javascript
[36:20]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.17
2020/12/18 DOTA
python进程类subprocess的一些操作方法例子
2014/11/22 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
python利用正则表达式提取字符串
2016/12/08 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
python定位xpath 节点位置的方法
2019/08/27 Python
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
如何实现jdbc性能优化
2012/07/30 面试题
2014年客服工作总结与计划
2014/12/09 职场文书
给医院的感谢信
2015/01/21 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
新员工试用期工作总结2015
2015/05/28 职场文书
毕业生政审意见范文
2015/06/04 职场文书
小学生运动会广播
2015/08/19 职场文书
Python函数式编程中itertools模块详解
2021/09/15 Python
MySQL表锁、行锁、排它锁及共享锁的使用详解
2022/04/02 MySQL