Vue学习-ES6的模块化实现

前言

本文将介绍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的内容。