纯净、安全、绿色的下载网站

首页

当前位置:首页IT学院IT技术

JavaScript模块化 怎样理解JavaScript模块化

lovin   2021-05-15 我要评论
想了解怎样理解JavaScript模块化的相关内容吗,lovin在本文为您仔细讲解JavaScript模块化的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:js,模块化,下面大家一起来学习吧。

1. 浏览器支持

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

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

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

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

2. 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}

3. import 导入模块

默认导入

main.js

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

默认导入的重命名

main.js

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

批量导入

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

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

4. 创建模块对象

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

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

5. 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

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

6. 动态加载模块

动态加载模块用于在导入模块时不必预先加载所有模块,可以在需要时使用 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()
    })
}

相关文章

猜您喜欢

  • Docker 部署net5程序 Docker 部署net5程序实现跨平台功能

    想了解Docker 部署net5程序实现跨平台功能的相关内容吗,陈大宝在本文为您仔细讲解Docker 部署net5程序的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Docker,部署net5程序,Docker,部署net5程序跨平台,下面大家一起来学习吧。..
  • MobaXterm安装和使用 MobaXterm的安装和使用及问题小结

    想了解MobaXterm的安装和使用及问题小结的相关内容吗,菜鸟-传奇在本文为您仔细讲解MobaXterm安装和使用的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:MobaXterm安装,MobaXterm使用,下面大家一起来学习吧。..

网友评论

Copyright 2022 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们