Heim > Web-Frontend > js-Tutorial > Ausführliche Erklärung und Beispielfreigabe der Usage_Javascript-Fähigkeiten von yepnope.js

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

WBOY
Freigeben: 2016-05-16 16:43:32
Original
1587 Leute haben es durchsucht

Ein typisches Beispiel für yepnope.js:

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

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

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();
   });
  }
 }
]);
Nach dem Login kopieren

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' );
 }
});
Nach dem Login kopieren

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' );
Nach dem Login kopieren

Ein Objekt übergeben

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

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!' );
  }
 } );
Nach dem Login kopieren

vollständige Funktionsinstanz

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

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!' );
   }
  }
 } );
Nach dem Login kopieren

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!' );
  }
 } );
Nach dem Login kopieren

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' );
Nach dem Login kopieren

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
 }
} );
Nach dem Login kopieren

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)
});
Nach dem Login kopieren

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage