Comment puis-je inclure des fichiers JavaScript dans mes projets Web ?

Inclure des fichiers JavaScript : au-delà de @Import

Bien que @import soit couramment utilisé en CSS pour inclure des feuilles de style externes, JavaScript ne prend pas en charge nativement un mécanisme similaire. Au fil du temps, de nombreuses méthodes ont émergé pour répondre à ce besoin.

Modules ES6 (recommandés)

Depuis 2015, JavaScript a adopté les modules ES6, offrant un moyen standardisé d'importer modules. Cette approche est prise en charge par la plupart des navigateurs modernes et Node.js.

Pour utiliser les modules ES6, créez un fichier module.js avec une fonction d'exportation :

export function hello() {
  return "Hello";
}

Dans un autre fichier, importez le module et utilisez sa fonction :

import { hello } from './module.js';
let val = hello();  // val is "Hello";

Node.js Require

Pour Node.js, le style de module traditionnel est le système module.exports/require.

Créez un module mymodule.js :

module.exports = {
   hello: function() {
      return "Hello";
   }
}

Utilisez le module dans un autre fichier :

const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"

AJAX Chargement

Les requêtes AJAX peuvent être utilisées pour charger dynamiquement des scripts JavaScript. Toutefois, cette fonctionnalité est limitée au même domaine en raison de restrictions de sécurité. L'utilisation d'eval pour exécuter de tels scripts est déconseillée en raison de risques de sécurité potentiels.

Fetch Loading

Semblable aux importations dynamiques, la bibliothèque Fetch Inject permet de charger plusieurs scripts via fetch et contrôler l'ordre d'exécution à l'aide de promesses.

fetchInject([
  'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js'
]).then(() => {
  console.log(`Finish in less than ${moment().endOf('year').fromNow(true)}`)
})

jQuery Chargement

jQuery propose une méthode simplifiée pour charger des scripts externes :

$.getScript("my_lovely_script.js", function() {
   alert("Script loaded but not necessarily executed.");
});

Chargement dynamique de script

Cette technique consiste à créer un script baliser avec l'URL souhaitée et l'injecter dans le HTML document.

function dynamicallyLoadScript(url) {
    var script = document.createElement("script");
    script.src = url;
    document.head.appendChild(script);
}

Détection de l'exécution de scripts

Lors du chargement de scripts de manière asynchrone, il y a un délai avant que les scripts ne soient exécutés. Pour détecter la fin du chargement d'un script, envisagez d'utiliser des rappels basés sur des événements ou l'approche suggérée dans le lien fourni dans la réponse d'origine.

Fusion/prétraitement du code source

Les outils de construction modernes tels que Parcel, Webpack et Babel peuvent combiner plusieurs fichiers JavaScript, appliquer des transformations et assurer une compatibilité entre navigateurs. Cela permet aux développeurs d'utiliser des fonctionnalités JavaScript avancées et de rationaliser leur flux de travail de développement.

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!