推荐设备MORE

H5自适应网站—微信策划推广方

H5自适应网站—微信策划推广方

行业新闻

yepnope.js应用详细说明及实例共享

日期:2021-04-15
我要分享

yepnope.js 是一个极高速的按标准多线程载入資源的载入器,容许你只载入应用到的資源(css及js)。

yepnope.js的一个典型性案例:

yepnope({
 test : Modernizr.geolocation,
 yep : 'normal.js',
 nope : ['polyfill.js', 'wrapper.js']
});

此案例表明假如Modernizr.geolocation为确实情况下载入normal.js,为假则载入polyfill.js及wrapper.js。

yepnope详细英语的语法:

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),且仍优先选择并行处理免费下载依靠的脚本制作,看看编码更非常容易了解:

yepnope([
 load: '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();
]);

而别的载入器则将会务必那样解决:

someLoader('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应用案例:

立即传到标识符串

yepnope( '/url/to/your/script.js' );

传到一个Object目标

yepnope( {
 load : '/url/to/your/script.js'
 } );

回调函数涵数案例(回调函数涵数中url表明载入的資源文档名;result表明test主要参数的結果;key表明应用 key maping 情况下的文档名简称)

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涵数案例

yepnope( {
 test : window.JSON,
 nope : 'json2.js',
 complete : function () {
 var data = window.JSON.parse( '{ "json" : "string" }' );
 } );

Key maping案例

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!' );
 } );

自然回调函数涵数你要能够那样写:

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文档

yepnope( 'css!mystyles.php version=1532' );

preload! Prefix:预载入資源到缓存文件中,但不实行(下一次load情况下才实行)

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)

yepnope({
 load: ['normal.js', 'ie6!ie7!ie-patch.js'] // ie6 or ie7 only (on patch)
});