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加载失败的情况做了一个备用处理。
您可能感兴趣的文章:
相关文章
下面小编就为大家带来一篇最简单的tab切换实例代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要为大家详细介绍了layui实现数据表格table分页功能、异步加载，表格渲染，含条件查询，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
every 和 some 都是数组迭代方法,都可以遍历数组,这篇文章主要介绍了JS中some和every的区别和用法,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了wavesurfer.js绘制音频波形图的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要为大家介绍了Express框架app函数使用实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
下面小编就为大家带来一篇在一个页面重复使用一个js函数的方法详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦2016-12-12
本文为大家介绍下js获取兄弟、父类等节点的方法，感兴趣的朋友可以参考下2014-01-01
这篇文章介绍了echarts实现响应式定位和布局的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
下面小编就为大家带来一篇浅谈JavaScript变量的自动转换和语句。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。模块开发需要遵循一定的规范，否则就都乱套了2016-12-12
最新评论