37-module

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

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。

1. 直接引入文件（就是执行一次js文件的内容）

import "./common/index.js" //写法1
import "./common"  //写法2 默认是index.js
//import './common/index.css'  引入css

2. export 抛出多个（注意写法）

//正确写法
export let a = 10;
export function fn(){
    console.log("我是一个抛出函数")
}

import {a,fn} from './common';
console.log(a)
fn()
/*名字必须要求和抛出的名字一一对应，如果不一样则报错，这样的话，
当其他人修改函数名字或者变量名字时，也需要相应的改名，
比较麻烦改，这时候可以利用给整体别名的方式来解决*/
//错误写法
let event = ()=>{
    console.log("event")
}
export event;  

也可以一次性引入所有并且整体起别名

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

3. export default 抛出：

let a = 10;
function fn(){
    console.log("我是一个抛出函数")
}
export default {
    a,
    fn
}
//在其他文件引入
import obj from './common';
console.log(obj.a)
obj.fn()

===============================

function fn(){
    console.log("我是一个抛出函数")
}
export default fn;
//在其他文件引入（在其他文件引入的时候名字不必保持一致）
import fn_e from './common';   
fn_e()

export 和export default 都在es6中用来导出变量、方法、模块等，区别在于：

1. 当我直接import "xxx.js"，相当于引入js文件执行一次js文件内容；
2. 当我使用export 抛出的时候，在引入的时候可以给整体起别名import * as from "xxx.js"，使用的时候obj.x、obj.fn()；
3. 同一文件中，export可以导出多个变量、方法、模块等；而同一文件中 export default 只能使用一次