Comment puis-je inclure des fichiers JavaScript dans d'autres fichiers JavaScript ?

Inclure des fichiers JavaScript dans d'autres fichiers JavaScript

En JavaScript, l'importation de modules est différente de l'@import de CSS. Les premières versions de JavaScript manquaient de fonctions d'importation, d'inclusion ou de nécessité, ce qui a conduit à diverses approches pour inclure des fichiers JavaScript dans d'autres. Cependant, depuis ES6 (2015), JavaScript a introduit le standard des modules ES6 pour importer des modules dans Node.js et la plupart des navigateurs modernes.

Modules ES6

Les modules ES6 utilisent la syntaxe suivante :

import { function } from './module.js';
// or
import * as module from './module.js';

Modules ECMAScript dans Navigateurs

Les navigateurs prennent en charge le chargement direct du module ES6, sans outils de construction comme Webpack. Utilisez la syntaxe suivante :

<script type="module">
  import { function } from './module.js';
</script>

Node.js require

Node.js utilise le style de module CJS :

const module = require('./module.js');

Autres méthodes

Outre les modules ES6 et Node.js requis, d'autres méthodes pour inclure des fichiers JavaScript dans les navigateurs, citons :

• Chargement AJAX : Utilisez un appel AJAX pour charger le script et évaluez-le pour l'exécuter. Limité au même domaine pour des raisons de sécurité.
• Fetch Loading : Utilisez fetch avec des promesses pour contrôler l'ordre d'exécution des scripts.
• JQuery Loading : Utilisez jQuery pour charger des scripts sur une seule ligne.
• Script dynamique Chargement : Créez une balise de script avec l'URL et ajoutez-la au code HTML.

Détection de l'exécution du script

L'inclusion de fichiers JavaScript à distance signifie un chargement asynchrone . Pour vous assurer que le code chargé est disponible immédiatement, utilisez la technique suivante :

function loadScript(url, callback) {
  // Create script tag
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url;

  // Bind event to callback function
  script.onreadystatechange = callback;
  script.onload = callback;

  // Append to HTML
  document.head.appendChild(script);
}

Fusion/prétraitement du code source

Créez des outils tels que Parcel, Webpack et Babel. peut être utilisé pour fusionner les codes sources, assurer la compatibilité descendante et réduire les fichiers.

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!