La question vient
Dans le développement quotidien, HMS rencontre souvent ces déclarations:
import {xxx, xxxx} from 'xxx'
import xxx from 'xxx'
import('../xxx')
let xxx = 'x'; export {xxx}
export class xxx {}
export default {}
exports.post()
module.exports.init = init;
Donc, la question se pose, que signifient ces déclarations de importsomme export? Quelle est la différence?
Connaissances de base
1. Module ES6
importEt ce exportsont les deux commandes du module ES6.
La fonction du module ES6 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 entrer les fonctions fournies par d'autres modules.
Avant ES6, les modules les plus importants étaient chargés avec CommonJS et AMD. Le premier est utilisé pour le serveur et le second est utilisé pour le navigateur.
L'idée de conception des modules ES6 est d'être aussi statique que possible, afin que les dépendances des modules et les variables d'entrée et de sortie puissent être déterminées au moment de la compilation.
2. exportation
La commande d'exportation est utilisée pour spécifier l'interface externe du module. Autrement dit, les variables internes (méthodes, classes) du module de sortie.
- Utilisation basique
// 1. 直接输出变量（方法、类）
export var m = 1;
export function multiply(x, y) {
return x * y;
};
// 2. 使用大括号指定所要输出的一组变量（方法、类）
var m = 1;
export { m };
// 3. as关键字重命名
// 重命名后，v2可以用不同的名字输出两次
function v1() { ... }
function v2() { ... }
export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
};
- Questions nécessitant une attention:
- L'interface sortie par l'instruction d'exportation et sa valeur correspondante sont liées dynamiquement, c'est-à-dire que la valeur en temps réel à l'intérieur du module peut être obtenue via cette interface.
- La commande d'exportation peut apparaître n'importe où dans le module, tant qu'elle se trouve au niveau supérieur du module, pas à l'intérieur de la portée au niveau du bloc.
3. importation
Après avoir utilisé la exportcommande pour définir l'interface externe du module, d'autres fichiers JS peuvent importcharger le module via la commande. importLa commande accepte une paire d'accolades qui spécifient les noms des variables à importer à partir d'autres modules. Croisillons à l' intérieur du nom de la variable 必须与被导入模块对外接口的名称相同.
- Utilisation de base:
// 1. 引入变量（方法、类）-（逐一加载）
import { firstName, lastName, year } from './profile.js';
// 2. as关键字重命名
import { lastName as surname } from './profile.js';
// 3. 整体加载
import * as circle from './circle';
- Remarque:
- Introduction de variables en lecture seule, l'introduction d'attributs d'objet peut être réécrite
- Derrière est le chemin du fichier (un chemin relatif ou un chemin absolu peut être utilisé, la bouche de singe .js peut être omise; nom du module, emplacement du module configuré)
- La commande d'importation est levée vers le haut et exécutée en premier (exécutée pendant la compilation)
- La commande d'importation est exécutée statiquement et les expressions et variables ne peuvent pas être utilisées
- Répétez la même commande d'importation, une seule fois
4. exportation par défaut
l'exportation par défaut consiste à sortir une variable ou une méthode appelée par défaut, le système permet une dénomination personnalisée
- Utilisation basique
// 默认输出一个函数
export default function () {
console.log('foo');
}
// 引用并指定名字
import customName from './export-default';
L'essence de la commande d'exportation par défaut est d'attribuer la valeur suivante à la variable par défaut, afin que vous puissiez directement écrire une valeur après l'exportation par défaut
5. import ()
为了实现在运行中加载模块，引入了import()函数，实现了动态加载。
- Utilisation basique
import('./myModule.js')
.then(({export1, export2}) => {
// ...
});
- Autre:
- La principale différence entre mport () et import est que le premier est chargé dynamiquement.
- import () renvoie un objet Promise. Une fois import () correctement chargé, le module sera utilisé comme objet et utilisé comme paramètre de la méthode then.
- import () est similaire à la méthode require de Node, la différence est que le premier est un chargement asynchrone, ce dernier est un chargement synchrone
- import () est généralement utilisé pour le chargement à la demande, le chargement conditionnel et les chemins de module dynamiques
Réponse à la question:
// 1.
// 引入模块的某些变量（方法、类），配合4、5使用
import {xxx, xxxx} from 'xxx'
// 2.
// 引入模块的默认变量（方法、类），配合6使用
import xxx from 'xxx'
// 3.
// 实现动态加载，适用于按需加载等
import('../xxx')
// 4.
// 输出模块的变量（方法、类），对应引入方法为1
let xxx = 'x'; export {xxx}
// 5.
// 输出模块的变量（方法、类），对应引入方法为1
export class xxx {}
// 6.
// 输出模块默认的变量（方法、类），对应引入方法为2
export default {}
// 7.
// 待更新
exports.post()
// 8.
// 待更新
module.exports.init = init;
Article de référence: https://es6.ruanyifeng.com/#docs/module
