Besprechen Sie ausführlich das dynamische Laden von JS-Dateien in LABJS bei Bedarf. Javascript-Kenntnisse

LABjs ist ein kleines JavaScript-Tool, das zum Laden von JavaScript-Dateien nach Bedarf verwendet wird. Mit diesem Tool können Sie die Leistung der Seite verbessern, das Laden unnötiger JavaScript-Dateien vermeiden und ein dynamisches paralleles Laden und Verwalten von Skriptdateien realisieren. Die Ausführungsreihenfolge beim Laden von Skriptdateien.

Einfaches Beispiel

$LAB
.script("script1.js", "script2.js", "script3.js")
.block(function(){
  // wait for all to load, then do something
  script1Func();
  script2Func();
  script3Func();
});

Wir stellen einige Beispiele von LABJS vor:
Beispiel 1:

$LAB
  .script("script1.js")
  .script("script2.js")
  .script("script3.js")
  .wait(function(){ // 等待所有script加载完再执行这个代码块
    script1Func();
    script2Func();
    script3Func();
  });

Beispiel 2:

$LAB 
  .script({ src: "script1.js", type: "text/javascript" })
  .script("script2.js")
  .script("script3.js")
  .wait(function(){ // 等待所有script加载完再执行这个代码块
    script1Func();
    script2Func();
    script3Func();
  });

Beispiel 3:

$LAB
  .script("script1.js", "script2.js", "script3.js")
  .wait(function(){ // 等待所有script加载完再执行这个代码块
    script1Func();
    script2Func();
    script3Func();
  });

Beispiel 4:

$LAB
  .script( [ "script1.js", "script2.js" ], "script3.js")
  .wait(function(){ // 等待所有script加载完再执行这个代码块
    script1Func();
    script2Func();
    script3Func();
  });

Beispiel 5:

$LAB
  .script("script1.js").wait() // 空的wait()只是确保script1在其他代码之前被执行
  .script("script2.js") // script2 和 script3 依赖于 script1
  .script("script3.js").wait() // 但是script2 和 script3 并不互相依赖,可以并行下载
  .script("script4.js") // script4 依赖于 script1, script2 及 script3
  .wait(function(){script4Func();});

Beispiel 6:

$LAB
  .script("script1.js") // script1, script2, and script3 之间没有依赖关系,
  .script("script2.js") // 所以可以任意顺序执行
  .script("script3.js")
  .wait(function(){ // 如果需要,这里当然可以执行javascript函数
    alert("Scripts 1-3 are loaded!");
  })
  .script("script4.js") // 依赖于 script1, script2 及 script3
  .wait(function(){script4Func();});

Beispiel 7:

$LAB
  .setOptions({AlwaysPreserveOrder:true}) // 设置每个脚本之间等待
  .script("script1.js") // script1, script2, script3, script4 互相依赖
  .script("script2.js") // 并且并行下载后循序执行
  .script("script3.js")
  .script("script4.js")
  .wait(function(){script4Func();});

Beispiel 8:

$LAB
  .script(function(){
    // `_is_IE`的值ie为true ,非ie为false
    if (_is_IE) {
      return "ie.js"; // 如果是ie则这个js会被加载
    }
    else {
      return null; //如果不是ie这个代码就会被略过
    }
  })
  .script("script1.js")
  .wait();

LABjs-Lademethode

Dynamisches Laden von Skriptdateien in LABjs bezieht sich auf das Laden externer JS über verschiedene Methoden, wenn das JS-Skript der Seite ausgeführt wird (im Wesentlichen anders als Skripte, die statisch über das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag in HTML-Seiten geladen werden)

Es gibt viele Möglichkeiten, Skripte dynamisch zu laden, mit unterschiedlichen Vor- und Nachteilen. Ich werde hier nicht näher auf den Referenzlink am Ende dieses Artikels eingehen :).

In LABjs werden drei Haupttechniken verwendet, nämlich Skriptelement, XHR-Injection und Cache-Trick

Zuerst geben wir eine kurze Einführung in diese drei Lademethoden. Im vierten Teil analysieren wir die Verwendungsszenarien der drei Methoden in der LABjs-Quellcode-Implementierung

Skriptelement (LABjs verwendet standardmäßig die Lademethode)

Die gebräuchlichste Methode zum dynamischen Laden von Skripten hat viele Vorteile, darunter: 1. Einfache Implementierung 2. Kann domänenübergreifend sein 3. Blockiert nicht das Laden anderer Ressourcen usw.

Unter Opera/Firefox (alte Version): Die Reihenfolge der Skriptausführung stimmt mit der Reihenfolge überein, in der Knoten in die Seite eingefügt werden

Unter IE/Safari/Chrome: Die Ausführungsreihenfolge kann nicht garantiert werden

Hinweis:

Unter der neuen Version von Firefox stimmt die Reihenfolge der Skriptausführung nicht unbedingt mit der Reihenfolge des Einfügens in die Seite überein, aber die Ausführungsreihenfolge kann garantiert werden, indem das async-Attribut des Skript-Tags auf „false“ gesetzt wird

Unter der alten Version von Chrome stimmt die Reihenfolge der Skriptausführung nicht unbedingt mit der Reihenfolge des Einfügens in die Seite überein, aber die Ausführungsreihenfolge kann garantiert werden, indem das async-Attribut des Skript-Tags auf „false“ gesetzt wird

XHR-Injektion
Laden Sie die Skriptdatei per Ajax-Anfrage und führen Sie sie dann aus über:
Bewertung: gängige Methode
XHR-Injection: Erstellen Sie ein Skriptelement und injizieren Sie den Inhalt der geladenen Skriptdatei in
Haupteinschränkung: Domänenübergreifend nicht möglich
Cache-Trick (stark abhängig von der Browser-Funktionsimplementierung, nicht empfohlen)
Wenn Sie das Typattribut des Skriptelements auf einen Wert festlegen, den der Browser nicht erkennt, z. B. „text/cache“, „text/casper“, „text/hellworld“ usw., ist das Verhalten verschiedener Browser wie folgt folgt:
In IE/Safari/Chrome (alte Version): Das Skript wird wie gewohnt geladen, aber nicht ausgeführt. Vorausgesetzt, dass der Browser das Caching nicht deaktiviert, wird das geladene Skript nur dann zwischengespeichert, wenn es benötigt wird Sie müssen es neu erstellen, den Typ auf den richtigen Wert setzen und src auf die zuvor angeforderte Datei-URL verweisen (entspricht dem Lesen der Datei aus dem Cache)
Opera/Firefox: Lädt nicht
Hinweis:
Es hängt stark von der Funktionsimplementierung des Browsers ab und kann ungültig werden, wenn sich die Funktionsimplementierung des Browsers ändert. Die Verwendung von
wird nicht empfohlen Die neue Version des Chrome-Browsers legt den Typ des Skriptelements auf etwas anderes als „text/javascript“ fest und lädt die Skriptdatei nicht mehr.

Bewertung der Skriptladeoptionen in LABjs

Ignorieren Sie die technischen Details und beschreiben Sie die Implementierung in LABjs durch ein Stück Pseudocode, der ungefähr wie folgt lautet:
Bestimmen Sie zunächst, ob das angeforderte Skript vorab geladen werden soll (die Bedingungen für das Vorladen finden Sie in den Kommentaren zum Pseudocode). Wenn das Vorladen durchgeführt wird, stellen Sie fest, ob der Browser echtes Vorladen unterstützt. Wenn nicht, ermitteln Sie, ob sich das angeforderte Skript in derselben Domäne befindet wie die aktuelle Seite. Wenn nicht, verwenden Sie XHR-Injection , , mit Cache-Trick
Wenn kein Vorladen durchgeführt wird, stellen Sie fest, ob der Browser das Async-Attribut des Skriptelements unterstützt (siehe Pseudocode-Kommentare). Wenn ja, legen Sie das Async-Attribut fest und fordern Sie die Skriptdatei an. Wenn nicht, laden Sie die Skriptdatei direkt über das Skriptelement ;

if(ifPreloadScript){  //当请求的脚本文件是否进行预加载：1、需要预加载 2、浏览器支持预加载
  if(supportRealPreloading){  //如果支持真正的预加载
    if(supportPreloadPropNatively){  //支持通过设置script标签的preload属性，实现script的预加载，以及分离加载和执行
                    //Nicholas C. Zakas大神的美好愿望，尚未有浏览器支持：/blog/2011/02/14/separating-javascript-download-and-execution/
      script.onpreload = callback;
      script.newPreload = true;
      script.src = targetUrl;
    }else{
      script.onreadystatechange = callback;  //其实就是指IE浏览器，假设指定了script元素的src属性，IE浏览器里会立即加载
      script.src = targetUrl;  //即使script元素没有被插入页面，callback为预加载后的回调
    }
  }
  else if(inSameDomain){  //非跨域，采用XHR Injection：请求的脚本与当前页面处于同一个域
    xhr = new XMLHttpRequest();  //由于上个判断已经将IE无情地抛弃在这个条件分支之外，所以大胆地用 new XMLHttpRequest()吧
    xhr.onreadystatechange = callback;
    xhr.open("GET",targetUrl);
    xhr.send();
  }
  else{  //最无奈的后招，Cache Trick，新版chromei已经不支持
    script.onload = callback;
    script.type = 'text/cache';  
    script.src = targetUrl;
  }
}else{
  if(canContrlExecutionOrderByAsync){  //如果能够通过script元素的async属性来强制并行加载的脚本顺序执行
                    //kyle大神着力推进的提案，目前已被html5小组接受并放入草案：/Dynamic_Script_Execution_Order#My_Solution
    script.onload = callback;
    script.async = false;  //将script元素的async设为false，可以保证script的执行顺序与请求顺序保持一致
    script.src = targetUrl;
  }
  else{
    script.onload = callback;
    script.src = targetUrl;  
  }
}

Wenn Sie einen IMG-Knoten auf der Seite erstellen und dessen Quelle auf eine Skriptdatei verweisen, kann dieser in einigen Browsern auch die Rolle des Dateivorladens spielen. Hat der Autor von LABjs nicht daran gedacht?