Explication détaillée des exemples d'utilisation de chargement de scripts programmables Javascript

Chargement de scripts programmables

Bien que la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a soit d'une simplicité réconfortante, certaines situations nécessitent une manière plus sophistiquée de charger des scripts. Nous pourrions vouloir charger un script uniquement pour les utilisateurs qui répondent à certains critères, comme les membres platine ou les joueurs ayant atteint un certain niveau, ou nous pourrions vouloir charger une fonctionnalité uniquement, comme un widget de chat, lorsque l'utilisateur clique pour l'activer. il.
1. Chargez le script directement
Nous pouvons utiliser un code similaire à celui-ci pour insérer la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a

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

Attendez une minute, comment savoir quand le chargement du script est terminé ? Nous pouvons ajouter du code au script lui-même pour déclencher l'événement, mais il serait trop ennuyeux d'ajouter un tel code pour chaque script à charger. Ou il existe une autre situation, c'est-à-dire qu'il nous est impossible d'ajouter un tel code au script sur un serveur tiers. La spécification HTML5 définit un attribut onload qui peut être lié aux rappels.

script.onload = function() {
// 现在可以调用脚本里定义的函数了
};

Cependant, IE8 et les versions antérieures ne prennent pas en charge onload, ils prennent en charge onreadystatechange. Certains navigateurs connaîtront également des « événements surnaturels » lors de l'insertion de la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a Et nous n’avons même pas encore parlé de gestion des erreurs ! Pour éviter
tous ces maux de tête, il est fortement recommandé d'utiliser des scripts pour charger les bibliothèques.

Chargement conditionnel de yepnope
yepnope est une bibliothèque de chargement de script simple et légère (la version simplifiée compressée ne fait que 1,7 Ko). répondre sincèrement aux besoins de chargement de scripts dynamiques les plus courants.
L'utilisation la plus simple de yepnope consiste à charger un script et à renvoyer un rappel une fois l'exécution du script terminée.

yepnope({
  load: 'oompaLoompas.js',
  callback: function() {
  console.log('oompa-Loompas ready!');
  }
});

Toujours indifférent ? Nous allons ensuite utiliser yepnope pour charger plusieurs scripts en parallèle et les exécuter dans un ordre donné. Par exemple, disons que nous voulons charger Backbone.js et que ce script dépend de Underscore.js. Pour ce faire, nous fournissons simplement les emplacements de ces deux scripts comme paramètres de chargement dans un tableau.

yepnope({
  load: ['underscore.js', 'backbone.js'],
  complete: function() {
  // 这里是Backbone 的业务逻辑
  }
});

Veuillez noter que complete est utilisé ici au lieu de callback.

La différence est que le rappel sera exécuté pour chaque ressource dans la liste de chargement des scripts, et complete ne sera exécuté que lorsque tous les scripts seront chargés. La caractéristique de signature de yepnope est le chargement conditionnel. Étant donné le paramètre de test, yepnope chargera différentes ressources selon que la valeur du paramètre est vraie ou non. Par exemple, il est possible de déterminer avec un certain degré de précision si l'utilisateur utilise un appareil à écran tactile, et différentes feuilles de style et scripts peuvent être chargés en conséquence.

yepnope({
  test: Modernizr.touch,
  yep: ['touchStyles.css', 'touchApplication.js'],
  nope: ['mouseStyles.css', 'mouseApplication.js'],
  complete: function() {
  // 不管是哪一种情况，应用程序均已就绪！
  }
});

Nous préparons le terrain avec seulement quelques lignes de code et pouvons offrir aux utilisateurs une expérience complètement différente en fonction de leur périphérique d'accès. Bien entendu, toutes les charges conditionnelles ne nécessitent pas à la fois des résultats de test oui (oui) et non (non). L'une des utilisations les plus courantes de yepnope consiste à charger des scripts de calage pour compenser les fonctionnalités manquantes dans les anciens navigateurs.

yepnope({
  test: window.json,nope: ['json2.js'],
  complete: function() {
  // 现在可以放心地用JSON 了
  }
});

Après avoir utilisé yepnope, la page devrait devenir la belle structure de balisage suivante :

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

Ça vous semble familier ? Cette structure est la même que celle donnée dans la section traitant de l'attribut defer, la seule différence est que l'un des fichiers de script ici a été épissé avec yepnope.js (probablement au-dessus de deferredScripts.js), de sorte que ceux-ci peuvent être chargés indépendamment. Les scripts qui se rechargent de manière conditionnelle (car le navigateur nécessite des scripts shim) et ceux qui souhaitent être chargés dynamiquement (en réponse aux actions de l'utilisateur). Le résultat sera un deferredScripts.js plus petit.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!