妹子UI-yepnope.js使用详解及示例分享（异步加载数据）
2021-06-05 13:02
|
1
2
3
4
5
|
yepnope({ test : Modernizr.geolocation,
yep : ‘normal.js‘,
nope : [‘polyfill.js‘, ‘wrapper.js‘]
}); |
此实例表示如果Modernizr.geolocation为真的时候加载normal.js，为假则加载polyfill.js及wrapper.js。
yepnope完整语法：
|
1
2
3
4
5
6
7
8
9
|
yepnope([{ test : /* boolean(ish) 输入条件 */,
yep : /* array (of strings) | string - 条件为真时加载的资源 */,
nope : /* array (of strings) | string - 条件为假时加载的资源 */,
both : /* array (of strings) | string - 条件无论真假都加载 */,
load : /* array (of strings) | string - 条件无论真假都加载 */,
callback : /* function ( testResult, key ) | object { key : fn } 回调函数 */,
complete : /* function 加载完成后执行的函数 */
}, ... ]); |
为什么使用yepnope：
Gzip后只有1.6K比大多数的资源加载器都小
可以加载CSS及JS
yepnope通过了作者能找到的所有的浏览器的测试
yepnope完全分离资源加载和执行，这样你可以控制资源的执行顺序
提供友好的API和促进资源的逻辑组合
模块化设计，你可以自己扩充功能（见稍后的Prefixes及filters）
鼓励按需加载资源
集成在 Modernizr 中
默认总是按照资源列表（你所提供的文件列表顺序）顺序执行
可处理资源回退（fallback），且仍优先并行下载依赖的脚本，看下代码更容易理解：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
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();
});
}
}
]); |
而其他加载器则可能必须这样处理:
|
1
2
3
4
5
6
7
8
|
someLoader(‘http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js‘, function(){
if ( ! window.jQuery ) {
someLoader( ‘local/jquery.min.js‘, ‘jquery.plugin.js‘ );
/*注意这点和yepnope的区别，yepnope加载失败后仅需重新加载备用资源即可，不会影响依赖此资源的其他文件执行*/
} else {
someLoader( ‘jquery.plugin.js‘ );
}
}); |
yepnope的不足
并不总是最快的，像labjs等优化后可能加载速度优于yepnope，但需要根据你的实际情况考虑使用哪个加载器
需要给资源设置一定的缓存头（这一点很重要）
并不像RequireJS等类库有自己的生成工具及丰富的API，yepnope仅实现了基本加载器功能
默认总是按照你提供的资源列表顺序执行，这一点有可能会影响速度
yepnope使用实例:
直接传入字符串
|
1
|
yepnope( ‘/url/to/your/script.js‘ );
|
传入一个Object对象
|
1
2
3
|
yepnope( { load : ‘/url/to/your/script.js‘
} );
|
回调函数实例（回调函数中url表示加载的资源文件名;result表示test参数的结果;key表示使用 key maping 时候的文件名缩写）
|
1
2
3
4
5
6
7
8
|
yepnope( { test : window.JSON,
load : ‘/url/to/your/script.js‘,
callback : function ( url, result, key ) {
// whenever this runs, your script has just executed.
alert( ‘script.js has loaded!‘ );
}
} );
|
complete函数实例
|
1
2
3
4
5
6
7
|
yepnope( { test : window.JSON,
nope : ‘json2.js‘,
complete : function () {
var data = window.JSON.parse( ‘{ "json" : "string" }‘ );
}
} );
|
Key maping实例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
yepnope( { test : Modernizr.geolocation,
yep : {
‘rstyles‘ : ‘regular-styles.css‘
},
nope : {
‘mstyles‘ : ‘modified-styles.css‘,
‘geopoly‘ : ‘geolocation-polyfill.js‘
},
callback : function ( url, result, key ) {
if ( key === ‘geopoly‘ ) {
alert( ‘This is the geolocation polyfill!‘ );
}
}
} );
|
当然回调函数你还可以这样写:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
yepnope( { test : Modernizr.geolocation,
yep : {
‘rstyles‘ : ‘regular-styles.css‘
},
nope : {
‘mstyles‘ : ‘modified-styles.css‘,
‘geopoly‘ : ‘geolocation-polyfill.js‘
},
callback : {
‘rstyles‘ : function ( url, result, key ) {
alert( ‘This is the regular styles!‘ );
},
‘mstyles‘ : function ( url, result, key ) {
alert( ‘This is the modified styles!‘ );
},
‘geopoly‘ : function ( url, result, key ) {
alert( ‘This is the geolocation polyfill!‘ );
}
},
complete : function () {
alert( ‘Everything has loaded in this test object!‘ );
}
} );
|
yepnope官方提供的3个Prefixes
css! Prefix:可以加载任何后缀的文件作为css文件
|
1
|
yepnope( ‘css!mystyles.php?version=1532‘ );
|
preload! Prefix:预加载资源到缓存中,但不执行（下次load时候才执行）
|
1
2
3
4
5
6
7
8
|
yepnope( { load : ‘preload!jquery.1.5.0.js‘,
callback : function ( url, result, key ) {
window.jQuery; //undefined
yepnope(jquery.1.5.0.js);
window.jQuery; //object
}
} ); |
ie! Prefix(es):判断是否IE浏览器（除ie!外,还支持 ie5, ie6, ie7, ie8, ie9, iegt5, iegt6, iegt7, iegt8, ielt7, ielt8, 及 ielt9这几种Prefix）
|
1
2
3
|
yepnope({ load: [‘normal.js‘, ‘ie6!ie7!ie-patch.js‘] // ie6 or ie7 only (on patch)
}); |
您可能感兴趣的文章:
- yepnope.js 异步加载资源文件
下一篇：Jmeter之上传文件
文章标题：妹子UI-yepnope.js使用详解及示例分享（异步加载数据）
文章链接：http://soscw.com/index.php/essay/90880.html