yepnope.jsの典型的な例:
yepnope({test:modernizr.geolocation、yep: 'normal.js'、nope:['polyfill.js'、 'wrapper.js']});この例は、Modernizr.Geolocationがtrueである場合、普通jsがロードされ、polyfill.jsとwrapper.jsがロードされることを意味します。
Yepnopeフル構文:
Yepnope([{test:/* boolean(ish)条件に入る* /、yep: /* array(strings)|文字列 - 条件が真のときにロードされたリソース条件がtrueとfalse*/、callback:/*function(testResult、key){key:fn} callback function*/、complete:/*ロード後に実行された*/}、...]);yepnopeを使用する理由:
GZIPがほとんどのリソースローダーよりも小さい1.6K
CSSとJSをロードできます
Yepnopeは、著者が見つけることができるすべてのブラウザのテストに合格します
Yepnopeはリソースの読み込みと実行を完全に分離するため、リソース実行の順序を制御できます
フレンドリーなAPIの論理的な組み合わせを提供し、リソースを促進します
モジュラー設計では、独自の機能を拡張できます(後でプレフィックスとフィルターを参照してください)
リソースの需要のあるロードを奨励します
Modernizrに統合されています
デフォルトでは、常にリソースリストの順序で実行されます(提供するファイルリストの順序)
リソースのフォールバックを処理することができ、依然として依存するスクリプトのダウンロードを並行して優先します。コードを読んだ後、理解しやすい:
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' 'jquery.plugin.js'、complete:function(){jquery(){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'; Yepnopeはロードに失敗し、バックアップリソースをリロードするだけです。これは、このリソースに依存する他のファイルの実行に影響しません。イェプノープの欠点
LABJなどのように常に最速ではないとは限りませんが、最適化後にYepnopeよりも速くロードされる可能性がありますが、実際の状況に応じて使用するローダーを考慮する必要があります。
リソースに特定のキャッシュヘッダーを設定する必要があります(これは非常に重要です)
独自の生成ツールとリッチAPIを備えたrequirejsやその他のクラスライブラリとは異なり、yepnopeは基本的なローダー関数のみを実装します。
デフォルトでは、提供するリソースリストの順序で常に実行されます。これは速度に影響を与える可能性があります
Yepnopeの使用例:
文字列を直接渡します
yepnope( '/url/to/your/script.js');
オブジェクトオブジェクトを渡します
yepnope({load: '/url/to/your/script.js'});コールバック関数インスタンス(コールバック関数のURLはロードされたリソースファイル名を表します。結果はテストパラメーターの結果を表します。キーは、キーマッピングを使用するときのファイル名の略語を表します)
yepnope({test:window.json、load: '/url/to/your/script.js'、callback:function(url、result、key){//これが実行されるたびに、arert( 'script.jsはロードされました!');}});完全な関数の例
yepnope({test:window.json、nope: 'json2.js'、complete:function(){var data = window.json.parse( '{"json": "string"}');}});キーマッピングインスタンス
Yepnope({test:Modernizr.geolocation、yep:{'rstyles': 'reling-styles.css'}、nope:{'mstyles.css'、 'Geopoly': 'geolocation-polyfill.js'}、call(url、url、 'geoply') 「これは地理的なポリフィルです!」もちろん、このようなコールバック関数を書くこともできます。
Yepnope({test:Modernizr.geolocation、yep:{'rstyles': 'regulty-styles.css'}、nope:{'mstyles.css'、 'Geopoly': 'geolocation-polyfill.js'}、Callback:{'rstyles': 'rstyles': 'rstyles': 'rstyles': 'rstyles': 'rstyles': 'rstyles': 'rstyles':スタイルズ!Yepnopeが提供する3つのプレフィックス
CSS!プレフィックス:接尾辞を備えたファイルはcssファイルとしてロードできます
yepnope( 'css!mystyles.php?version = 1532');
プリロード!プレフィックス:リソースをキャッシュにプリロードしますが、実行しません(次回ロードするときに実行します)
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ブラウザ(IE!に加えて、IE5、IE6、IE7、IE8、IE9、IEGT5、IEGT6、IEGT7、IEGT8、IELT7、IELT8、IELT9もサポートするかどうかを判断します)
yepnope({load:['normal.js'、 'ie6!ie7!iepatch.js'] // ie6またはie7のみ(パッチ上)});