Module模块语法

喜闻乐见，ES6有了module语法，js有了模块体系
模块加载的介质是接口，而形成依赖关系的文件之间，一方需要对外接口，另一方需要通过接口加载模块，module的核心就是export和import了。

export

export var a = 'i want to export sth1'
export var b = 'i want to export sth2'
export var c = 'i want to export sth3'

var a = 'i want to export sth1'
var b = 'i want to export sth2'
var c = 'i want to export sth3'
export {a,b,c}

export function test(){...}

function test1(){..}
function test2(){..}
export {
test1 as aliase1,
test2 as aliase2,
test2 as aliase3

要注意的点：

1.如果选择先声明变量，再声明接口的方式，声明接口时必须带花括号，否则会报错。
2.export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。
3.export命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错。

import

语法：
假设接口文件为mytest.js

import {test1} from './mytest'
import {test1 as newname} from './mytest'

//整体加载用*号表示
import * as test from './mytest'
test.test1();
test.test2();

要注意的点：

1.js文件可省略后缀
2.from指定模块文件的位置，可以是相对路径，也可以是绝对路径
3.如果from后面只是模块名，不带有路径，那么必须有配置文件，告诉 JavaScript 引擎该模块的位置。
4.import命令具有提升效果，会提升到整个模块的头部，首先执行。
5.import是静态执行，所以不能使用表达式和变量
6.整体加载是不可以改变对象的。

默认输出export default

这是在使用vue时常见的。

//默认输出一个函数
export default function () {
  console.log('foo');
}
//引入模块时可任意命名
import customName from './export-default';
customName(); // 'foo'

//输出非匿名函数
export default function foo() {
  console.log('foo');
}
// 或者写成
function foo() {
  console.log('foo');
}
export default foo;
//即便是非匿名函数，使用了默认输出，就被当作匿名函数加载了

// 默认
export default function crc32() { // 输出
  // ...
}

import crc32 from 'crc32'; // 输入

// 非默认
export function crc32() { // 输出
  // ...
};

import {crc32} from 'crc32'; // 输入

//其实export default语义是将某变量值赋给变量default
// 正确
var a = 1;
export default a;
// 错误
export default var a = 1;
// 正确
export default 42;
// 报错
export 42;

复合写法

如果在一个模块之中，先输入后输出同一个模块，import语句可以与export语句写在一起。

export { foo, bar } from 'my_module';

// 等同于
import { foo, bar } from 'my_module';
export { foo, bar };

import()

可完成动态加载，接收参数可以为import的所有可能参数
import()加载模块成功以后，这个模块会作为一个对象，当作then方法的参数。因此，可以使用对象解构赋值的语法，获取输出接口。

import('./myModule.js')
.then(({export1, export2}) => {
  // ...·
});

Module模块语法