Javascript lädt und führt JS-Methoden in order_javascript skills aus

In diesem Artikel erfahren Sie hauptsächlich, wie Sie Javascript in Javascript dynamisch laden und nacheinander ausführen, sowie den Implementierungscode für Javascript Interessierte können sich hier informieren.

So vermeiden Sie asynchrone, blockierende usw. Markierungen in Ihrem Skript:

Der Browser lädt die Javascript-Datei asynchron, aber nicht wird entsprechend geladen Die Schreibreihenfolge in der zitierten -Datei wird von oben nach unten ausgeführt, um das Javascript zu analysieren

Attribut-Tag verschieben

defer ist in HTML4.0 definiert. Dieses Attribut ermöglicht es dem Browser, die Ausführung des Skripts zu verzögern und zu warten, bis das Dokument analysiert wurde, bevor er sie herunterlädt und in der Reihenfolge analysiert, in der sie im Dokument erscheinen.

Das heißt, das Skript mit dem Defer-Attribut hat den gleichen Ladeeffekt wie das Platzieren des Skripts im Textkörper.

Der Grad der Unterstützung für das Defer-Attribut ist jedoch in jedem Browser unterschiedlich etwas anders, das heißt, es gibt Der Browser unterstützt es nicht vollständig.

Async-Attributanmerkung

async ist ein neues Attribut in HTML5, und die meisten fortgeschrittenen unterstützen dieses Attribut.
Die Funktion dieses Attributs besteht darin, das asynchrone Laden des Skripts zu ermöglichen, was bedeutet, dass der Browser das CSS asynchron lädt, wenn der Browser auf ein Skript mit dem asynchronen Attribut stößt

Javascript lädt JS-Dateien dynamisch

Das Prinzip ist sehr einfach: Erstellen Sie einen Skriptknoten, weisen Sie dem Knoten das Skriptattribut zu und hängen Sie es dann an das Head-Tag von an the dom.

function loadJS(url){
  var Script = document.createElement('script');
  Script.setAttribute('src', url);
  Script.setAttribute('type', 'text/javascript');
  document.body.appendChild(Script);
  return Script;
}

Wenn wir mehrere Javascript-Dateien gleichzeitig laden

loadJS('a.js');
loadJS('b.js');

Der obige Effekt ist, dass a.js- und b.js-Dateien gleichzeitig asynchron geladen werden. Wenn die b.js-Datei kleiner als die a.js-Datei ist .js-Datei ist es wahrscheinlich, dass b.js zuerst geladen und ausgeführt wird und gemäß dem geschriebenen Ergebnis überhaupt nicht geladen und ausgeführt wird

Wenn Ihre b.js-Datei also von etwas abhängt a .js wird ein Fehler gemeldet, da a.js immer noch geladen wird, wenn b.js interpretiert und ausgeführt wird Folgende Verbesserungen am Code

Durch onload und auf dem Skriptknoten onreadystatechange-Attribut, um zu überwachen, ob der Knoten src geladen wird

function loadJS(url, success) {
      var domScript = document.createElement('script');
      domScript.src = url;
      success = success || function () {
          };
      domScript.onload = domScript.onreadystatechange = function () {
        if (!this.readyState || 'loaded' === this.readyState || 'complete' === this.readyState) {
          success();
          this.onload = this.onreadystatechange = null;
          this.parentNode.removeChild(this);
        }
      }
      document.getElementsByTagName('head')[0].appendChild(domScript);
    }

Bei Erfolg rufen Sie die
Rückruffunktion auf

success();

Wenn wir diese Methode aufrufen, können wir die LoadJS-Rückruffunktion verwenden, um zu erfahren, dass der aktuelle Knoten geladen wurde Laden Sie dann weiterhin andere Skriptdateien in die Rückruffunktion

über die obige Methode geladen. Dies ist eine synchrone Blockierung Laden. Die b.js-Datei wird erst geladen und ausgeführt, nachdem a.js geladen wurde.

loadJS(getUrl('a.js'), function () {
      loadJS(getUrl('b.js'), function () {
        console.log('a.js ,b.js 加载完成');
      });
});

Wenn Ihre Javascript-Dateien keine gegenseitigen Abhängigkeiten haben, verwenden Sie diese Methode nicht.

Verwandte Empfehlungen:

Die Ladesequenz und Ausführung von HTML-, CSS- und JS-Dateien

jquery popupDialog verwendet die Methode zum Laden einer JSP-Seite

Mehrere Methoden zum dynamischen Laden von js_javascript-Fähigkeiten

Das obige ist der detaillierte Inhalt vonJavascript lädt und führt JS-Methoden in order_javascript skills aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!