yepnope.jsの使い方_javascriptスキルの詳しい説明と例の共有-jsチュートリアル-php.cn

yepnope.jsの使い方_javascriptスキルの詳しい説明と例の共有

WBOY

リリース： 2016-05-16 16:43:32

オリジナル

1587 人が閲覧しました

yepnope.js の典型的な例:

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

ログイン後にコピー

この例は、Modernizr.geolocation が true の場合、normal.js がロードされ、false の場合、polyfill.js およびwrapper.js がロードされることを意味します。

はい、完全な構文 :

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 はリソースの読み込みと実行を完全に分離しているため、リソースの実行順序を制御できます
フレンドリーな 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' );
   }
  }
 },
 {
  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 などの読み込みが高速になる可能性がありますが、実際の状況に基づいてどのローダーを使用するかを検討する必要があります。
リソースに特定のキャッシュヘッダーを設定する必要があります (これは非常に重要です)
独自の生成ツールや豊富な API を備えた RequireJS などのクラスライブラリとは異なり、yepnope は基本的なローダー関数のみを実装します
デフォルトでは、常に指定したリソースリストの順序で実行されるため、速度に影響する可能性があります

はい、使用例:

文字列

を直接渡します

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

ログイン後にコピー

オブジェクトを渡す

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

ログイン後にコピー

コールバック関数インスタンス (コールバック関数内の url はロードされたリソースファイルの名前を表します。result はテストパラメーターの結果を表します。key はキーマッピングを使用する場合のファイル名の省略形を表します)

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

ログイン後にコピー

完全な関数インスタンス

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

ログイン後にコピー

キーマッピングの例

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 つのプレフィックス

css! 接頭辞: 任意の接尾辞を持つファイルは css ファイルとしてロードできます

yepnope( 'css!mystyles.php&#63;version=1532' );

ログイン後にコピー

preload! プレフィックス: リソースをキャッシュにプリロードしますが、実行はしません (次回ロードされるときにのみ実行されます)

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 ブラウザであるかどうかを決定します (ie! に加えて、ie5、ie6、ie7、ie8、ie9、iegt5、iegt6、iegt7、iegt8、ielt7、 ielt8、ielt9 これらの種類のプレフィックス)

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

ログイン後にコピー