首页 > 网络编程 > JavaScript > javascript技巧 > JS 模块化 import export

JS 模块化语法 import、export详解

2025-05-22 10:25:31 作者：张小虎在学习

这篇文章主要介绍了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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！