首頁 web前端 js教程 yepnope.js使用詳解及範例分享_javascript技巧

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

May 16, 2016 pm 04:43 PM

yepnope.js的典型實例:

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, ieltgt5, iegt6, iegt7, iegt8, ielt7, ieltgt, 及ielt9這幾種Prefix)

1

2

3

yepnope({

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

});

登入後複製

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

在JavaScript中替換字符串字符 在JavaScript中替換字符串字符 Mar 11, 2025 am 12:07 AM

在JavaScript中替換字符串字符

jQuery檢查日期是否有效 jQuery檢查日期是否有效 Mar 01, 2025 am 08:51 AM

jQuery檢查日期是否有效

jQuery獲取元素填充/保證金 jQuery獲取元素填充/保證金 Mar 01, 2025 am 08:53 AM

jQuery獲取元素填充/保證金

10值得檢查jQuery插件 10值得檢查jQuery插件 Mar 01, 2025 am 01:29 AM

10值得檢查jQuery插件

10個jQuery手風琴選項卡 10個jQuery手風琴選項卡 Mar 01, 2025 am 01:34 AM

10個jQuery手風琴選項卡

HTTP與節點和HTTP-Console調試 HTTP與節點和HTTP-Console調試 Mar 01, 2025 am 01:37 AM

HTTP與節點和HTTP-Console調試

自定義Google搜索API設置教程 自定義Google搜索API設置教程 Mar 04, 2025 am 01:06 AM

自定義Google搜索API設置教程

jQuery添加捲軸到Div jQuery添加捲軸到Div Mar 01, 2025 am 01:30 AM

jQuery添加捲軸到Div

See all articles