JS 模块化语法 import、export

目录

背景

ES6 模块化 

1. 导出 export

2. 导入 import

3. script 标签内使用

---

背景

1. 为什么需要模块化：

随着项目越来越庞大, 通常喜欢将膨胀的 JS 代码按功能划分, 把其抽离成一个个单独的 JS 文件, 并且只暴露想对外提供的方法和属性,

其他都是私有, 这样的 JS 文件称为一个模块, 模块内只做尽量少的事, 来满足单一原则, 从而提高代码的复用性, 可读性和可维护性。

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

模块化项目中, 经常需要引入多个 JS 模块来拼装出最后的效果, 但是 ES6 以前只有全局作用域, 所以多个模块内变量名容易互相冲突,

而且多个模块间想确定依赖关系也很困难, 容易导致引入顺序错误

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

(1) CommonJS规范, 具体实现是 NodeJs, 常在服务端使用

(2) AMD规范, 具体实现是 require.js, 常在浏览器端使用

(3) 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>