es6模块化

        javascript在es6之前是没有模块化一说的，没有本身的模块化体系，没有模块化语法，这意味着不能把一个大点的程序拆分成为多个小程序，这会导致程序显得特别的庞大，臃肿，也意味着对于开发大点的项目有着重重的阻碍；javascript之前的模块化本身都是依赖于第三方js库的，例如commonJs，AMD等；大家都知道模块化一般分为导入和导出两部分，现在我们就通过这两部分介绍一下es6自有的模块化体系和语法：

一、导出（export）：

        export命令用于规定模块的对外接口，javascript中一个模块就是一个单独的文件，在文件中定义的所有的变量，方法都无法在外部访问，所以需要通过export将其需要的接口暴露(输出)出来：

export  XXX;
export const a=12;
export {
	a as aaa,
	b as bbb,
}

二、导入（import）：

        import命令用于导入加载用export导出的模块：

（1）、将整个文件作为一个模块导入，相当于“”

import './modules/1.js';

（2）、引入一个文件中的某一个模块

export const a=12;
import {a} from './modules/1.js';

三、as和export default

（1）as：as主要可以用来为模块重命名，在导出和导入的时候都可以使用

//导出的时候可以将模块名更改
export {
	a as aaa,
	b as bbb,
}
//导入的时候也可以改回去
import {aaa as a, banana as b, cup as c} from './modules/2.js';

（2）export default：export default命令是为了模块指定默认输出，使用default关键字在引入时候不能放在大括号内。

export default 12;

注：

export：

（1）、虽然export命令可以在模块的任意位置，但是必须是暴露在最外层，不能存在于函数等块作用域中。

（2）、一个模块只能有一个export default,如果有多个需要通过default需要导出的话，放在{}内导出，在外部用对象的方式取用

import：

（1）、如果是在html的script标签中使用import导入，需要将script的属性type="module"，否则会报错“Cannot use import statement outside a module”；

（2）、import不得使用在条件表达式中

（3）、import模块实际只会导入一次，无论你代码中引入多少次

（4）、引入的模块会自动提前，所以不存在未定义先使用

console.log(a+b);				//此处不会报错，模块会自动提前
import {a, b} from './modules/4.js';

（5）、模块内部发生改变，使用模块的地方也发生改变，不是一次导入就不发生变化了

let a = 12;
setTimeout(()=>{
   	a=13;
},2000);
export {a}

import {a} from './modules/6.js';
console.log(a);		//12
setTimeout(()=>{
   console.log(a);     	//13，模块内部发生改变，使用模块的地方也发生改变，不是一次导入就不发生变化了
},3000);