ES6 模块化

Question

在之前的 javascript 中是没有模块化概念的。如果要进行模块化操作，需要引入第三方的类库。随着技术的发展，前后端分离，前端的业务变的越来越复杂化。直至 ES6 带来了模块化，才让 javascript 第一次支持了 module。ES6 的模块化分为导出（export）与导入（import）两个模块。

一. 模块化出现的背景

在网页开发的早期，js 制作作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码还是很少的。那个时候的代码是怎么写的呢？直接将代码写在 <script> 标签中即可。

但是随着 Ajax 的发展，慢慢形成了前后端分离的开发模式，前端处理的事情也越来越多，代码量也是与日俱增。为了应对代码量的剧增，我们通常会将代码组织在多个 js 文件中，进行维护。但是这种维护方式，依然不能避免一些灾难性的问题，例如变量命名空间的问题。加入项目中引入了两个 js，分别是 aaa.js、bbb.js，如果它们两都定义了 name 这个变量，那么后引入的 js 文件中的变量值肯定会覆盖先引入文件中的变量值。

在模块出来之前，我们通常会采用匿名函数的形式：

<script src="aaa.js"></script>
<script src="bbb.js"></script>
<script>
  module1.showMessage();
  module2.showMessage();
</script>

aaa.js:

var module1= (function () {
  var obj = {};
  var name = "张三";
  var age = 24;
  function showMessage(){
    console.info(name +"："+age)
  }
  obj.name = name;
  obj.showMessage = showMessage;
  return obj;
})()

bbb.js:

var module2= (function () {
  var obj = {};
  var name = "李四";
  var age = 18;
  function showMessage(){
    console.info(name +"："+age)
  }
  obj.name = name;
  obj.showMessage = showMessage;
  return obj;
})()

通过闭包的方式我们可以将 js 文件之间进行命名隔离，我们只需要将我们可能会使用到的东西导出到外部即可，这样我们就不会担心命名重复的问题了。

上面是使用原生 JS 实现的模块化开发，在 ES6 出来之前，市面上也有很多成熟的模块化规范：CommonJS、AMD、CMD。

二. ES6 模块化

2.1 export、import

在 ES6 中每一个模块即是一个文件，在文件中定义的变量，函数，对象在外部是无法获取的。如果你希望外部可以读取模块当中的内容，就必须使用 export 来对其进行暴露（输出）。先来看个例子，来对一个变量进行模块化。我们先来创建一个 test.js 文件，来对这一个变量进行输出：

export let myName="laowang";

然后可以创建一个 index.js 文件，以 import 的形式将这个变量进行引入:

<script type="module">
  import {myName} from "./test.js";
  console.log(myName);//laowang
</script>

如果要输出多个变量可以将这些变量包装成对象进行模块化输出：

/******************************test.js**********************/
let myName="laowang";
let myAge=90;
let myfn=function(){
    return "我是"+myName+"！今年"+myAge+"岁了"
}
export {
    myName,
    myAge,
    myfn
}
/******************************index.html**********************/
<script type="module">
   import {myfn,myAge,myName} from "./test.js";
   console.log(myfn());//我是 laowang！今年 90 岁了
   console.log(myAge);//90
   console.log(myName);//laowang
</script>

如果你不想暴露模块当中的变量名字，可以通过 as 来进行操作:

/******************************test.js**********************/
let myName="laowang";
let myAge=90;
let myfn=function(){
    return "我是"+myName+"！今年"+myAge+"岁了"
}
export {
    myName as name,
    myAge as age,
    myfn as fn
}
/******************************index.html**********************/
<script type="module">
   import {fn,age,name} from "./test.js";
   console.log(fn());//我是 laowang！今年 90 岁了
   console.log(age);//90
   console.log(name);//laowang
</script>

也可以直接导入整个模块，将上面的接收代码修改为：

<script type="module">
   import * as info from "./test.js";//通过*来批量接收，as 来指定接收的名字
   console.log(info.fn());//我是 laowang！今年 90 岁了
   console.log(info.age);//90
   console.log(info.name);//laowang
</script>

2.2 默认导出（default export）

一个模块只能有一个默认导出，对于默认导出，导入的名称可以和导出的名称不一致。

/******************************导出**********************/
export default function(){
    return "默认导出一个方法"
}

/******************************引入**********************/
import myFn from "./test.js"; // 注意这里默认导出不需要用{}。
console.log(myFn()); // 默认导出一个方法

可以将所有需要导出的变量放入一个对象中，然后通过 default export 进行导出。

/******************************导出**********************/
export default {
    myFn(){
        return "默认导出一个方法"
    },
    myName:"laowang"
}
/******************************引入**********************/
import myObj from "./test.js";
console.log(myObj.myFn(),myObj.myName);// 默认导出一个方法 laowang

同样也支持混合导出

/******************************导出**********************/
export default function(){
    return "默认导出一个方法"
}
export var myName="laowang";
/******************************引入**********************/
import myFn,{myName} from "./test.js";
console.log(myFn(),myName);// 默认导出一个方法 laowang