ES6模块化语法

定义:

• 每个js 文件都是一个独立的模块
• 导入其他模块成员使用 import 关键字
• export 命令用于规定模块的对外接口

基本语法

• 默认导入和导出
• 按需导入和导出
• 直接导入并执行模块中的额代码

1.默认语法

默认导出格式: export default 默认导出的成员

注意: 每个模块中，只允许使用唯一的一次 export default,否则会报错。

要用到 export default 命令，为模块指定默认输出。

// export-default.js
export default function () {
  console.log('foo');
}

模块默认输出, 其他模块加载该模块时，import 命令可以为该匿名函数指定任意名字。

默认导入的语法:

import 任意名称 from ‘模块标识符’

// import-default.js
import customName from './export-default';
customName(); // 'foo'

默认导入时的接收名称可以使任意名称，只要合法即可！

2.按需导入导出

按需导出: export 按需导出的成员

/** 定义模块 math.js **/
var basicNum = 0;
var add = function (a, b) {
    return a + b;
};
export { basicNum, add };

按需导入: import { s1 } from ‘模块标识符’

可以通过as 关键字来更改变量名。

/** 引用模块**/
import { basicNum, add } from './math';
function test(ele) {
    ele.textContent = add(99 + basicNum);
}

如上例所示，使用 import 命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。

注意事项：

1.每个模块中可以使用多次按需导出

2.按需导入的成员名称必须和按需导出的名称保持一致

3.按需导入时，可以使用as关键字进行重命名

3.直接执行

如果只想单纯的执行某个模块中的代码，并不需要得到模块中向外共享的成员。此时，可以直接导入并执行模块代码。

import '../request.js'