yepnope.js使用详解及示例分享

前端技术 2023/09/03 JavaScript

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: \'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();
   });
  }
 }
]);

而其他加载器则可能必须这样处理:

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使用实例:

直接传入字符串

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

本文地址：https://www.stayed.cn/item/8110

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案