Detailed explanation of modular application of ES6 knowledge points

This article describes the modular application of ES6 knowledge points sorting. Share it for your reference, as follows:

At present, the browser cannot fully support modularity, and it is necessary to introduce many compilation environments. Let’s simulate the modularity in ES6 in nodejs.

Configuration for modular demonstration in nodejs

• Environment installation: $npm install --save babel-cli babel-preset-node6
• Run: $./node_modules/.bin/ --presets node6 ./your_script.js
• Add .babelrc file, edit as follows

{
 "presets": [
    "node6"
 ]
}

Added this file without adding the --presets parameter at runtime

• Reference link:/questions/33604470/unexpected-token-import-in-nodejs5-and-babel

Three modes for exporting variables

test1 module:

// Writing method 1export var a = "I am a";
// Writing method 2var b = "I am b";
export {b};
// Writing method 3var c = "I am c";
export {c as d} // Rename c as d, and import d is also needed outside.

Index module:

import {a, b, d} from './test1';
(a); // I am a
(b); // I am b
(d); // I am c

Testing of asynchronous export modules

test2 module:

// Asynchronous writingvar m = "I am m";
export {m};
setTimeout(()=>{
 m = "I am mm";
},1000);

index module

import {m} from './test2';
(m); // I am m
setTimeout(()=>{
 (m); // I am mm
},1500);

Multiple modules are exported separately

test3 module

var A = 1111,
 B = 2222,
 C = 3333;
var M = 'M';
export default M;
export {A as A1, B as B1, C as C1};

index module:

import M, {A1, B1, C1} from './multi';
(A1); // 1111
(B1); // 2222
(C1); // 3333
(M); // M

Export of objects

User module:

export class User{
 constructor(name){
   = name;
 }
 get uname() {
  return ;
 }
 set uname(name) {
   = name;
 }
}

index module:

import {User} from './User';
var user = new User('Joh');
(); // Joh
 = 'Lily';
(); // Lily

Export function module

func module

export function Log(str) {
 (str);
}

index module

Log("I am log"); // I am log

Rename the default module

rename module:

export default "rename";

Index module:

import {default as nr} from './rename';
(nr); // rename

How to export default modules and other modules together

combine module:

export var a = 1;
export default 111;

Method 1:

Index module:

import {default as com, a as comA} from './com';
(com); // 111
(comA); // 1

Method 2:

Index module:

import t, { a as comA} from './com';
(t); // 111 Note Here t can be named after any name(comA); // 1

Other precautions

• When defining export, it must be defined at the top level, and it cannot be defined elsewhere, such as inside the function.
• The default cannot be exported with var, such as:export default var name = ‘Joh';This is wrong
• don't wantimport *Export all modules, which is very bad and is not conducive to optimization
• {}The imported module is not a default module, and the default module does not need to be provided.{}
• What is exported through default will not be modified again. If the default exports a numeric variable, it will not be modified even if it is modified elsewhere, leaving the original value unchanged.
• /#docs/moduleHere is a summary of some other things to note

For more information about JavaScript, please view the special topic of this site: "JavaScript object-oriented tutorial》、《Summary of JavaScript switching effects and techniques》、《Summary of JavaScript search algorithm skills》、《Summary of JavaScript Errors and Debugging Skills》、《Summary of JavaScript data structure and algorithm techniques》、《Summary of JavaScript traversal algorithm and skills"and"Summary of JavaScript mathematical operations usage》

I hope this article will be helpful to everyone's JavaScript programming.