Maison > interface Web > js tutoriel > Explication détaillée de l'utilisation des exports et module.exports de node.js et ES6

Explication détaillée de l'utilisation des exports et module.exports de node.js et ES6

php中世界最好的语言
Libérer: 2018-04-16 15:36:40
original
4196 Les gens l'ont consulté

Cette fois, je vais vous apporter une explication détaillée de l'utilisation des node.js et ES6 exports et module.exports Quelles sont les précautions lors de l'utilisation de node.js et ES6. exports et module.exports? , ce qui suit est un cas pratique, jetons un coup d'œil.

Ah Xi, ma tête est si grosse....

Maintenant que nous avons terminé, asseyons-nous et déterminons leur champ d’utilisation.

  • require : Importation prise en charge par node et es6

  • export/import : Seule exportation prise en charge par es6

  • module.exports/exports : Seules les exportations prises en charge par le nœud

A partir de ce moment, j’ai senti qu’il était temps de clarifier la relation entre eux, sinon je mourrais de confusion. Pas grand chose à dire, commençons ! !

module de nœuds

Le système de modules dans Node suit la spécification CommonJS.

Ensuite, la question revient : qu’est-ce que la spécification CommonJS ?

Parce que js était relativement déroutant dans le passé, chacun écrivait son propre code, et il n'y avait pas de concept de module, et cette spécification est en fait une définition d'un module.

Les modules définis par CommonJS sont divisés en : identification du module (module), définition du module (exports), référence du module (require)

Expliquez d'abord les exportations et module.exports

Lorsqu'un nœud exécute un fichier, un objet exports et module ,

sera généré dans le fichier. Et le module a un attribut exports. La relation entre eux est la suivante, ils pointent tous vers une zone mémoire {}.

exports = module.exports = {};
Copier après la connexion

Jetons donc un œil au code.

//utils.js
let a = 100;
console.log(module.exports); //能打印出结果为:{}
console.log(exports); //能打印出结果为:{}
exports.a = 200; //这里辛苦劳作帮 module.exports 的内容给改成 {a : 200}
exports = '指向其他内存区'; //这里把exports的指向指走
//test.js
var a = require('/utils');
console.log(a) // 打印为 {a : 200}
Copier après la connexion

Comme le montre ce qui précède, en fait, le contenu exporté par require est le contenu du bloc mémoire pointé par module.exports, pas exports.

En bref, la différence entre eux est que exports n'est qu'une référence à module.exports, qui est utilisée pour aider ce dernier à ajouter du contenu.

Pour le dire en langage clair, les exportations aident uniquement module.exports à exploiter les données dans la mémoire. Après tout le dur travail d'exploitation des données, je suis épuisé en fin de compte, le contenu réellement requis est toujours module.exports. . C'est un travail vraiment dur.

En fait, si vous utilisez le concept de bloc mémoire pour le comprendre, ce sera très clair.

Ensuite, afin d'éviter toute confusion, essayez d'utiliser module.exports pour exporter, puis utilisez require pour importer.

Export et import de modules en ES

Pour être honnête, les modules en es sont très clairs. Cependant, certains détails doivent être clarifiés.

Par exemple, export et export default, et lors de l'importation, import a from .., import {a} from .. sont un peu déroutants, alors commençons à les trier.

exporter et exporter par défaut

Parlons d’abord de ces deux exportations. Parlons ensuite de leurs différences

  • L'exportation et l'exportation par défaut peuvent être utilisées pour exporter des constantes, des fonctions, des fichiers, des modules, etc.

  • Dans un fichier ou un module, il peut y avoir plusieurs exportations et importations, mais il n'y a qu'une seule exportation par défaut.

  • Exporter via l'exportation, ajouter { } lors de l'importation, l'exportation par défaut n'est pas requise

  • l'exportation peut directement exporter des variablesExpression , l'exportation par défaut ne fonctionne pas.

Jetons un coup d'œil au code pour le vérifier

testEs6Export.js

'use strict'
//导出变量
export const a = '100'; 
 //导出方法
export const dogSay = function(){ 
 console.log('wang wang');
}
 //导出方法第二种
function catSay(){
 console.log('miao miao'); 
}
export { catSay };
//export default导出
const m = 100;
export default m; 
//export defult const m = 100;// 这里不能写这种格式。
Copier après la connexion

index.js

//index.js
'use strict'
var express = require('express');
var router = express.Router();
import { dogSay, catSay } from './testEs6Export'; //导出了 export 方法 
import m from './testEs6Export'; //导出了 export default 
import * as testModule from './testEs6Export'; //as 集合成对象导出
/* GET home page. */
router.get('/', function(req, res, next) {
 dogSay();
 catSay();
 console.log(m);
 testModule.dogSay();
 console.log(testModule.m); // undefined , 因为 as 导出是 把 零散的 export 聚集在一起作为一个对象,而export default 是导出为 default属性。
 console.log(testModule.default); // 100
 res.send('恭喜你,成功验证');
});
module.exports = router;
Copier après la connexion

Comme le montre ce qui précède, le système de modules de l’ES6 semble très flexible.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Méthode de mise en œuvre de la traversée en pré-commande, dans l'ordre et après-commande de l'arbre binaire JS

Comment obtenir l'événement tactile Longueur de la distance de glissement

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal