Preface:

What is modularity? Modularity is a way of dealing with the decomposition of complex systems into better manageable modules. Each module completes a specific sub-function, and all the modules are assembled in a certain way to become a whole to complete the function required by the whole system.

Benefits of modularity

  • Avoiding naming conflicts (reducing namespace pollution)
  • Flexible architecture, focus separation, convenient module combination, decomposition
  • Many people cooperate without interfering with each other
  • High reusability and maintainability

ES6 modules: ES6 modules are designed to be as static as possible so that dependencies can be determined at compile time. Use import and export to import and export.

The import and export

Module functions are mainly composed of two commands:

  • Export: The export command is used to specify the external interface of a module
  • Import: The import command is used to input functions provided by other modules

A module is an independent file. All variables inside the file are not available externally. If you want outsiders to be able to read a variable inside a module, you must use the export keyword to output that variable. Here is a JS file that uses the export command to output variables.

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

So there’s another way to write export.

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

The export command can output functions or classes as well as variables. Normally, the variable output by export is the original name, but can be renamed using the AS keyword.

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

After the module’s external interface is defined using the export command, other JS files can load the module (file) using the import command.

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

The import command in the above code is used to load the profile.js file and enter variables from it. The import command takes an object (in curly braces) specifying the name of a variable to import from another module. The variable name inside the braces must be the same as the name of the external interface of the imported module (profile.js).

If you want to rename the input variable, the import command uses the as keyword to rename the input variable.

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

The import command is promoted to the top of the module and executed first.

foo();
import { foo } from 'my_module';
Copy the code

ES6 Modules Modular implementation

The import

var name = 'Ming'  
var age = 18
var flag = true

function sum(num1, num2) {
  return num1 + num2
}

if (flag) {
  console.log(sum(20.30));
}

// 1. Export method 1:
export {
  flag, sum
}

// 2.
export var num1 = 1000;
export var height = 1.88


// 3. Export functions/classes
export function mul(num1, num2) {
  return num1 * num2
}

export class Person {
  run() {
    console.log('On the run'); }}// The default export can only be one
export default function (argument) {
  console.log(argument);
}
Copy the code

Export:

// 1. Import variables defined in {}
import {flag, sum} from "./aaa.js";

if (flag) {
  console.log('Xiao Ming is a genius');
  console.log(sum(20.30));
}

// 2. Import variables defined by export directly
import {num1, height} from "./aaa.js";

console.log(num1);
console.log(height);

// 3. Import function/class for export
import {mul, Person} from "./aaa.js";

console.log(mul(30.50));

const p = new Person();
p.run()

// 4. Import export Default
import addr from "./aaa.js";

addr('Hello.');

// 5. Import all files
// import {flag, num, num1, height, Person, mul, sum} from "./aaa.js";

import * as aaa from './aaa.js'

console.log(aaa.flag);
console.log(aaa.height);
Copy the code