es6常用语法学习笔记—Module语法
在CommonJS中，模块就是对象，输入时必须查找对象属性，模块的加载为“运行时加载”，因为只有运行时才能得到相关对象，导致完全没办法在编译时做“静态优化”。
在ES6中， 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。这种加载方式成为“编译时加载”或静态加载。
export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。
1、export命令
一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。
第一种输出方式
//export.js export var name = "张三"; export var age = 23;
第二种输出方式
//export.js var name = "张三"; var age = 23; export {name,age}
两种方式是等价的，但是从便利性考虑来说，可以优先考虑第二种方式，这样就可以在脚本尾部，一眼看清楚输出了哪些变量。
export除了输出变量，还可以导出函数和类
export function person(){ console.log(111) }
通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名。
function v1(){ console.log(111) } function v2(){ console.log(222) } export { v1 as a1, v2 as a2, v3 as b2 }
上面代码使用as关键字，重命名了函数v1和v2的对外接口。重命名后，v2可以用不同的名字输出两次。
需要特别注意的是，export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。
//第一种形式 var a = 1; export a; //此时会报错 //第二种形式 export 1; //此时也会报错
以下写法均正确
//写法一 export var a = 1; //写法二 var a = 1; export {a}; //写法三 var a = 1; export {a as b}
同样function和class的写法也是这样
function f(){ console.log(11) } export f //报错
另外，export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。
var a = 1; export {a}; setTimeout(()=>{ a = 2 },1000)
以上代码先输出1,1秒后会变成2。这一点与 CommonJS 规范完全不同。CommonJS 模块输出的是值的缓存，不存在动态更新。
最后，export命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错，import命令也是如此。这是因为处于条件代码块之中，就没法做静态优化了，违背了 ES6 模块的设计初衷。
function foo(){ export var a= 1 } foo()//会报错
2、import命令
使用export命令定义了模块的对外接口后，其它js文件就可以使用import命令接收了。
//person.js export var name = 'zs'; export var age = 20; export var sex = 'male' //info.js import {name,age,sex} from person.js
import命令用于加载person.js文件。import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（person.js）对外接口的名称相同。
如果想为导入的变量重新取一个名字，import要使用as关键字，将导入的变量重命名。
//person.js export var name = 'zs'; export var age = 20; export var sex = 'male' //info.js import {name as username,age,sex} from person.js
import导入的命令都是只读的，因为它的本质是输入接口，因此不允许在加载模块的脚本里面改写接口。
import {a} from "a.js"
a = {} //报错
如果a是一个对象，改写a的属性是允许的
import {a} from "a.js"
a.name = "zs"
上述代码中，a的属性可以成功改写，并且其他模块可以读取到改写后的值。不过这种写法很难查错，建议凡是输入的变量都当做完全只读，轻易不要改变它的属性。
import后面的from指定模块文件的位置，可以是相对路径也可以是绝对路径，.js后缀可以省略。
注意，import具有提升效果，会提升到整个模块的头部，首先执行。
foo()
import {foo} from a.js
上边代码不会报错，因为import的执行早于foo的调用。这是因为import命令是在编译阶段执行的，在代码运行之前。
由于import是静态执行，所以不能使用表达式和变量等这些只有运行时才有结果的语法结构。
//以下写法会报错 import {"f"+"oo"} from "a.js" let a = "a.js" import {foo} from a if(x ===1 ){ import {a} from "a.js" }else{ import {b} from "b.js" }
3、模块的整体加载
除了指定加载某个输出的值，还可以使用整体加载，即用星号（*）指定一个对象，所有输入的值都绑定到这个对象上。
//method.js export var a = 1; export var b = 2; export var c = 3;
方法一：逐一加载
import {a,b,c} from "method.js"
console.log(a,b,c)//1,2,3
方法二：整体加载
import * as obj from "method.js" console.log(obj.a,obj.b,obj.c)//1,2,3
注意：模块整体加载所在的那个对象，不允许运行时改变，以下写法均会报错。
//改变a的值 obj.a = 10; //新增d的值 obj.d = 4;
4、export default命令
使用import命令的时候，用户需要知道所要加载的变量名和函数名，否则无法加载。
为了给用户提供方便，就要用到export default命令，为模块指定默认输出。
export default function foo() {console.log(1)}
上述模块指定输出一个匿名函数，其他函数在加载时，import命令可以为该匿名函数指定任意名字。
import a from "export-default.js" a() //1
这时import命令后面不使用大括号
export default命令用在非匿名函数之前也是可以的。
//写法1 function foo() { console.log(1) } export default foo //写法2 export default function foo() { console.log(1) }
在上面代码中，foo函数的函数名是foo，在模块外部是无效的。在模块加载的时候，视为匿名函数加载。
export default用于模块的指定默认输出。显然，一个模块只能有一个默认输出，因此，export default命令只能使用一次。所以import命令后面不用加大括号，因为只可能唯一对应export default命令。
本质上，export default就是输出一个叫做default的变量或方法，然后系统允许i为它取任意名字。
//a.js function add() { console.log(1) } export {add as default} //等同于 export default add //b.js import {default as foo} from "a.js" //等同于 import foo from "a.js"
export default命令只是输出一个叫做default的变量，它后面不能跟变量声明语句。
//正确 var a = 1; export default a; //正确 export var a = 1; //正确 export default 100 //错误 export default var a = 1;
上述代码中eport default a的含义是将a的值赋给default。
