Ausführliche Erläuterung der Anwendungsbeispiele für das Laden von programmierbaren Javascript-Skripten-js-Tutorial-php.cn

Programmierbares Laden von Skripten

Obwohl das -Tag herzerwärmend einfach ist, erfordern einige Situationen eine ausgefeiltere Methode zum Laden von Skripten. Möglicherweise möchten wir ein Skript nur für Benutzer laden, die bestimmte Kriterien erfüllen, z. B. Platin-Mitglieder oder Spieler, die ein bestimmtes Level erreicht haben, oder wir möchten eine Funktion, z. B. ein Chat-Widget, nur dann laden, wenn der Benutzer zum Aktivieren klickt Es. 1. Laden Sie das Skript direkt Wir können Code ähnlich dem folgenden verwenden, um das -Tag einzufügen.

var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.src = '/js/feature.js'; head.appendChild(script); Nach dem Login kopieren Moment mal, woher wissen wir, wann das Skript vollständig geladen ist? Wir können dem Skript selbst etwas Code hinzufügen, um das Ereignis auszulösen, aber es wäre zu nervig, solchen Code für jedes zu ladende Skript hinzuzufügen. Oder es gibt eine andere Situation, das heißt, es ist für uns unmöglich, solchen Code zum Skript auf dem Server eines Drittanbieters hinzuzufügen. Die HTML5-Spezifikation definiert ein Onload-Attribut, das an Callbacks gebunden werden kann.

script.onload = function() { // 现在可以调用脚本里定义的函数了 }; Nach dem Login kopieren Allerdings unterstützen IE8 und ältere Versionen kein Onload, sondern onreadystatechange. Bei einigen Browsern kommt es beim Einfügen des -Tags auch zu „übernatürlichen Ereignissen“. Und über Fehlerbehandlung haben wir noch nicht einmal gesprochen! Um all diese Probleme zu vermeiden, wird dringend empfohlen, Skripte zum Laden von Bibliotheken zu verwenden.

Bedingtes Laden von yepnope yepnope ist eine einfache, leichte Skriptladebibliothek (die komprimierte, optimierte Version ist nur 1,7 KB groß). Erfüllt aufrichtig die häufigsten Anforderungen an das Laden dynamischer Skripte. Die einfachste Verwendung von yepnope besteht darin, ein Skript zu laden und einen Rückruf zurückzugeben, wenn die Ausführung des Skripts abgeschlossen ist.

yepnope({ load: 'oompaLoompas.js', callback: function() { console.log('oompa-Loompas ready!'); } }); Nach dem Login kopieren Immer noch gleichgültig? Als nächstes werden wir yepnope verwenden, um mehrere Skripte parallel zu laden und sie in einer bestimmten Reihenfolge auszuführen. Nehmen wir zum Beispiel an, wir möchten Backbone.js laden und dieses Skript hängt von Underscore.js ab. Dazu stellen wir einfach die Speicherorte dieser beiden Skripte als Ladeparameter in einem Array bereit.

yepnope({ load: ['underscore.js', 'backbone.js'], complete: function() { // 这里是Backbone 的业务逻辑 } }); Nach dem Login kopieren Bitte beachten Sie, dass hier „complete“ anstelle von „callback“ verwendet wird.

Der Unterschied besteht darin, dass der Rückruf für jede Ressource in der Skriptladeliste ausgeführt wird und „Abschließen“ nur ausgeführt wird, wenn alle Skripte geladen sind. Das charakteristische Merkmal von Yepnope ist das bedingte Laden. Bei gegebenem Testparameter lädt yepnope unterschiedliche Ressourcen, je nachdem, ob der Parameterwert wahr ist. Beispielsweise kann mit einer gewissen Genauigkeit festgestellt werden, ob der Benutzer ein Touchscreen-Gerät verwendet, und es können entsprechend unterschiedliche Stylesheets und Skripte geladen werden.

yepnope({ test: Modernizr.touch, yep: ['touchStyles.css', 'touchApplication.js'], nope: ['mouseStyles.css', 'mouseApplication.js'], complete: function() { // 不管是哪一种情况，应用程序均已就绪！ } }); Nach dem Login kopieren Wir bereiten die Bühne mit nur wenigen Codezeilen und können Benutzern je nach Zugriffsgerät ein völlig anderes Erlebnis bieten. Natürlich erfordern nicht alle bedingten Belastungen sowohl die Testergebnisse „Ja“ (Ja) als auch „Nein“ (Nein). Eine der häufigsten Anwendungen von Yepnope ist das Laden von Shim-Skripten, um fehlende Funktionalität in älteren Browsern auszugleichen.

yepnope({ test: window.json,nope: ['json2.js'], complete: function() { // 现在可以放心地用JSON 了 } }); Nach dem Login kopieren Nach der Verwendung von yepnope sollte die Seite die folgende schöne Markup-Struktur haben:

Nach dem Login kopieren Kommt Ihnen bekannt vor? Diese Struktur ist dieselbe wie die im Abschnitt über das Defer-Attribut angegebene. Der einzige Unterschied besteht darin, dass eine der Skriptdateien hier mit yepnope.js gespleißt wurde (wahrscheinlich zusätzlich zu deferredScripts.js), sodass diese können unabhängig geladen werden. Skripte, die bedingt neu geladen werden (da der Browser Shim-Skripte erfordert) und solche, die dynamisch geladen werden möchten (als Reaktion auf Benutzeraktionen). Das Ergebnis wird eine kleinere deferredScripts.js sein.