Discutez en détail du chargement dynamique LABJS des fichiers js sur les compétences demand_javascript

LABjs est un petit outil JavaScript utilisé pour charger des fichiers JavaScript selon vos besoins. En utilisant cet outil, vous pouvez améliorer les performances de la page, éviter de charger des fichiers JavaScript inutiles et réaliser un chargement parallèle dynamique des fichiers de script et une gestion. L'ordre d'exécution du chargement des fichiers de script.

Exemple simple

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

Présentation de plusieurs exemples de LABJS :
Exemple 1 :

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

Exemple 2 :

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

Exemple 3 :

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

Exemple 4 :

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

Exemple 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();});

Exemple 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();});

Exemple 7 :

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

Exemple 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();

Méthode de chargement LABjs

Le chargement dynamique de fichiers de script dans LABjs fait référence au chargement de js externes via diverses méthodes lorsque le script js de la page est exécuté (principalement différent des scripts chargés statiquement via la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a dans les pages html)

Il existe de nombreuses façons de charger dynamiquement des scripts, avec différents avantages et inconvénients. Je n'entrerai pas dans les détails ici. Les enfants intéressés peuvent se référer au lien de référence à la fin de cet article :).

Il existe trois techniques principales utilisées dans LABjs, à savoir Script Element, XHR Injection et Cache Trick

Dans un premier temps, nous donnerons une brève introduction à ces trois méthodes de chargement. Dans la quatrième partie, nous analyserons les scénarios d'utilisation des trois méthodes dans l'implémentation du code source de LABjs
.

Élément de script (LABjs utilise la méthode de chargement par défaut)

La méthode la plus courante de chargement dynamique de scripts présente de nombreux avantages, notamment : 1. Mise en œuvre simple 2. Peut être inter-domaines 3. Ne bloquera pas le chargement d'autres ressources, etc.

Sous Opera/Firefox (ancienne version) : l'ordre d'exécution du script est cohérent avec l'ordre dans lequel les nœuds sont insérés dans la page

Sous IE/Safari/Chrome : L'ordre d'exécution ne peut être garanti

Remarque :

Sous la nouvelle version de Firefox, l'ordre d'exécution du script n'est pas forcément le même que l'ordre d'insertion dans la page, mais l'ordre d'exécution peut être garanti en définissant l'attribut async de la balise script sur false

Sous l'ancienne version de Chrome, l'ordre d'exécution du script n'est pas forcément le même que l'ordre d'insertion dans la page, mais l'ordre d'exécution peut être garanti en définissant l'attribut async de la balise script sur false

Injection XHR
Chargez le fichier script via une requête ajax puis exécutez-le via :
eval : méthode commune
Injection XHR : Créez un élément de script et injectez le contenu du fichier de script chargé dans
Principale limitation : impossible de traverser le domaine
Cache Trick (fortement dépendant de la mise en œuvre des fonctionnalités du navigateur, non recommandé)
Lorsque vous définissez l'attribut type de l'élément de script sur une valeur que le navigateur ne reconnaît pas, telle que "text/cache", "text/casper", "text/hellworld", etc., le comportement des différents navigateurs est le suivant : suit :
Dans IE/Safari/Chrome (ancienne version) : le script est chargé comme d'habitude, mais ne sera pas exécuté. En supposant que le navigateur ne désactive pas la mise en cache, le script chargé sera mis en cache par le navigateur lorsqu'il sera nécessaire. vous devez le recréer. balise de script, définir type sur la valeur correcte et src pointe vers l'URL du fichier précédemment demandé (équivalent à lire le fichier à partir du cache)
Opera/Firefox : ne charge pas
Remarque :
Il dépend fortement de l'implémentation des fonctionnalités du navigateur et peut devenir invalide à mesure que l'implémentation des fonctionnalités du navigateur change. Il n'est pas recommandé d'utiliser
. La nouvelle version du navigateur Chrome définit le type de l'élément de script sur autre chose que "text/javascript" et ne chargera plus le fichier de script.

Jugement sur les options de chargement de script dans LABjs

Ignorez les détails techniques et décrivez l'implémentation dans LABjs à travers un morceau de pseudo code, qui est en gros :
Tout d'abord, déterminez s'il faut précharger le script demandé (voir les commentaires du pseudo code pour les conditions de préchargement
) ; Si le préchargement est effectué, déterminez si le navigateur prend en charge le vrai préchargement ; s'il prend en charge le vrai préchargement, préchargez-le ; sinon, déterminez si le script demandé est dans le même domaine que la page actuelle. Si tel est le cas, utilisez l'injection XHR. Sinon. , , en utilisant Cache Trick ; Si le préchargement n'est pas effectué, déterminez si le navigateur prend en charge l'attribut async de l'élément de script (voir les commentaires du pseudo-code). Si tel est le cas, définissez l'attribut async et demandez le fichier de script. Sinon, chargez le fichier de script directement via l'élément de script. ;

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;  
  }
}

En fait, lorsque vous créez un nœud img sur la page et que vous pointez son src vers un fichier script, il peut aussi jouer le rôle de préchargement de fichiers dans certains navigateurs. L'auteur de LABjs n'y a-t-il pas pensé ?