Ausführliche Erklärung und Beispielfreigabe der Usage_Javascript-Fähigkeiten von yepnope.js

Ein typisches Beispiel für yepnope.js:

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

Dieses Beispiel bedeutet, dass normal.js geladen wird, wenn Modernizr.geolocation wahr ist, und wenn es falsch ist, werden polyfill.js und wrapper.js geladen.

Ja, vollständige Syntax :

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 加载完成后执行的函数 */
}, ... ]);

Warum Yepnope verwenden:

Nur ​​1,6 KB nach Gzip, was kleiner ist als die meisten Ressourcenlader
Kann CSS und JS laden
yepnope hat alle Browsertests bestanden, die der Autor finden konnte
Yepnope trennt das Laden und Ausführen von Ressourcen vollständig, sodass Sie die Ausführungsreihenfolge von Ressourcen steuern können
Stellen Sie eine benutzerfreundliche API bereit und fördern Sie die logische Kombination von Ressourcen
Modularer Aufbau, Sie können die Funktionen selbst erweitern (siehe Präfixe und Filter später)
Fördern Sie das Laden von Ressourcen nach Bedarf
Integriert in Modernizr
Standardmäßig wird es immer in der Reihenfolge der Ressourcenliste (der Reihenfolge der von Ihnen angegebenen Dateiliste) ausgeführt
Es kann den Ressourcen-Fallback bewältigen und dennoch das parallele Herunterladen abhängiger Skripte priorisieren. Das ist leichter zu verstehen, wenn Sie sich den Code ansehen:

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();
   });
  }
 }
]);

Andere Lader müssen dies möglicherweise tun:

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

Nachteile von Yepnope

Es ist nicht immer das schnellste. Nach der Optimierung werden Dinge wie labjs möglicherweise schneller geladen als yepnope, aber Sie müssen basierend auf Ihrer tatsächlichen Situation überlegen, welchen Loader Sie verwenden sollen
Sie müssen einen bestimmten Cache-Header für die Ressource festlegen (dies ist sehr wichtig)
Im Gegensatz zu Klassenbibliotheken wie RequireJS, die über eigene Generierungstools und umfangreiche APIs verfügen, implementiert yepnope nur grundlegende Ladefunktionen
Standardmäßig wird es immer in der Reihenfolge der von Ihnen bereitgestellten Ressourcenliste ausgeführt, was sich auf die Geschwindigkeit auswirken kann

Yepnope-Verwendungsbeispiele:

Übergeben Sie die Zeichenfolge direkt

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

Ein Objekt übergeben

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

Callback-Funktionsinstanz (URL in der Callback-Funktion stellt den Namen der geladenen Ressourcendatei dar; Ergebnis stellt das Ergebnis des Testparameters dar; Schlüssel stellt die Abkürzung des Dateinamens dar, wenn Tastenzuordnung verwendet wird)

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

vollständige Funktionsinstanz

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

Beispiel für eine Tastenzuordnung

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

SelbstverständlichRückruffunktionSie können auch so schreiben:

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

3 Präfixe, die offiziell von yepnope bereitgestellt werden

CSS!-Präfix: Dateien mit einem beliebigen Suffix können als CSS-Dateien geladen werden

yepnope( 'css!mystyles.php?version=1532' );

Prefix: Die Ressource vorab in den Cache laden, aber nicht ausführen (sie wird erst beim nächsten Laden ausgeführt)

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!-Präfix(e): Bestimmen Sie, ob es sich um einen IE-Browser handelt (zusätzlich zu ie! unterstützt er auch ie5, ie6, ie7, ie8, ie9, iegt5, iegt6, iegt7, iegt8, ielt7, ielt8 und ielt9 Diese Arten von Präfixen)

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