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 } 回調(diào)函數(shù) */, complete : /* function 加載完成后執(zhí)行的函數(shù) */}, ... ]);

　　為什么使用yepnope：

　　Gzip后只有1.6K比大多數(shù)的資源加載器都小

　　可以加載CSS及JS

　　yepnope通過了作者能找到的所有的瀏覽器的測試

　　yepnope完全分離資源加載和執(zhí)行，這樣你可以控制資源的執(zhí)行順序

　　提供友好的API和促進(jìn)資源的邏輯組合

　　模塊化設(shè)計，你可以自己擴充功能(見稍后的Prefixes及filters)

　　鼓勵按需加載資源

　　集成在Modernizr中

　　默認(rèn)總是按照資源列表(你所提供的文件列表順序)順序執(zhí)行

　　可處理資源回退(fallback)，且仍優(yōu)先并行下載依賴的腳本，看下代碼更容易理解：

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

　　yepnope的不足

　　并不總是最快的，像labjs等優(yōu)化后可能加載速度優(yōu)于yepnope，但需要根據(jù)你的實際情況考慮使用哪個加載器

　　需要給資源設(shè)置一定的緩存頭(這一點很重要)

　　并不像RequireJS等類庫有自己的生成工具及豐富的API，yepnope僅實現(xiàn)了基本加載器功能

　　默認(rèn)總是按照你提供的資源列表順序執(zhí)行，這一點有可能會影響速度

　　yepnope使用實例:

　　直接傳入字符串

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

　　傳入一個Object對象

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

　　回調(diào)函數(shù)實例(回調(diào)函數(shù)中url表示加載的資源文件名;result表示test參數(shù)的結(jié)果;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函數(shù)實例

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

　　當(dāng)然回調(diào)函數(shù)你還可以這樣寫: 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:預(yù)加載資源到緩存中,但不執(zhí)行(下次load時候才執(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)});

轉(zhuǎn)載自：http://lanhy2000.blog.163.com/blog/static/43678608201284105234584/

　　哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無需額外費用，即可穩(wěn)步提升排名至首頁。歡迎體驗最佳的哈爾濱網(wǎng)站建設(shè)。