Introduction à l'exportation et à l'importation du module JavaScript (explication détaillée)

Cet article vous apporte une introduction (explication détaillée) sur l'exportation et l'importation du module JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

J'ai récemment examiné certains programmes écrits dans le framework Vue et j'ai découvert que mes connaissances front-end étaient encore d'il y a quelques années. J'ai découvert qu'il existe maintenant diverses importations de modules dans les programmes Javascript. le importations C'est très similaire à la syntaxe de python, sauf que les deux mots-clés from et import sont utilisés dans l'ordre inverse. Si vous regardez attentivement, le module d'importation est assez différent de Python. Le principe est que le module a des exportations, et il est également divisé en exportations par défaut et en exportations nommées, ce qui est un peu gênant. L’article d’aujourd’hui résume donc toutes les formes d’exportation et les utilisations d’importation correspondantes.

ES6 implémente les fonctions du module au niveau des standards du langage et devient une solution de module universelle pour les navigateurs et les serveurs. Il peut remplacer complètement les spécifications CommonJS et AMD. Les fonctionnalités de base sont les suivantes :

• Chaque module n'est chargé qu'une seule fois, et chaque JS n'est exécuté qu'une seule fois. Si vous chargez le même fichier dans le même répertoire la prochaine fois, il sera lu directement depuis la mémoire

• Toutes les variables déclarées dans un module sont toutes des variables locales et ne pollueront pas la portée globale

• Les variables ou fonctions à l'intérieur du module peuvent être exportées via l'exportation

• Un module peut importer d'autres modules

2 La fonction du module se compose principalement de deux commandes : exporter et importer. La commande d'exportation est utilisée pour spécifier l'interface externe du module, et la commande d'importation est utilisée pour saisir les fonctions fournies par d'autres modules

3. Un module est un fichier indépendant, et toutes les variables à l'intérieur du fichier ; ne peut pas être obtenu à l’extérieur. Si vous souhaitez que le monde extérieur puisse lire une variable à l'intérieur du module, vous devez utiliser le mot-clé export pour afficher la variable

var year = '2018';
var month = 'Febuary';
export {year, month};

export export module

l'instruction de syntaxe d'exportation est ; utilisé pour exporter des fonctions, la valeur originale de l'objet, le fichier (ou module) spécifié. Il existe deux méthodes d'exportation de module :

Exportation nommée (exportation de nom) et Exportation par défaut (exportation de définition) Chaque module peut avoir plusieurs exportations nommées, tandis que chaque exportation par défaut n'a qu'un seul module.

Exportation nommée

Le module peut déclarer des objets d'exportation via le mot-clé de préfixe d'exportation, et il peut y avoir plusieurs objets d'exportation. Ces objets d'export se distinguent par des noms, qui sont appelés exports nommés

export { func }; // 导出一个已定义的函数func
export const foo = Math.sqrt(100); // 导出一个常量

On peut utiliser les mots-clés * et from pour implémenter l'héritage du module :

export * from 'base_module';

Lorsque le module est exporté, vous pouvez spécifier les membres exportés du module. Les membres exportés peuvent être considérés comme des membres publics dans la classe, tandis que les membres non exportés peuvent être considérés comme des membres privés dans la classe :

var name = 'Kevin的居酒屋';
var domain = 'http://coffee.toast.com';
 
export {name, domain}; // 相当于导出{name:name,domain:domain}

Lorsque le module est exporté, on peut utiliser le mot-clé as pour renommer les membres exportés. L'export ci-dessus peut s'écrire comme ceci :

export {name as siteName, domain}

Faites attention aux erreurs de syntaxe :

export 1; 
var a = 100;
export a;

Lors de l'export d'une interface, elle doit avoir un one-to. -une correspondance avec les variables à l'intérieur du module. Cela n'a aucun sens d'exporter directement 1, et il est impossible d'avoir une variable correspondant lors de l'importation

Bien que cela semble vrai, la valeur de a est un nombre, et la déconstruction ne peut pas du tout être terminée, donc. il doit être écrit sous la forme export a. Même si a est affecté à une fonction, il n'est pas recommandé d'utiliser le formulaire ci-dessus pour exporter car la plupart des styles suggèrent qu'il est préférable d'utiliser un export à la fin du module pour exporter toutes les interfaces, tout comme les exemples ci-dessus. export {a}

Export par défaut

L'export par défaut est également appelé export défini. L'export nommé peut exporter plusieurs valeurs, mais lors de l'importation d'une référence, le même nom doit également être utilisé pour référencer la valeur correspondante. L'exportation par défaut n'exporte qu'une seule valeur. Cette sortie peut être une fonction, une classe ou un autre type de valeur, qui sera plus facile à référencer lors de l'importation du module.

export default function() {}; // 导出一个函数
export default class(){}; // 导出一个类

L'exportation par défaut peut être comprise comme une autre forme d'exportation nommée. L'exportation par défaut peut être considérée comme une exportation nommée utilisant le nom par défaut.

Les deux méthodes d'export suivantes sont équivalentes :

const D = 123; 
export default D;
export { D as default };

Lors de l'export d'un module par nom :

// "my-module.js" 模块
function cube(x) {
    return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { cube, foo };

Dans un autre module (fichier js), on peut citer comme ceci :

import { cube, foo } from 'my-module';
console.log(cube(3));
console.log(foo);

Lors de l'utilisation de l'export par défaut d'un module :

// "my-module.js"模块
export default function (x) {
return x * x * x;
}

Dans un autre module, on peut citer comme ceci, le nom relatif est exporté C'est plus simple à utiliser :

import cube from 'my-module';
console.log(cube(3)); // 27

import import module

L'instruction de syntaxe import est utilisée pour importer des fonctions, des objets et des fichiers (ou modules) spécifiés à partir de modules et de valeurs de scripts exportés. L'importation du module d'importation correspond à la fonction d'exportation du module d'exportation. Il existe également deux méthodes d'importation de module : l'importation nommée (importation de nom) et l'importation par défaut (importation de définition).

Remarque : L'importation doit être placée au début du fichier, et aucun autre code logique n'est autorisé devant. Ceci est cohérent avec le style d'importation de. tous les autres langages de programmation.

Importation nommée

Nous pouvons insérer des membres importés dans la portée actuelle en spécifiant un nom. Vous pouvez importer un seul membre ou plusieurs membres :

Notez que les variables entre accolades correspondent aux variables après export

import {myMember} from "my-module";
import {foo, bar} from "my-module";

通过*符号，我们可以导入模块中的全部属性和方法。当导入模块全部导出内容时，就是将导出模块（’my-module.js’）所有的导出绑定内容，插入到当前模块（’myModule’）的作用域中：

import * as myModule from "my-module";

默认导入

在模块导出时，可能会存在默认导出。同样的，在导入时可以使用import指令导入这些默认值。直接导入默认值：

import defaultName from "my-module";
import myDefault, {foo, bar} from "my-module"; // 指定成员导入和默认导入

default关键字

// my-module.js
export default function() {}
 
// 等效于：
function func() {};
export {func as default};

在import的时候，可以这样用：

import a from './my-module';
 
// 等效于，或者说就是下面这种写法的简写
import {default as a} from './my-module';

这个语法糖的好处就是import的时候，可以省去{}。

简单的说，如果import的时候，你发现某个变量没有花括号括起来（没有*号），那么你在脑海中应该把它还原成有花括号的{default as ...}语法，所以import $,{each,map} from 'jquery';import后面第一个$是{default as $}的替代写法。

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!