如何理解JavaScript模块化？

喜欢ヅ旅行 2022-08-31 09:39 168阅读 0赞

![21b848e33c630ed334a7cdafb4fdf949.png][]

## **1、模块化是什么**    ##

模块化简单来说就是将一个完整的长篇代码文件根据功能进行划分成几个文件，这些文件各自负责一个独立的功能，各个文件组合起来实现一个完整的大功能，这就是模块化，每个负责独立功能的文件就是模块。

由于一开始JavaScript是在web页面需要的地方提供一定交互，所以一般不需要多大的脚本。但随着JavaScript脚本的复杂化，最新的浏览器已经开始原生支持JavaSript模块功能了。

## **2、浏览器支持** ##

使用JavaScript 模块依赖于 import 和 export，import 和 export 的浏览器支持程度是最新的浏览器版本都是支持的，但 IE 和旧版本的浏览器不支持，因此若想兼容 IE 和旧版本的浏览器基本就不能使用了。

export 和 import 是成对出现，配合工作的

js模块化是各种js框架学习的前提基础

import 和 export 语句用于将一个模块里实现某些功能的变量或函数导入/导出，也可导入/导出类

## **3、export 导出模块** ##

### 默认导出 ###

一个模块只能有一个默认导出，默认导出的变量只能有一个，且不能有大括号\{\}

语法为export default 变量名

model.js

function Test1(){    console.log("这是默认导出")}function Test2(){    console.log('这是命名导出')}export default Test1

### 批量导出 ###

语法为export \{变量名,变量名……\}

function Test1(){    console.log("这是默认导出")}function Test2(){    console.log('这是命名导出')}export {Test1, Test2}

## **4、import 导入模块** ##

### 默认导入 ###

main.js

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

### 默认导入的重命名 ###

main.js

import x from "./model.js"//x就是默认导出的Test1x()

### 批量导入 ###

main.js

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

### 批量导入的重命名 ###

as关键字跟一个新名字实现重命名

main.js

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

也可在导出时用as关键字重命名

model.js

function Test1(){    console.log("这是默认导出")}function Test2(){    console.log('这是命名导出')}export {Test1 as x1, Test2 as x2}

### 应用模块 ###

html

## **5、创建模块对象** ##

使用对象，在as关键字重命名的基础上进一步简单化

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

## **6、export import 中转站** ##

有时候可以将多个子模块组合到一个父模块中，再由父模块决定导出哪个，这个父模块文件就像是个组合各个模块的中转站

语法为export \{变量名\} from 模块路径

当前目录结构结构

src    index.html    main.js    redirection.js    models        model.js        model2.js

model.js

function Test1(){    console.log("这是子模块1")}export {Test1}

model2.js

function Test2(){    console.log('这是子模块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

## **7、 动态加载模块** ##

动态加载模块用于在导入模块时不必预先加载所有模块，可以在需要时使用 import() 作为函数调用，将其参数传递给模块的路径，它返回一个 promise，使用 Promise 对象对模块加载结果操作。

语法为import(动态加载的模块路径)

dynamic.js

function TestDy(){    console.log("这是动态模块")}export default TestDy

main.js

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

## 最后 ##

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持

[21b848e33c630ed334a7cdafb4fdf949.png]: /images/20220829/cc6b230702cf4a348d9ecd14dc5c4223.png

如何理解JavaScript模块化？

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关【JavaScript模块化】1-模块化进化史

相关什么是模块化编程？如何在JavaScript中实现模块化？

相关如何理解JavaScript模块化？

相关 javascript 模块化

相关深入理解JavaScript模块化编程：RequireJS

相关 JavaScript模块化

相关 javascript模块化

相关 JavaScript 模块化

相关 Javascript模块化

相关 JavaScript模块化怎么理解？