ES6 模块

[fanxinjie]

export

可导出内容：变量、类、方法

// 1
let a = ;
export a;

// 2
export let a = 1;

// 3
let b = 1;
export { b as a }; // 引用文件中访问的是a

接口名和内部变量建立对应关系。（和CommonJS实现实现方式不同）

Import

导入方式

//单一加载 1
import { a } from './test.js';
//2
import { b as a } from './test.js'; 

// 整体加载
import * as fs from './test.js';

import具有提升效果，会提升至模块头部，首先执行代码。

read();

import { read } from 'test.js'

本质原因是：import是在编译阶段执行的，即代码运行前，已经成功引入read模块

default export

书写方式

// 匿名函数
  // export.js
  default export function(){
    console.log('default export test');
  }

  // import.js
  import defalutTest from './export';
  defalutTest(); // default export test

// 非匿名函数
  // export.js
  default export function test(){
    console.log('default export test');
  }

  // import.js
  import defalutTest from './export';
  defalutTest(); // default export test

和非默认导出对比

// 默认导出
export default function add() {}

import add from './export'; 

// 非默认导出
export function add() {};

import { add } from './export';

默认导出本质上是输出一个default变量或方法，分析下面写法

// 不允许
export default let a = ;

// export.js
function add(a, b){
  return a+b;
}
export { add  as default }; // 等同于 export default add;

// import.js
import { default as add } from './export';// 等同于 import add from './export'

import()

由上面描述可得知，import加载的模块是在编译时加载的，即不可动态完成模块的加载。

// 错误事例
const path = `./${fileName}`;
import pathModule from path;

// 正确事例
const path = `./${fileName}`;
const pathModule = reuire(path);

如果import想要代替require，到目前为止，import会有不可动态加载的障碍。因此建议引入import()，完成动态加载。

import()函数与所加载的模块没有静态连接关系，这点也是与import语句不相同。

import()类似于 Node 的require方法，区别主要是前者是异步加载，后者是同步加载。

加载规则

• 代码是在模块作用域之中运行，而不是在全局作用域运行。模块内部的顶层变量，外部不可见。
• 模块脚本自动采用严格模式，不管有没有声明use strict。
• 模块之中，可以使用import命令加载其他模块（.js后缀不可省略，需要提供绝对 URL 或相对 URL），也可以使用export命令输出对外接口。
• 模块之中，顶层的this关键字返回undefined，而不是指向window。也就是说，在模块顶层使用this关键字，是无意义的。
• 同一个模块如果加载多次，将只执行一次。