JS 模块化语法 import、export详解

更新时间：2025年05月22日 10:25:30 作者：张小虎在学习

这篇文章主要介绍了JS 模块化语法 import、export详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

背景

1. 为什么需要模块化：

随着项目越来越庞大, 通常喜欢将膨胀的 JS 代码按功能划分, 把其抽离成一个个单独的 JS 文件, 并且只暴露想对外提供的方法和属性,其他都是私有, 这样的 JS 文件称为一个模块, 模块内只做尽量少的事, 来满足单一原则, 从而提高代码的复用性, 可读性和可维护性。

2. 早期模块化带来的问题：

模块化项目中, 经常需要引入多个 JS 模块来拼装出最后的效果, 但是 ES6 以前只有全局作用域, 所以多个模块内变量名容易互相冲突,而且多个模块间想确定依赖关系也很困难, 容易导致引入顺序错误

3. 在 ES6 模块化到来之前, 为了解决早期模块化带来的问题, 也有许多开源的模块化规范, 如：

CommonJS规范, 具体实现是 NodeJs, 常在服务端使用
AMD规范, 具体实现是 require.js, 常在浏览器端使用
CMD规范, 具体实现是 sea.js, 常在浏览器端使用

虽然有开源的模块化规范来解决模块化带来的问题, 但是由于规范种类较多, 所以学习代价也更大。

ES6 模块化

官方的标准模块化规范, 通过 import 和 export 导入导出模块内的成员, 未被导出的成员, 无法导入使用。

1. JS 文件内导出 export

(1) 分别导出：

/* module.js */
 // 导出 foo 和 bar
 export let foo = 'foo'
 export let bar = () => {
 console.log('bar')
 }

(2) 统一导出：

/* module.js */
let foo = 'foo'
let bar = () => {
    console.log('bar')
}
// 导出 foo 和 bar
export { foo, bar }

(3) 默认导出（一个模块化文件中只能有一个默认导出）：

/* module.js */
// 导出默认对象
export default {
    foo: 'foo',
    bar() {
        console.log('bar')
    }
}

2. JS 文件内导入 import

(1) 普通导入：

import * as importData from "./module.js"
console.log(importData.foo) // 结果：foo
importData.bar() // 结果：bar

(2) 对象解构语法导入

解构名称形式：

import { foo, bar } from "./module.js"
console.log(foo) // 结果：foo
bar() // 结果：bar

别名形式：

import { foo as importFoo, bar as importBar } from "./module.js"
console.log(importFoo) // 结果：foo
importBar() // 结果：bar

(3) 导入默认导出的模块

因为默认导出模块, 在导出时是没有指定名称的, 所以这里要给个别名：

import { default as alias } from "./module.js";
console.log(alias.foo) // 结果：foo
alias.bar() // 结果：bar

别名简写：

import alias from "./module.js";
console.log(alias.foo) // 结果：foo
alias.bar() // 结果：bar

3. script 标签内使用

(1) 在 <script> 标签内, 使用 import 和 export 关键字时, 标签要加上 type = “module” 属性

/* module.js */
// 导出默认对象
export default {
    foo: 'foo',
    bar() {
        console.log('bar')
    }
}

<!-- index.html -->
<script type="module">
    import alias from "./module.js";
    console.log(alias.foo) // 结果：foo
    alias.bar() // 结果：bar
</script>

(2) 用 <script> 标签, 引入 JS 文件时, 如果 JS 文件内使用了 import 和 export 关键字, 那么标签要加上 type = “module” 属性

/* module.js */
// 导出默认对象
export default {
    foo: 'foo',
    bar() {
        console.log('bar')
    }
}

/* index.js */
// 导入默认对象
import alias from './module.js'
console.log(alias.foo) // 结果：foo
alias.bar() // 结果：bar

<!-- index.html -->
<script type="module" src="./index.js"></script>

到此这篇关于JS 模块化语法 import、export详解的文章就介绍到这了,更多相关JS 模块化 import export内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript中的this指向问题详解
这篇文章主要给大家介绍了关于JavaScript中this指向问题的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
微信小程序中获取设备信息的方法
这篇文章主要给大家介绍了关于微信小程序中获取设备信息的相关资料,微信小程序是一种在微信平台上运行的应用程序,它具有轻量化、便捷性和高兼容性的特点,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-07-07
微信小程序实现轮播图效果
这篇文章主要为大家详细介绍了微信小程序实现轮播图效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-09-09
如何用JS实现简单的数据监听
这篇文章主要介绍了如何用JS实现简单的数据监听，对数据监听感兴趣的同学，可以参考一下
2021-05-05
原生js实现随机点名功能
这篇文章主要为大家详细介绍了原生js实现随机点名功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-11-11
D3.js入门之比例尺的使用与绘制
中国这么大，要在一张小小地图上画上中国，那么就需要按一定的比例缩小。D3 可视化画图，也是如此。本文就来和大家聊聊D3中的比例尺的绘制与使用，感兴趣的可以学习一下
2022-11-11
基于element-ui 动态换肤的代码详解
这篇文章主要介绍了element-ui 动态换肤,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-03-03
JS实现电影票选座的项目示例
电影院选座基本上每个人都用到过，本文主要介绍了JS实现电影票选座的项目示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-04-04
JS实现轮播图小案例
这篇文章主要为大家详细介绍了JS实现轮播图小案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
15个顶级开源JavaScript框架和库
今天小编就为大家分享一篇关于15个顶级开源JavaScript框架和库的文章，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2018-10-10