Ausführliche Erläuterung der Anwendungsbeispiele für das Laden von programmierbaren Javascript-Skripten

Programmierbares Laden von Skripten

Obwohl das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-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 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag einzufügen.

var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = '/js/feature.js';
head.appendChild(script);

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() {
// 现在可以调用脚本里定义的函数了
};

Allerdings unterstützen IE8 und ältere Versionen kein Onload, sondern onreadystatechange. Bei einigen Browsern kommt es beim Einfügen des 3f1c4e4b6b16bbbd69b2ee476dc4f83a-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!');
  }
});

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 的业务逻辑
  }
});

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() {
  // 不管是哪一种情况，应用程序均已就绪！
  }
});

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 der Verwendung von yepnope sollte die Seite die folgende schöne Markup-Struktur haben:

<html>
<head>
  <!-- metadata and stylesheets go here -->
  <script src="headScripts.js"></scripts>
  <script src="deferredScripts.js" defer></script>
</head>
<body>
  <!-- content goes here -->
</body>
</html>

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.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Anwendungsbeispiele für das Laden von programmierbaren Javascript-Skripten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!