Explication détaillée de l'importation en JavaScript (avec exemples)

Cet article vous apporte une explication détaillée de l'importation en JavaScript (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile. L'instruction

import est utilisée pour importer une liaison exportée par un autre module. Que le mode strict soit déclaré ou non, les modules importés s'exécutent en mode strict. L'instruction import ne peut pas être utilisée dans les scripts intégrés.

Syntaxe

import defaultExport from “module-name”;
import * as name from “module-name”;
import { export } from “module-name”;
import { export as alias } from “module-name”;
import { export1 , export2 } from “module-name”;
import { export1, export2 as alias2 , [...] } from “module-name”;
import defaultExport, { export [ , [...] ] } from “module-name”;
import defaultExport, * as name from “module-name”;
import “module-name”;

defaultExport

fera référence au nom de l'exportation par défaut du module.

nom-module

Le module à importer. Il s'agit généralement d'un chemin d'accès relatif ou absolu au fichier .js contenant le module et peut ne pas inclure l'extension .js. Certains outils d'empaquetage peuvent autoriser ou exiger l'utilisation de cette extension ; vérifiez votre environnement d'exécution pour autoriser uniquement les chaînes entre guillemets simples et doubles.

name

Le nom de l'objet module qui sera utilisé comme une sorte d'espace de noms lorsqu'il sera référencé.

export, exportN

Nom de l'export à importer

alias, aliasN

Précisez la référence Le nom de l'importation.

Description

Le paramètre name est le nom de "l'objet module" qui utilisera un espace de noms pour référencer l'export. Le paramètre export spécifie une seule exportation nommée, tandis que la syntaxe import * as name importe toutes les exportations.

Importez le contenu du module entier

Cela insère myModule dans la portée actuelle avec tous les modules exportés à partir du fichier situé dans /modules/my-module.js.

import * as myModule from ‘/modules/my-module.js’;

Ici, accéder à l'export signifie utiliser le nom du module (dans ce cas "myModule") comme espace de noms. Par exemple, si le module importé ci-dessus contenait un doAllTheAmazingThings(), vous pourriez l'appeler ainsi :

myModule.doAllTheAmazingThings();

Importer une seule exportation

Étant donné un objet nommé myExport ou valeur, qui a été exportée depuis le module my-module (car le module entier est exporté) ou exportée explicitement (à l'aide de l'instruction export), en insérant myExport dans la portée actuelle.

import { myExport } from ‘/modules/my-module.js’;

Importer plusieurs exportations

Insérer foo et bar dans la portée actuelle.

import { foo, bar } from ‘/modules/my-module.js’;

Importer des exportations avec des alias

Les exportations peuvent être renommées lors de l'importation, par exemple en insérant shortName dans la portée actuelle.

import { reallyReallyReallyLongModuleExportName as shortName } from “/modules/my-module.js”;

Renommer plusieurs exports lors de l'importation

Utiliser des alias pour importer plusieurs exports d'un module.

import {
    reallyReallyReallyLongModuleMemberName as shortName,
    anotherLongModuleName as short
} form “/modules/my-module.js”;

Importer un module pour les effets secondaires uniquement

Le module importe uniquement pour les effets secondaires (mot neutre, pas de connotation péjorative), ne rien importer dans le module, cela exécutera du code global dans le module, mais n'importe aucune valeur.

import “/modules/my-module.js”

Importer les valeurs par défaut

Disponible lorsque l'exportation par défaut (qu'il s'agisse d'un objet, d'une fonction, d'une classe, etc.) est en vigueur. Ces valeurs par défaut peuvent ensuite être importées à l'aide d'instructions d'importation.
L'utilisation la plus simple consiste à importer directement la valeur par défaut :

import myDefault from “/modules/my-module.js”;

Il est également possible d'utiliser la syntaxe par défaut avec l'utilisation ci-dessus (importation d'espace de noms et importation nommée). Dans ce cas, l'import par défaut doit être déclaré en premier.

import myDefault, * as myModule from “/modules/my-module.js”;

ou

import myDefault, { foo, bar } from “/modules/my-module.js”;

Exemple

Importé depuis le module d'assistance pour aider à gérer les requêtes AJAX DSON.

Module : fichier.js

function getJSON(url, callback){
    let xhr = new XMLHttpRequest();
    xhr.onload = function () {
        callback(this.responseText)
    };
    xhr.open(‘GET’, url, true);
    xhr.send();
}
export function getUserFulContents(url, callback){
    getJSON(url, data => callback(JSON.parse(data)));
}

Programme principal : main.js

import { getUserFulContents } from “/modules/file.js”;
getUserFulContents(‘http://www.example.com”, 
    data => { doSomethingUseful(data); } )

Ajout du

mode strict
mode strict
script intégré

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!