How to understand JavaScript modularity

1. Browser support

Using JavaScript modules depends on import and export. The browser support for import and export is supported by the latest browser versions, but not by IE and older versions of browsers. Therefore, if you want to be compatible with IE and older versions of browsers, you basically cannot use it.

Export and import come in pairs and work together.

JS modularization is the prerequisite for learning various JS frameworks

The import and export statements are used to import/export variables or functions that implement certain functions in a module. They can also import/export classes.

2. export export module

Default Export

A module can only have one default export, and there can only be one default export variable, and there cannot be curly braces {}

The syntax is export default variable name

model.js

function Test1(){
    console.log("This is the default export")
}
function Test2(){
    console.log('This is a named export')
}
export default Test1

Batch Export

The syntax is export {variable name, variable name...}

function Test1(){
    console.log("This is the default export")
}
function Test2(){
    console.log('This is a named export')
}
export {Test1, Test2}

3. Import modules

Default Import

main.js

import Test1 from "./model.js"
Test1()

Renaming of default imports

main.js

import x from "./model.js" //x is the default exported Test1
x()

Batch Import

main.js

import {Test1, Test2} from "./model.js"
Test1();
Test2();

Batch import rename

The as keyword is followed by a new name to implement renaming

main.js

import {Test1 as x1, Test2 as x2} from "./model.js"
x1();
x2();

You can also rename it using the as keyword when exporting

model.js

function Test1(){
    console.log("This is the default export")
}
function Test2(){
    console.log('This is a named export')
}
export {Test1 as x1, Test2 as x2}

Application Module

html

<script src="main.js"></script>

4. Create module object

Using objects, further simplifying the renaming based on the as keyword

import * as Model from "./model.js"
Model.x1();
Model.x2();

5. Export and import transfer station

Sometimes you can combine multiple submodules into a parent module, and then the parent module decides which one to export. This parent module file is like a transit station for combining various modules.

The syntax is export {variable name} from module path

Current directory structure

src

index.html

main.js

redirection.js

models

model.js

model2.js

model.js

function Test1(){
    console.log("This is submodule 1")
}
export {Test1}

model2.js

function Test2(){
    console.log('This is submodule 2')
}
export {Test2}

redirection.js

export {Test1} from "./models/model.js"
export {Test2} from "./models/model2.js"

main.js

import * as Model from "./redirection.js"
Model.Test1()
Model.Test2()

html

<script src="./main.js"></script>

6. Dynamically loading modules

Dynamically loaded modules are used to import modules without having to preload all modules. You can use import() as a function call when needed, pass its parameters to the path of the module, and it returns a promise. Use the Promise object to operate on the module loading result.

The syntax is import (dynamically loaded module path)

dynamic.js

function TestDy(){
    console.log("This is a dynamic module")
}
export default TestDy

main.js

document.querySelector('.load').onclick = function(){
    import('./dynamic.js').then((Model)=>{
        Model.default()
    })
}

The above is the details of how to understand JavaScript modularization. For more information about JavaScript modularization, please pay attention to other related articles on 123WORDPRESS.COM!