1.5.2　模块化

1．ES 6模块化概述

在ES 6版本之前，JavaScript一直没有模块（Module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如Ruby的require、Python的import，甚至就连CSS都有@import，但是JavaScript任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。

好在广大的JavaScript程序员自己制定了一些模块加载方案，主要有CommonJS和AMD两种。前者用于Node.js服务器，后者用于浏览器。

2．import和export

随着ES 6的到来，终于原生支持了模块化功能，即import和export，而且实现得相当简单，完全可以取代CommonJS和AMD规范成为浏览器和服务器通用的模块化解决方案。

在ES 6的模块化系统中，一个模块就是一个独立的文件，模块中的对外接口采用export关键字导出，可以将export放在任何变量、函数或类声明的前面，从而将它们暴露给外部代码使用，代码如下：

要导出数据，在变量前面加上export关键字：

     export var name = "小明";
     export let age = 20;
     
     // 上面的写法等价于下面的写法
     
     var name = "小明";
     let age = 20;
     export {
       name:name,
       age:age
     }
     // export对象简写的方式
     export {name,age}

要导出函数，需要在函数前面加上export关键字：

     export function sum(num1,num2){
       return num1 + num2;
     }
     // 等价于
     let sum = function (num1,num2){
       return num1 + num2;
     }
     export sum

所以，如果没有通过export关键字导出，在外部就无法访问该模块的变量或者函数。

有时会在代码中看到使用export default，它和export具有同样的作用，都是用来导出对外提供接口的，但是它们之间还有一些区别：

·　export default用于规定模块的默认对外接口，并且一个文件只能有一个export default，而export可以有多个。

·　通过export方式导出，在导入时要加{ }，export default则不需要。

在一个模块中可以采用import来导入另一个模块export的内容。

导入含有多个export的内容，可以采用对象简写的方式，也是现在使用比较多的方式，代码如下：

     //other.js
     var name = "小明"
     let age = 20
     // export对象简写的方式
     export {name,age}
     
     //import.js
     import {name,age} from "other.js"
     console.log(name) // 小明
     console.log(age) // 20

导入只有一个export default的内容，代码如下：

     //other.js
     export default function sum(num1,num2) {
       return num1 + num2;
     }
     //import.js
     import sum from "other.js"
     console.log(sum(1,1)) // 2

有时也会在代码中看到module.exports的用法，这种用法是从Node.js的CommonJS演化而来的，它其实就相当于：

     module.exports = xxx
     // 相当于
     export xxx

ES 6的模块化方案使得原生JavaScript的“拆分”能力提升了一个大的台阶，几乎成为当下最流行的写法，并且应用在大部分的企业项目中。