前端模块化

一说到模块化，这个早就已经是我们接触过的概念，例如最早的函数，就可以看作是一个模块。nodejs里面，有很多的内置模块，当然，我们也可以自定义模块。在nodejs里面，一个js 文件就是一个模块。可以使用 module.exports导出一个模块，使用require引入一个模块。

一个语言，必须要有模块化的东西，才意味着你可以开发大型的应用。

nodejs已经有模块化的东西，但是nodejs是js在服务器端一个运行环境。

js还可以在浏览器端运行，但是长久以来，浏览器端都缺乏模块化的规范。

随着单页应用（所谓单页应用，就是指只有一个页面）的流行。我们的前端人员需要在一个页面里买呢，根据不同的情况，组装不同的页面结构。同时还需要保证数据之间尽量独立，不相互影响，所以这个工程量是非常大的。这个时候，就需要模块化，如果没有模块化，开发起来非常恼火。

前端模块化简史

前端模块化的发展其实是非常曲折的。

1. CommonJS

有了 CommonJS 之后，首次提出了js相关的模块化规范，但是这个规范是属于js在nodejs这个环境中的规范，在浏览器端并不适用。

2. AMD 规范

AMD 英文全称为 Asynchronous Module Definition。翻译成中文就是“异步模块定义”，换句话说，使用这种规范引入模块就是使用的异步的方式。

这种规范加载模块也是使用的 require，但是不同于commonJS 中 require ，有两个参数：

require([模块1，模块2，模块3...],function(){})

AMD 规范具体的实现有 require.js 和 curl.js

3. CMD 规范

在 AMD 规范推出没多久之后，阿里的前端大牛提出了 CMD 规范，并且书写了规范的实现，sea.js

大致的语法如下：

define(function(require,exports,module)){
	// ...引入模块后具体的操作       
}

但是上面所介绍的前端模块化工具，都只是作为了解即可，随着 ECMAScript 2015 的推出，官方正式推出了官方的模块化规范，这些工具都已经成为历史。

ECMAScript2015 官方的模块化规范

目前官方的这个规范，浏览器都支持，所以我们可以放心使用。它的规则如下：

（1）一个 js 文件，就是一个模块（和 commonJS 是一样的）

（2）每个模块中的数据，除非导出，否则都是私有数据，仅仅只能在模块中使用。

（3）使用 export 关键字来导出模块

（4）使用 import 来引入模块

（5）如果是在页面上要表明一个js文件是一个模块，需要添加 type="module"

<script src='./index.js' type="module"></script>

（6）一个模块可以有多个导出，但是只能有一个默认导出

模块的导入和导出

具体操作示例如下：

// a.js 导出模块
export const name = 'william';
export let age = 18;
export function sum(x,y){
    return x + y;
}

// b.js 导入模块

import {name,age,sum} from './a.js'
console.log(name);
console.log(age);
console.log(sum(1,2));

如果想要一次性导入另一个模块中所有的东西，如下：

import * as obj from './a.js'
console.log(obj);

导入导出默认值

具体语法如下：

// 类似于 commonJS 中的 module.exports = function(){}
export default function sum(x,y){
    return x + y;
}

总结一下，没有加 default，import 的时候需要使用解构来获取数据，如果加了 default，就不需要解构了，直接拿来用。