yepnope.js 异步加载资源文件
更新时间：2011年09月08日 00:17:30 作者：
yepnope.js是一个能够根据输入条件来选择性异步加载资源文件的js脚本，可以在页面上仅加载用户需要的js/css。
典型代码示例
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加载失败的情况做了一个备用处理。
复制代码 代码如下:
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加载失败的情况做了一个备用处理。
您可能感兴趣的文章:
相关文章
这篇文章主要为大家详细介绍了微信小程序实现手势滑动卡片效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-08-08
这篇文章主要为大家详细介绍了js图片轮播效果实现原理，帮助大家更好地实现图片轮播效果，真正理解图片轮播原理，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-12-12
js Html结构转字符串形式显示代码，需要的朋友可以参考下。2011-11-11
这篇文章主要介绍了JavaScript类的继承操作,结合实例形式总结分析了JavaScript面向对象程序设计中类的继承常见实现方式与操作技巧,需要的朋友可以参考下2018-12-12
js下的一些小技巧，需要的朋友可以下。2009-12-12
本文介绍了jQuery扩展、私有域、定义插件的基本步骤等知识，有需要的朋友可以看下2016-11-11
本篇文章主要是对使用js判断控件是否获得焦点的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
收集一些不多见的好用的自定义函数代码 计算字符长度的js函数 去字符中前后的空格的js函数 图片自适应大小函数代码2008-09-09
在全局执行环境中使用this，标识Global对象，在浏览器中就是window对象。2010-03-03
这篇文章主要介绍了javascript弹出窗口实现代码，非常人性化的设计，点击页面可以弹出窗口，感兴趣的小伙伴们可以参考一下2015-11-11
最新评论