Introduction détaillée aux modules dans ES6 (avec exemples)

Le contenu de cet article est une introduction détaillée au module dans ES6 (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. . a aidé.

Cet article présente principalement l'utilisation du module Module, une nouvelle fonctionnalité d'ES6, explique brièvement le concept et la fonction du module Module, et analyse la méthode d'utilisation et les précautions associées du module Module dans sous forme d'exemples. Ce qui est nécessaire Les amis peuvent se référer à

1. Introduction au module

La classe ES6 n'est qu'un sucre de syntaxe pour la programmation orientée objet. méthode d'écriture de l'héritage de chaîne de prototypes du constructeur d'ES5 Cela ne résout pas le problème de modularité. La fonction Module est proposée pour résoudre ce problème.

Historiquement, JavaScript n'a pas eu de système de modules, et il est impossible de diviser un gros programme en petits fichiers qui dépendent les uns des autres puis de les assembler de manière simple. D'autres langues ont cette fonctionnalité.

Avant ES6, la communauté développait quelques solutions de chargement de modules, les plus importantes étant CommonJS et AMD. Le premier est destiné aux serveurs et le second aux navigateurs. ES6 implémente les fonctions du module au niveau des spécifications du langage, et la mise en œuvre est assez simple. Il peut remplacer complètement les spécifications CommonJS et AMD existantes et devenir une solution de module universelle pour les navigateurs et les serveurs.

L'idée de conception des modules ES6 est d'être aussi statique que possible, afin que les dépendances du module puissent être déterminées au moment de la compilation (ce type de chargement est appelé "chargement au moment de la compilation"), ainsi que les variables d'entrée et de sortie. Les modules CommonJS et AMD ne peuvent déterminer ces éléments qu'au moment de l'exécution.
La syntaxe permettant aux navigateurs d'utiliser les modules ES6 est la suivante.

<script type="module" src="fs.js"></script>

Le code ci-dessus insère un module fs.js dans la page Web. Puisque l'attribut type est défini sur module, le navigateur sait qu'il s'agit d'un module ES6.

// ES6加载模块
import { stat, exists, readFile } from 'fs';

Le code ci-dessus charge un module via l'importation et charge certaines de ses méthodes.

2. Importer et exporter

La fonction du module se compose principalement de deux commandes : exporter et importer. La commande export est utilisée pour spécifier l'interface externe du module, et la commande import est utilisée pour saisir les fonctions fournies par d'autres modules.
Un module est un fichier indépendant. Toutes les variables contenues dans ce fichier ne peuvent pas être obtenues de 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. Vous trouverez ci-dessous un fichier JS qui utilise la commande d'exportation pour générer des variables.

// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

En plus de ce qui précède, il existe une autre façon d'écrire export. (Ceci est recommandé car vous pouvez voir en un coup d'œil quelles variables sont générées à la fin du script.)

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};

En plus de générer des variables, la commande d'exportation peut également générer des fonctions ou des classes. Normalement, la variable sortie par export est son nom d'origine, mais elle peut être renommée à l'aide du mot-clé as.

function v1() { ... }
function v2() { ... }
export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

Après avoir utilisé la commande d'exportation pour définir l'interface externe du module, d'autres fichiers JS peuvent charger ce module (fichier) via la commande d'importation.

// main.js
import {firstName, lastName, year} from './profile';
function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

La commande d'importation dans le code ci-dessus est utilisée pour charger le fichier profile.js et y saisir les variables. La commande import accepte un objet (indiqué par des accolades) qui spécifie le nom de la variable à importer depuis d'autres modules. Le nom de la variable entre accolades doit être le même que le nom de l’interface externe du module importé (profile.js).
Si vous souhaitez renommer la variable d'entrée, utilisez le mot-clé as dans la commande d'importation pour renommer la variable d'entrée.

import { lastName as surname } from './profile';

La commande d'importation a un effet liftant et sera promue à la tête de l'ensemble du module et exécutée en premier.

foo();
import { foo } from 'my_module';

3. Chargement global du module

En plus de spécifier de charger une certaine valeur de sortie, vous pouvez également utiliser le chargement global, c'est-à-dire utiliser un astérisque (*) pour spécifier un Objet, toutes les valeurs de sortie sont chargées sur cet objet.
Il existe un fichier circle.js, qui génère deux méthodes zone et circonférence.
Maintenant, chargez ce module.

// main.js
import { area, circumference } from './circle';
console.log('圆面积：' + area(4));
console.log('圆周长：' + circumference(14));

La méthode ci-dessus consiste à spécifier les méthodes à charger une par une. La méthode de chargement globale est la suivante.

import * as circle from './circle';
console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));

4. export default

Afin de faciliter la tâche des utilisateurs afin qu'ils puissent charger le module sans lire le document, la commande export default est utilisée. . Le module spécifie la sortie par défaut.

// export-default.js
export default function () {
  console.log('foo');
}

Le code ci-dessus est un fichier de module export-default.js, et sa sortie par défaut est une fonction.
Lorsque d'autres modules chargent ce module, la commande d'importation peut spécifier n'importe quel nom pour la fonction anonyme.

// import-default.js
import customName from './export-default';
customName(); // 'foo'

Il est à noter que les accolades ne sont pas utilisées après la commande import.
Essentiellement, exporter par défaut consiste à exporter une variable ou une méthode appelée par défaut, puis le système vous permet de lui donner n'importe quel nom. Il ne peut pas être suivi d'une instruction de déclaration de variable.

// 正确
var a = 1;
export default a;
// 错误
export default var a = 1;

5. L'essence du chargement du module ES6

Le mécanisme de chargement du module ES6 est complètement différent de celui des modules CommonJS. Les modules CommonJS génèrent une copie de la valeur, tandis que les modules ES6 génèrent une référence à la valeur.
Ce que le module CommonJS génère est une copie de la valeur de sortie. C'est-à-dire qu'une fois qu'une valeur est générée, les modifications au sein du module n'affecteront pas cette valeur. Regardez l'exemple suivant du fichier de module lib.js.

// lib.js
var counter = 3;
function incCounter() {
 counter++;
}
module.exports = {
 counter: counter,
 incCounter: incCounter,
};

Le code ci-dessus génère le compteur de variable interne et la méthode interne incCounter qui remplace cette variable. Ensuite, chargez ce module dans main.js.

// main.js
var mod = require('./lib');
console.log(mod.counter); // 3
mod.incCounter();
console.log(mod.counter); // 3

上面代码说明，lib.js模块加载以后，它的内部变化就影响不到输出的mod.counter了。这是因为mod.counter是一个原始类型的值，会被缓存。除非写成一个函数，才能得到内部变动后的值。

// lib.js
var counter = 3;
function incCounter() {
 counter++;
}
module.exports = {
 get counter() {
  return counter
 },
 incCounter: incCounter,
};

上面代码中，输出的counter属性实际上是一个取值器函数。现在再执行main.js，就可以正确读取内部变量counter的变动了。
ES6模块的运行机制与CommonJS不一样，它遇到模块加载命令import时，不会去执行模块，而是只生成一个动态的只读引用。等到真的需要用到时，再到模块里面去取值，换句话说，ES6的输入有点像Unix系统的“符号连接”，原始值变了，import输入的值也会跟着变。因此，ES6模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。
还是举上面的例子。

// lib.js
export let counter = 3;
export function incCounter() {
 counter++;
}
// main.js
import { counter, incCounter } from './lib';
console.log(counter); // 3
incCounter();
console.log(counter); // 4

上面代码说明，ES6模块输入的变量counter是活的，完全反应其所在模块lib.js内部的变化。
由于ES6输入的模块变量，只是一个“符号连接”，所以这个变量是只读的，对它进行重新赋值会报错。

// lib.js
export let obj = {};
// main.js
import { obj } from './lib';
obj.prop = 123; // OK
obj = {}; // TypeError

上面代码中，main.js从lib.js输入变量obj，可以对obj添加属性，但是重新赋值就会报错。因为变量obj指向的地址是只读的，不能重新赋值，这就好比main.js创造了一个名为obj的const变量。
最后，export通过接口，输出的是同一个值。不同的脚本加载这个接口，得到的都是同样的实例。

// mod.js
function C() {
 this.sum = 0;
 this.add = function () {
  this.sum += 1;
 };
 this.show = function () {
  console.log(this.sum);
 };
}
export let c = new C();

上面的脚本mod.js，输出的是一个C的实例。不同的脚本加载这个模块，得到的都是同一个实例。

// x.js
import {c} from './mod';
c.add();
// y.js
import {c} from './mod';
c.show();
// main.js
import './x';
import './y';

现在执行main.js，输出的是1。这就证明了x.js和y.js加载的都是C的同一个实例。

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!