I. Preface:

I write this purely because I am not satisfied with what others have written. Anyway, I read and write for fun

Two, two in the standard

The emergence of JavaScript modularization can avoid the problem of global variable contamination, data corruption, and support module to module interdependence.

CommonJS specification:

Node.js applications are made up of modules, and each file is a module with its own scope. Variables, functions, and classes defined in one file are private and invisible to other files.

Two variables can be used within each module, require and module.

  • requireUsed to load a module
  • moduleRepresents the current module and is an object that holds information about the current module.exports 是 moduleProperty that holds the interface or variable to be exported by the current module
module.exports
// tempData.js
const obj = {
  name: 'Libai',
  age: '20'
};
module.exports = {
  obj
};
Copy the code
reference
let tempData = require('./tempData.js');
console.log(tempData);
// {
//   obj: {
//     name: 'Libai',
//     age: '20'
//   }
// }
Copy the code

Note:

Node.js provides an exports private variable for each module according to CommonJS specification, pointing to module.exports:

var exports = module.exports
Copy the code

Therefore, the sample code exposed above can be written as

// tempData.js
const obj = {
  name: 'Libai',
  age: 20
};
exports.obj = obj;
Copy the code

2. CommonJS modules are objects and must look for object properties when introduced.

let { stat, exists, readfile } = require('fs'); // equivalent to let _fs = require('fs'); let stat = _fs.stat; let exists = _fs.exists; let readfile = _fs.readfile;Copy the code

The above code essentially loads the FS module as a whole (that is, all the methods that load FS), generates an object (_fs), and then reads three methods from that object.

ES6 specification

ES6 modules are not objects, but code that is explicitly specified for output through the export command and then imported through the import command.

How to understand this sentence? The back to say again

The export command is used to specify external interfaces or variables of a module, and the import command is used to import functions provided by other modules. ES6 module exposes two more commands:

Export and export default, let’s talk about their differences

export
Export const name = "Libai"; export const age = "20"; export function sayHi() { console.log("Hello world"); } // const name = "Libai"; const age = "20"; function sayHi() { console.log("Hello world"); } export { name, age, sayHi }; // const name = "Libai"; const age = "20"; function sayHi() { console.log("Hello world"); } export { name as a, age as b, sayHi as c };Copy the code

Note that the following disclosure is incorrect

const name = "Libai";
const age = "20";
function sayHi() {
  console.log("Hello world");
}
export name;
export age;
export sayHi;
Copy the code

As explained in Nguyen Yifeng’s Introduction to ECMAScript 6:

The export command specifies the external interface, which must establish a one-to-one correspondence with variables or functions inside the module. However, the above writing method only directly exposes variables or functions, without establishing a correspondence.

So why is it possible to establish a correspondence?

const name = "Libai";
const age = "20";
function sayHi() {
  console.log("Hello world");
}
export {
  name,
  age,
  sayHi
};
Copy the code

At the beginning, I thought, based on the principle of establishing correspondence, it actually required this:

const name = "Libai";
const age = "20";
function sayHi() {
  console.log("Hello world");
}
export {
  name: name,
  age: age,
  sayHi: sayHi
};
Copy the code

Only with es6 syntax support can be abbreviated to:

const name = "Libai";
const age = "20";
function sayHi() {
  console.log("Hello world");
}
export {
  name,
  age,
  sayHi
};
Copy the code

But that’s not the case.

Export {} does not expose an object. {} is just a syntax sugar, just a format. Any variable or function you want to expose is placed inside {}.

That is, if you want to use export to expose things inside a module, you need to follow its own syntax requirements. The above conclusions are reserved for now.

reference
Import {name, age, sayHi} from './ tempdata.js '; // import * as tempData from './ tempdata.js '; console.log(tempData); // { // age: "20" // name: "Libai" // sayHi: ƒ sayHi() import {name as n, age as a, sayHi} from './ tempdata.js '; console.log(n); console.log(a);Copy the code

Note: If you already use an alias when exporting, you can only use an alias when importing with deconstruction

// export const name = "Libai"; const age = "20"; function sayHi() { console.log("Hello world"); }; export { name as a, age as b, sayHi }; Import {a, b, sayHi} from './ tempdata.js ';Copy the code
export default

The above example shows a problem:

If I want to import something from a module, I have to know what the module is exposing, right? Such a design requires the user to read the module’s external exposure beforehand.

To solve this problem, the ES6 specification provides export Default to specify module default exposure.

A module can only have one default exposure, so the export default command can only be used once. Export default can be followed by any variable or function. It is important that you assign the variable or function to default

Export default 42;Copy the code
// const name = "Libai"; export default name;Copy the code
Function sayHi() {console.log("Hello world"); }; export default sayHi; Export default function sayHi() {console.log("Hello world"); }; Export default function () {console.log("Hello world"); };Copy the code
// const name = "Libai"; const age = "20"; function sayHi() { console.log("Hello world"); }; export default { name, age, sayHi };Copy the code
reference

Destructuring is not allowed when importing because export defualt exposes the whole

Wildcard characters are usually not used, because export default can be followed by any variable or function. If you assign the variable or function to default, you will find that

// export default
const name = "Libai";
const age = "20";
function sayHi() {
  console.log("Hello world");
};
export default {
 name,
 age,
 sayHi
};
Copy the code
// import import * as data from './tempData.js'; console.log(data); / / {/ / default: {/ / age: "20" / / name: "Libai" / / sayHi. ƒ sayHi () / /} / /}Copy the code

The correct way to write this is

import tempData from './tempData.js'; console.log(tempData); / / {/ / age: "20" / / name: "Libai" / / sayHi. ƒ sayHi () / /}Copy the code