前言

本文将介绍ES6的模块化实现。

模块化实现

在实际编写js脚本时，可能会遇到多个js脚本中变量或函数重复命名的情况，如果全部为全局变量，则在使用的时候会产生很多麻烦。因此出现了模块化的概念，即可以把每一个js脚本当作一个独立的模块，不同模块间的内容互不干扰，这样在实际使用起来的时候会避免很多不必要的麻烦。

模块化有两个核心部分：即导入(import)和导出(export)。（下面会结合两者一起说明）

代码文件

首先有一个index.html文件，在此分别引入以下两个js文件：

  • module.js
  • use.js
1
2
3
<!-- index.html -->
<script src="module.js" type="module"></script>
<script src="use.js" type="module"></script>

说明：

在ES6中，使不同js脚本模块化的方法就是就是在引入时，在<script>标签中添加module属性。一旦添加，js内部的数据默认不再为全局可引用，需要以导入和导出的方式引用。

module.js中定义如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//定义变量
var message = '我是Module中的message变量'

//定义函数
function show(value) {
  console.log('我是Module中的show函数',value)
}

//定义类
class Person {
  run() {
    console.log('奔跑中....')
  }
}

导出、导入方式一

直接使用export {变量名, 方法名, 类名}格式导出：

1
2
//导出方式一
export {message, show, Person}

use.js使用：

使用import { 变量名, 方法名, 类名 } from "xxx.js";的格式导入：

1
2
3
4
5
6
7
8
9
10
//导入
import { message, show, Person } from "./module1.js";

//使用
console.log(message)

show(123)

var person = new Person
person.run()

导出、导入方式二

在定义变量之前添加export关键字直接导出：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//导出方式二
//定义并导出变量
export var message = '我是Module中的message变量'

//定义并导出函数
export function show(value) {
  console.log('我是Module中的show函数',value)
}

//定义并导出类
export class Person {
  run() {
    console.log('奔跑中....')
  }
}

use.js使用：

使用import * as xxx from "xxx.js";的格式统一导入：

1
2
3
4
5
6
7
8
9
10
//导入
import * as use from "./module1.js";

//使用
console.log(use.message)

use.show(123)

var person = new use.Person
person.run()

导出、导入方式三

使用default关键字定义默认变量（这里以方法为例）：

1
2
3
4
//导出方式三
export default function (value) {
  console.log('我是Module中的默认函数',value);
}

use.js使用：

使用import 命名 from "xxx.js";的格式导入（注意在导入的时候需要默认函数命名）：

1
2
3
4
5
//导入并命名
import def from "./module1.js";

//使用
def(456)

注意：

这种默认变量的定义在一个模块中只能唯一定义一个，并且在导入使用的时候需要为其命名。

后记

先了解模块化的概念，为了后面更好地学习Webpack的内容。