yepnope.js使用詳解及範例分享_javascript技巧-js教程-PHP中文網

yepnope.js使用詳解及範例分享_javascript技巧

WBOY

發布： 2016-05-16 16:43:32

原創

1586 人瀏覽過

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&#63;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, ieltgt5, iegt6, iegt7, iegt8, ielt7, ieltgt, 及ielt9這幾種Prefix）

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

登入後複製