欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2014年06月23日 11:37:17   投稿：hebedich  
yepnope.js 是一個(gè)超高速的按條件異步加載資源的加載器，允許你只加載使用到的資源（css及js）。

yepnope.js的一個(gè)典型實(shí)例:

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

此實(shí)例表示如果Modernizr.geolocation為真的時(shí)候加載normal.js，為假則加載polyfill.js及wrapper.js。

yepnope完整語(yǔ)法：

yepnope([{
 test : /* boolean(ish) 輸入條件    */,
 yep : /* array (of strings) | string - 條件為真時(shí)加載的資源 */,
 nope : /* array (of strings) | string - 條件為假時(shí)加載的資源 */,
 both : /* array (of strings) | string - 條件無(wú)論真假都加載 */,
 load : /* array (of strings) | string - 條件無(wú)論真假都加載 */,
 callback : /* function ( testResult, key ) | object { key : fn } 回調(diào)函數(shù) */,
 complete : /* function 加載完成后執(zhí)行的函數(shù) */
}, ... ]);

為什么使用yepnope：

Gzip后只有1.6K比大多數(shù)的資源加載器都小
可以加載CSS及JS
yepnope通過(guò)了作者能找到的所有的瀏覽器的測(cè)試
yepnope完全分離資源加載和執(zhí)行，這樣你可以控制資源的執(zhí)行順序
提供友好的API和促進(jìn)資源的邏輯組合
模塊化設(shè)計(jì)，你可以自己擴(kuò)充功能（見(jiàn)稍后的Prefixes及filters）
鼓勵(lì)按需加載資源
集成在 Modernizr 中
默認(rèn)總是按照資源列表（你所提供的文件列表順序）順序執(zhí)行
可處理資源回退（fallback），且仍?xún)?yōu)先并行下載依賴(lài)的腳本，看下代碼更容易理解：

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' );
 /*注意這點(diǎn)和yepnope的區(qū)別，yepnope加載失敗后僅需重新加載備用資源即可，不會(huì)影響依賴(lài)此資源的其他文件執(zhí)行*/
 } else {
  someLoader( 'jquery.plugin.js' );
 }
});

yepnope的不足

并不總是最快的，像labjs等優(yōu)化后可能加載速度優(yōu)于yepnope，但需要根據(jù)你的實(shí)際情況考慮使用哪個(gè)加載器
需要給資源設(shè)置一定的緩存頭（這一點(diǎn)很重要）
并不像RequireJS等類(lèi)庫(kù)有自己的生成工具及豐富的API，yepnope僅實(shí)現(xiàn)了基本加載器功能
默認(rèn)總是按照你提供的資源列表順序執(zhí)行，這一點(diǎn)有可能會(huì)影響速度

yepnope使用實(shí)例:

直接傳入字符串

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

傳入一個(gè)Object對(duì)象

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

回調(diào)函數(shù)實(shí)例（回調(diào)函數(shù)中url表示加載的資源文件名;result表示test參數(shù)的結(jié)果;key表示使用 key maping 時(shí)候的文件名縮寫(xiě)）

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函數(shù)實(shí)例

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

Key maping實(shí)例

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

當(dāng)然回調(diào)函數(shù)你還可以這樣寫(xiě):

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個(gè)Prefixes

css! Prefix:可以加載任何后綴的文件作為css文件

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

preload! Prefix:預(yù)加載資源到緩存中,但不執(zhí)行（下次load時(shí)候才執(zhí)行）

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

您可能感興趣的文章:

相關(guān)文章

最新評(píng)論