ES6---es6中的模块

在es5中的一些模块化思想都是借助于第三方框架或库，es6则解决了这个问题，es6在模块功能上的实现完全可以替代commonjs和AMD规范，es6的模块规范采用自动严格模式。

---

●export：

export主要用于规定模块的对外接口，一个模块即一个文件，只有使用export命令，外部才能获取模块内部的变量和方法。

module1.js
export var a='a';
export function fun1(){alert(123)};//module1.js文件中，通过export命令分别把变量a与方法fun1向外输出

///module2.js
var a='a';
function fun1(){alert(123)};
export {a,fun1};//module2.js文件把变量a与函数fun1打包向外输出，export命令也可以通过as关键字对输出的变量进行重命名，如：export{a as b,fun1 as fun2}

/module3.js
function fun2(){
    export default 'a'
}//报错，export命令只能出现在模块全局中，处于块级作用域的时候会报错


/module4.js
export default function fun(){console.log('default')};

import f from './module4.js';
f();//default,export命令后跟default关键字，则表示默认输出的变量(方法)，此时引入默认变量时，便不用{}，引入默认变量时，import后跟字符串作为变量（方法）的名字。如同gulp里面的默认任务，export输出时候只能有一个default。

●import:

css中@import命令可以引入外部css模块，在es6中，import命令则用于引入外部js模块。

import {a,fun1} from './module1.js';
console.log(a);//a,通过'import引入module1.js中的变量a与方法fun1，import后面{}中的变量名必须与被引入的模块的对外接口的名称一样


import {b as a} from './module.js';
console.log(b);//a,如同export，import命令也可以通过as关键字修改引入变量的名字


console.log(a);//a
import {a} from 'module1.js';//import命令会由于其他语句提前加载，所以不会报错

import * as mod from './module1.js';
console.log(mod.a);//a,可以通过*引入整体模块，借助as关键字进行模块命名，即可对象方法调用


module mod from './module1.js';
console.log(mod.a);//a,也可以通过module关键字引入挣个模块文件，后跟一个参数，为引入模块命名