前言
本文将介绍ES6的模块化实现。
模块化实现
在实际编写js脚本时，可能会遇到多个js脚本中变量或函数重复命名的情况，如果全部为全局变量，则在使用的时候会产生很多麻烦。因此出现了模块化的概念，即可以把每一个js脚本当作一个独立的模块，不同模块间的内容互不干扰，这样在实际使用起来的时候会避免很多不必要的麻烦。
模块化有两个核心部分：即导入(import)和导出(export)。（下面会结合两者一起说明）
代码文件
首先有一个index.html文件，在此分别引入以下两个js文件：
module.jsuse.js
<!-- index.html -->
<script src="module.js" type="module"></script>
<script src="use.js" type="module"></script>说明： 在ES6中，使不同js脚本模块化的方法就是就是在引入时，在
<script>标签中添加module属性。一旦添加，js内部的数据默认不再为全局可引用，需要以导入和导出的方式引用。
module.js中定义如下内容：
//定义变量
var message = '我是Module中的message变量'
//定义函数
function show(value) {
console.log('我是Module中的show函数',value)
}
//定义类
class Person {
run() {
console.log('奔跑中....')
}
}导出、导入方式一
直接使用export {变量名, 方法名, 类名}格式导出：
//导出方式一
export {message, show, Person}use.js使用：
使用import { 变量名, 方法名, 类名 } from "xxx.js";的格式导入：
//导入
import { message, show, Person } from "./module1.js";
//使用
console.log(message)
show(123)
var person = new Person
person.run()导出、导入方式二
在定义变量之前添加export关键字直接导出：
//导出方式二
//定义并导出变量
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";的格式统一导入：
//导入
import * as use from "./module1.js";
//使用
console.log(use.message)
use.show(123)
var person = new use.Person
person.run()导出、导入方式三
使用default关键字定义默认变量（这里以方法为例）：
//导出方式三
export default function (value) {
console.log('我是Module中的默认函数',value);
}use.js使用：
使用import 命名 from "xxx.js";的格式导入（注意在导入的时候需要默认函数命名）：
//导入并命名
import def from "./module1.js";
//使用
def(456)注意： 这种默认变量的定义在一个模块中只能唯一定义一个，并且在导入使用的时候需要为其命名。
后记
先了解模块化的概念，为了后面更好地学习Webpack的内容。
