Chargement de scripts programmables Bien que la balise 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. <br><span style="color: rgb(0, 0, 0);"><strong>1. Chargez le script directement </strong></span><br>Nous pouvons utiliser un code similaire à celui-ci pour insérer la balise <script> <br></p> <p class="jb51code"><br></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.src = '/js/feature.js'; head.appendChild(script);</pre><div class="contentsignin">Copier après la connexion</div></div><p>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. </p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">script.onload = function() { // 现在可以调用脚本里定义的函数了 };</pre><div class="contentsignin">Copier après la connexion</div></div><p>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 <script> Et nous n’avons même pas encore parlé de gestion des erreurs ! Pour éviter <br/> tous ces maux de tête, il est fortement recommandé d'utiliser des scripts pour charger les bibliothèques. </p><p><span style="color: #000000"><strong>Chargement conditionnel de yepnope</strong><br/></span>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. <br/>L'utilisation la plus simple de yepnope consiste à charger un script et à renvoyer un rappel une fois l'exécution du script terminée. <br/></p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">yepnope({ load: 'oompaLoompas.js', callback: function() { console.log('oompa-Loompas ready!'); } });</pre><div class="contentsignin">Copier après la connexion</div></div><p>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. </p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">yepnope({ load: ['underscore.js', 'backbone.js'], complete: function() { // 这里是Backbone 的业务逻辑 } });</pre><div class="contentsignin">Copier après la connexion</div></div><p>Veuillez noter que complete est utilisé ici au lieu de callback. </p><p>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. </p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">yepnope({ test: Modernizr.touch, yep: ['touchStyles.css', 'touchApplication.js'], nope: ['mouseStyles.css', 'mouseApplication.js'], complete: function() { // 不管是哪一种情况，应用程序均已就绪！ } });</pre><div class="contentsignin">Copier après la connexion</div></div><p>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. </p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">yepnope({ test: window.json,nope: ['json2.js'], complete: function() { // 现在可以放心地用JSON 了 } });</pre><div class="contentsignin">Copier après la connexion</div></div><p>Après avoir utilisé yepnope, la page devrait devenir la belle structure de balisage suivante : <br/></p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xhtml;"><html> <head> <!-- metadata and stylesheets go here --> <script src="headScripts.js"></scripts> <script src="deferredScripts.js" defer>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
