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. <br><span style="color: rgb(0, 0, 0);"><strong>1. Laden Sie das Skript direkt </strong></span><br>Wir können Code ähnlich dem folgenden verwenden, um das <script>-Tag einzufügen. <br></p> <p class="jb51code"><br></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.src = '/js/feature.js'; head.appendChild(script);</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p>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. </p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">script.onload = function() { // 现在可以调用脚本里定义的函数了 };</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p>Allerdings unterstützen IE8 und ältere Versionen kein Onload, sondern onreadystatechange. Bei einigen Browsern kommt es beim Einfügen des <script>-Tags auch zu „übernatürlichen Ereignissen“. Und über Fehlerbehandlung haben wir noch nicht einmal gesprochen! Um <br/> all diese Probleme zu vermeiden, wird dringend empfohlen, Skripte zum Laden von Bibliotheken zu verwenden. </p><p><span style="color: #000000"><strong>Bedingtes Laden von yepnope</strong><br/></span>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. <br/>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. <br/></p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">yepnope({ load: 'oompaLoompas.js', callback: function() { console.log('oompa-Loompas ready!'); } });</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p>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. </p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">yepnope({ load: ['underscore.js', 'backbone.js'], complete: function() { // 这里是Backbone 的业务逻辑 } });</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p>Bitte beachten Sie, dass hier „complete“ anstelle von „callback“ verwendet wird. </p><p>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. </p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">yepnope({ test: Modernizr.touch, yep: ['touchStyles.css', 'touchApplication.js'], nope: ['mouseStyles.css', 'mouseApplication.js'], complete: function() { // 不管是哪一种情况，应用程序均已就绪！ } });</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p>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. </p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">yepnope({ test: window.json,nope: ['json2.js'], complete: function() { // 现在可以放心地用JSON 了 } });</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p>Nach der Verwendung von yepnope sollte die Seite die folgende schöne Markup-Struktur haben: <br/></p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xhtml;"><html> <head> <!-- metadata and stylesheets go here --> <script src="headScripts.js"></scripts> <script src="deferredScripts.js" defer>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
