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

And historically, when it comes to JavaScript, people don’t think of it in terms of modular systems. There are historical reasons for this, and today we’ll take a look at the story behind the module system in JavaScript. First, review the JavaScript module system along the way. Knowing the history will help you learn modules better to understand how JavaScript modules work today.

But before we learn how to create modules in JavaScript, let’s look at what a module is and why it is needed. So, take a look around you now, and use some familiar things around you to help you understand what a module is. Any complex project that can be seen is probably made up of separate parts.

This watch, for example, now looks like a simple watch, but it’s made up of hundreds of internal parts. Each part has a specific purpose or function, and there are clear boundaries between the parts to determine how each part interacts with the others. All these parts put together make up the whole of the watch. Even for someone who is not a watch engineer, the benefits of this modular approach are overwhelming.

reusability

The first is reusability, noting that many of the same parts are used throughout the watch. With a modularity-centric design philosophy, it is possible to reuse the same parts in different aspects (dimensions) of the watch design. This ability to reuse parts simplifies the manufacturing process while increasing profits.

compositionality

The second is composability, the ability to combine parts to create a fully functional watch by having clear boundaries between individual parts.

collaboration

Next, collaborate. Think about how this watch was made. Some companies don’t make watches, but watch parts that come together to make a watch. These parts can be manufactured in-house or outsourced to other factories.

Decoupled or separate components

Next comes isolation, where understanding the whole system is difficult. A watch is made up of many components refined to operate independently, each of which can be designed, built or repaired independently. This independence allows multiple people to work together without having to rely on each other to do their work at the same time.

organization

Finally, there is organization, which is just that each individual component has a function together when it interacts with other components. So, we’re already seeing the benefits of modularity,

The module definition

Like the design of a watch, software design should be made up of parts, each with a specific purpose and clear boundaries that allow it to interact with other parts. In software, these parts are called modules.

So, at this point, a module might not sound too different from something like a function or React component, so let’s take a look at what a module actually includes. Each module has three distinct parts. Import parts first. When a module needs another module, that module can be imported as a dependency. For example, when you create a React component, you need to import the React module.

If you want to use a library like Lodash, you need to import the Lodash module. Then, after determining what imports or dependencies the module needs, the next part is the actual code itself.

Finally, export. Export is the interface of the module. Whatever is exported from a module is used by the person importing it. Ok, let’s look at an example of a module in real life. This is from the React Router library, which is their memory Router module. So, notice here, there are three things to do. First, the module defines its dependencies, which import a few different things. We have React, createMemoryHistory, and then router.

reuse

Modules maximize reuse because a module can be imported and used with any required module. In addition, if a module is beneficial to another program, a package can be packaged. A package can contain one or more modules, can be uploaded to a service like NPM, and can be downloaded by anyone who needs it.

That’s how React, Lodash, jQuery, all of these packages work, and now when you want to use a particular library, you just download it from the NPM registry and you can use it in your code. You can use it in your code.

Composability.

Because modules explicitly define their inputs and outputs, they can be easily combined, somewhat like Lego. What’s more, for well-designed software, it should be easy to remove parts of the code, which requires low coupling between modules.

collaboration

It’s been talked about. NPM has the largest collection of free reusable modules in the world, with over 700,000. You don’t need to develop a package that requires a specific function; NPM already has it.

index.js

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>
<body>
    <script type="module" src="main.js"></script>
</body>
</html>
Copy the code
  • Need to be added in script tagtype="module"Property so that the JavaScript file supports the ESM module
  • If not addedtype="module"The following exception is thrown
main.js:1 Uncaught SyntaxError: Cannot use import statement outside a module
Copy the code

tut.js

class Tut{
    constructor(title,lesson){
        this.title = title;
        this.lesson = lesson
    }
}


function printTitle(tut){
    console.log(`title of tut: ${tut.title}`)}function printLesson(tut){
    console.log(`title of tut: ${tut.lesson}`)}export default Tut;
Copy the code

There are two export methods, one is export default and the other is standard export

The default is derived

export default Tut;
Copy the code

Or another way to define it is the following

export default class Tut{
    constructor(title,lesson){
        this.title = title;
        this.lesson = lesson
    }
}
Copy the code

Standard export

export {
    printTitle,
    printLesson
}

Copy the code

Alternatively, add export directly before the function expression

export function printTitle(tut){
    console.log(`title of tut: ${tut.title}`)}export function printLesson(tut){
    console.log(`title of tut: ${tut.lesson}`)}Copy the code

main.js

import Tut from './tut.js'
Copy the code
import Tut from './tut.js'
import { printTitle,printLesson } from './tut.js'

const tut = new Tut("machine learning".12);

printLesson(tut);
printTitle(tut);
Copy the code

We can import the default export Tut class directly, {printTitle,printLesson} for the standard export form

import Tutorial from './tut.js'
import { printTitle ,printLesson } from './tut.js'

const tut = new Tutorial("machine learning".12);

printLesson(tut);
printTitle(tut);
Copy the code

For the default export we can import it with another name such as Tutorial, while for the standard export we need to alias the exported content through AS to call the export method

import { printTitle as pTitle,printLesson } from './tut.js'
Copy the code

Next time we’ll share JavaScript modules.