Ein typisches Beispiel von yepnope.js :
yepnope ({test: modernizr.geolocation, yep: 'normal.js', nope: ['polyfill.js', 'Wraper.js']});Dieses Beispiel bedeutet, dass Normal.js, wenn Modernizr.Geolocation wahr ist, geladen wird.
yepnope volle Syntax :
yepnope ([{test: /* boolean (ish) die Bedingung eingeben* /, yep: /* array (von Zeichenfolgen) | String - Ressourcen geladen, wenn die Bedingung wahr ist geladen, wenn die Bedingung wahr und falsch istWarum yepnope verwenden :
Nur 1,6 K nach GZIP sind kleiner als die meisten Ressourcenlader
Kann CSS und JS laden
Yepnope gibt Tests für alle Browser bestehen, die der Autor finden kann
Yepnope trennt die Ressourcenbelastung und -ausführung vollständig, sodass Sie die Reihenfolge der Ressourcenausführung steuern können
Bietet eine logische Kombination aus freundlichen APIs und erleichtert Ressourcen
Modulares Design können Ihre eigenen Funktionen erweitern (siehe Präfixe und Filter später)
Ermutigen Sie die On-Demand-Belastung von Ressourcen
In Modernizr integriert
Standardmäßig wird es immer in der Reihenfolge der Ressourcenliste ausgeführt (die Reihenfolge der Dateiliste, die Sie angeben)
Es kann Ressourcen -Fallbacks bewältigen und dennoch priorisiert das Herunterladen abhängiger Skripte parallel. Nach dem Lesen des Codes ist es einfacher zu verstehen:
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', vollständig: function () {jQuery (function () {jQuery ('div') .plugin ();});Andere Lader müssen möglicherweise damit umgehen:
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.plugin.js'; yepnope kann nicht geladen werden, Sie müssen die Sicherungsressource nur neu laden, was die Ausführung anderer Dateien, die von dieser Ressource abhängen, nicht auswirken.Yepnopes Mängel
Nicht immer die schnellste wie LabJs usw. kann nach der Optimierung schneller geladen als yepnope, aber Sie müssen überlegen, welchen Lader Sie entsprechend Ihrer tatsächlichen Situation verwenden sollen.
Sie müssen bestimmte Cache -Header für die Ressource festlegen (dies ist sehr wichtig)
Im Gegensatz zu Reformenjs und anderen Klassenbibliotheken, die über eigene Generationstools und reichhaltige APIs verfügen, implementiert Yepnope nur die Grundladerfunktion.
Standardmäßig wird es immer in der Reihenfolge der von Ihnen angegebenen Ressourcenliste ausgeführt, die sich auf die Geschwindigkeit auswirken kann
Yepnope -Nutzungsbeispiel :
In eine Zeichenfolge direkt vorgehen
yepnope ('/url/to/your/script.js');Ein Objektobjekt übergeben
yepnope ({load: '/url/to/your/script.js'});Rückruffunktionsinstanz (URL in der Rückruffunktion repräsentiert den Namen des geladenen Ressourcendateins. Das Ergebnis repräsentiert das Ergebnis des Testparameters; Taste repräsentiert die Abkürzung des Dateinamens bei Verwendung der Schlüsselzuordnung)
yepnope ({test: window.json, lad: '/url/to/your/script.js', radback: function (url, result, key) {// Wenn dies ausgeführt wird, hat Ihr Skript gerade ausgeführt. alert ('script.js hat geladen!');}});Vollständige Funktionsbeispiel
yepnope ({test: window.json, nope: 'json2.js', vollständig: function () {var data = window.json.parse ('{"json": "String"}');}});Key Mapping -Instanz
yepnope ({test: modernizr.geolocation, yep: {'rstyles': 'reguläre styles "Dies ist die Geolocation Polyfill!"Natürlich können Sie auch die Callback -Funktion wie folgt schreiben:
yepnope ({test: modernizr.geolocation, yep: {'rstyles': 'reguläre styles Styles! ');3 Präfixe von yepnope bereitgestellt
CSS! Präfix: Jede Datei mit Suffix kann als CSS -Datei geladen werden
yepnope ('CSS! Mystyles.php? Version = 1532');Vorspannung! Präfix: Laden Sie die Ressource in den Cache ein, aber nicht aus. Führen Sie sie das nächste Mal aus) aus.
yepnope ({load: 'vorlast!dh! Präfix (ES): Bestimmen Sie, ob der IE -Browser (zusätzlich zu IE!
yepnope ({last: ['normal.js', 'ie6! Ie7! Ie-patch.js'] // IE6 oder IE7 nur (auf Patch)});