Comment puis-je importer un fichier JavaScript dans un autre ?

Comment inclure un fichier JavaScript dans un autre fichier JavaScript, similaire à @import en CSS ?

JavaScript a évolué au fil des années pour répondre au besoin d'importation de modules , avec de nouvelles approches introduites pour améliorer la compatibilité et la prise en charge dans différents environnements.

Modules ES6 (ECMAscript Modules)

Introduit en 2015, les modules ES6 offrent un moyen standardisé d'importer des modules dans Node.js et les navigateurs modernes. Syntaxe :

// Example: module.js
export function hello() {
  return "Hello";
}

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

Node.js nécessite (modules CommonJS)

Le système de modules traditionnel utilisé dans Node.js est encore largement utilisé dans de nombreux projets. Syntaxe :

// Example: mymodule.js
module.exports = {
   hello: function() {
      return "Hello";
   }
}

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

Chargement AJAX

Charge un script externe via une requête asynchrone et l'exécute à l'aide d'eval. Nécessite une gestion explicite des limitations de sécurité et du bac à sable.

Fetch Loading

Charge un ou plusieurs scripts avec fetch, en utilisant des promesses pour contrôler l'ordre d'exécution.

jQuery Loading

Fournit une fonctionnalité de chargement de script sur une seule ligne.

Script dynamique Chargement

Implique l'ajout manuel d'une balise de script au HTML avec l'URL du script.

Détection de l'exécution du script

Les scripts chargés à distance s'exécutent de manière asynchrone, ce qui nécessite des techniques pour garantir que le code est disponible lorsque nécessaire :

• Gestion des événements : Lier un rappel à l'événement de chargement de script.
• Fusion/prétraitement du code source : Utilisez des outils de construction tels que Webpack, Parcel ou Babel pour combiner, réduire et transpiler le code.

Conclusion

Le choix de la méthode d'importation dépend des exigences spécifiques et de l'environnement. Tenez compte de facteurs tels que la compatibilité avec les anciens navigateurs, les exigences de performances et la nécessité d'un prétraitement du code.

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!