Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

preface

In JavaScript, there was no concept of modularity. You couldn’t break up a large program into small interdependent files and put them together in a simple way. If you want to modularize operations, you need to introduce third-party libraries. With the development of technology, the front and back end separation, front-end business becomes more and more complicated, so there is the birth of ES6 modular.

Why modularity, or what are the benefits of modularity?

We all abide by the same modular specification to write code, reduce the cost of communication, greatly facilitate the mutual call between each module, self-interest.

It can disassemble a complex program for easy maintenance and expansion.

Front-end modular specification

Before ES6 modularity was born, the JavaScript community tried and proposed AMD, CMD, commonJS and other modularity specifications.

However, these modular specifications, there are certain differences and limitations, and can not be universal.

Such as:

  • AMD and CMD for browser-side JavaScript modularity

  • CommonJS is for server-side JavaScript modularity

    Node.js follows this specification

    Import other modules using require()

    Exports use module.exports objects

Too many modular specifications add to the learning curve and cost of development. So, the ES6 modularity specification was born!

What is the ES6 modularity specification

ES6 modular specification is a common modular development specification for browser and server. It has greatly reduced the cost of modular learning for front-end developers, and developers do not need to learn additional modular specifications such as AMD, CMD or commonJS.

As defined in the ES6 modularity specification:

  • Each JS file is an independent module
  • Use to import other module membersimportThe keyword
  • For use by external shared module membersexportThe keyword

Experience ES6 modularity in Node.js

Node. js supports only commonJS modularity by default. If you want to experience it in Node, perform the following two steps:

  • Make sure you have Node.js v14.15.1 or later installed

    To view the current version, run the node -v command in a CMD window

  • Add the “type”:”module” node to the package.json root node

    Do not know how to add friends look here:

    The first step is to execute NPM init -y in an empty folder and see that the package.json file has been automatically generated

    Open it in VS-Code and add the “type”:”module” node

    Note: The default value of type is commonJS, so the modular specification for Node is commonJS

The basic syntax for ES6 modularity

The modularity of ES6 includes the following three usages:

  • Default export vs. default import
  • Export on demand versus import on demand
  • Import and execute the code in the module directly

The default is derived

Syntax: export default Exported members by default

let n1 = 10 // Define the module private member N1
let n2 = 20 // define module private member n2 because it is not shared, so it is not accessible
function show(){  // Define the module private method show
	
}
export default { // Use the default export syntax to share n1 and show members
	n1,
    show
}
Copy the code

Matters needing attention

  • Only one use is allowed per moduleexport defaultOtherwise, an error will be reported!

The default import

Syntax: import Receive name FORM module identifier

// Import export default shared members from the m1.js module
// and use M1 to receive
import m1 form './m1.js'

console.log(m1)
{n1:10, show: [Function:show]}
Copy the code

Matters needing attention

  • When importing by default, the receiver name can be written as long as it is a valid member name.
// m1 is invalid
import m1 form './m1.js'
// The member name cannot start with a number, so an error will be reported
import 123 form './m1.js'
Copy the code

On-demand export

Syntax: export Exported members on demand

// Export the variable s outward as needed
export let s = 'Ned'
// Export method show outward on demand
export function show(){}
Copy the code

According to the need to import

Syntax: import {s} from module identifier

import { s, show } form './m1.js'
console.log(s) // Ned
console.log(show) // [Function: show]
Copy the code

Matters needing attention

  • On-demand exports can be used multiple times per module
  • The name of the member imported on demand must be the same as the name exported on demand
  • It can be used when importing on demandasThe keyword is renamed
  • On-demand imports can be used with default imports

Rename:

import { s as str } form './m1.js'
Copy the code

Using the as keyword, rename s to STR, so we’ll just use STR instead of s.

On-demand imports are used with default imports:

import info,{ s as str } form './m1.js'
Copy the code

Info is the default import, followed by curly braces on demand.

Import and execute the code in the module directly

If you just want to execute the code in a module and don’t need to get its internally shared members, you can do this:

// m1.js:
for(let i = 0; i < 10; i++){
	console.log(i)
}
-------------------------
// Directly import and execute the code in the module
import './m1.js'
Copy the code

That’s right, just import it.

The last

This article briefly introduces the concepts and syntax of modularity, and I’ll write another article in a few days to show you how modularity is used in practice.

In liver in liver ing😭

Interested friends can leave a thumbs-up, we progress together!