ES6 Module的语法

Module 简介

JavaScript 一直都没有模块体系，无法将大的程序拆分成相互依赖的小文件。这对开发大型的、复杂的项目形成了巨大的障碍。ES6 引入了module模块化的概念。

export 命令

export命令是用于规定模块的对外接口。

// test.js
var name = 'shaoin';
var age = '98';
function person(name,age){
  console.log(name + ':' + age);
}
export { name, age, person as hello};

as关键字，重命名了函数person的对外接口

import 命令

import命令用于输入所需模块。

// main.js
import { himName as name, age, hello} form './test.js';

import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（test.js）对外接口的名称相同。也可以用as关键词，将输入的变量重命名。

注意：

1. import命令是编译阶段执行的，在代码运行之前；所以import命令无论放在什么位置，都会被提升。
2. import是静态执行，所以不能使用表达式和变量。
3. 多次重复执行同一句import语句，那么只会执行一次，而不会执行多次。

* 模块整体

用*表示一个模块的所有输入值。

import * as him from "./test.js"
// 相当于
import { name, age, hello} form './test.js';

export default 命令

export default命令，为模块指定默认输出

export default function(){
  console.log('default');
}
// 或者写成
export default function fn(){
  console.log('default')
}
// 或者写成
function fn(){
  console.log('default')
}
export default fn;

因为export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句。

export var num = 11; // 正确

var num = 11;
export default num; // 错误

export default var num = 11; // 错误

export default 11; // 正确

因为export default命令的本质是将后面的值，赋给default变量，所以可以直接将一个值写在export default之后。

同时引入默认方法和其它接口：

import name, { age, sex } from 'person';

export default function (name){
  console.log(name)
}
function age(age){
  console.log(age)
}
function sex(sex){
  console.log(sex)
}
export { age, sex };

一个模块只能有一个默认输出，因此export default命令只能使用一次。

import() 方法

ES2020提案 引入import()函数，支持动态加载模块，按需加载。

// 触发点击事件
oButton.addEventListener('click',  => {
  import('./test.js')
  .then( Fn => {
    Fn.hello();
  })
  .catch(error => {
    /* Error */
  })
});
// 根据条件加载
if(isTrue){
  import('./test.js').then(...);
}else{
   ...
}
// 方法返回值加载
function fn(){
  return './test.js'
}
import(fn()).then(...);

参考文献

阮一峰老师的 ECMAScript 6 入门

---

求点赞 求评论 求收藏 ~~ 今天的学习记录暂时到这... ~~ 求点赞 求评论 求收藏