esmodule

一. export命令

1. 如何定义模块

一个模块就是一个独立的js文件

导出模块

export 东西

1.1 export输出变量的写法：

// wu.js
export let firstName = 'wuwei';
export let lastName = 'haha';
export let year = 2019;

还可以

let firstName = 'wuwei';
let lastName = 'haha';
let year = 2019;

export {firstName, lastName, year};
//跟上面写法等价，推荐这种写法。

1.2 export`命令输出函数或类（class）。

export function multiply(x, y) {
  return x * y;
};

1.3 as关键字重命名

通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名。

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

1.4 特别注意

需要特别注意的是，export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。

// 报错
export 1;

// 报错
var m = 1;
export m;

//正确写法
// 写法一
export var m = 1;

// 写法二
var m = 1;
export {m};

// 写法三
var n = 1;
export {n as m};

同样的，function的输出，也必须遵守这样的写法。

// 报错
function f() {}
export f;

// 正确
export function f() {};

// 正确
function f() {}
export {f};

2. 如何使用模块

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。

引入模块

import 模块路径

<script type="module">
	import "./modules/1.js";   // 这种写法只是相当于引入一个文件
    import {a} from "./modules/1.js"   // 导入模块中导出的a 
</script>

import {firstName, lastName, year} from './profile.js';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

上面代码的import命令，用于加载profile.js文件，并从中输入变量。import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同。

2.1 as关键字改变量名

import { lastName as surname } from './profile';

import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js后缀可以省略。

2.2 import 提升

注意，import命令具有提升效果，会提升到整个模块的头部，首先执行。

foo();

import { foo } from 'my_module';
//import的执行早于foo的调用。这种行为的本质是，import命令是编译阶段执行的，在代码运行之前。

2.3 import不能使用表达式

由于import是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构。

// 报错
import { 'f' + 'oo' } from 'my_module';

// 报错
let module = 'my_module';
import { foo } from module;

// 报错
if (x === 1) {
  import { foo } from 'module1';
} else {
  import { foo } from 'module2';
}

import { foo } from 'my_module';
import { bar } from 'my_module';

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

2.4 模块化整体加载

除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。

注意，模块整体加载所在的那个对象，不允许运行时改变。下面的写法都是不允许的。

import 特点

1. 可以是相对路径也可以是绝对路径

   ​ import “./modules/1.js”;

2. import模块只会导入一次,无论你引入多少次

3. import “./modules/1.js”; 如果这么用,就相当于引入了一个js文件

4. 导入模块中的一个变量或常量

   import {a,b,c} from "./modules/1.js"
   

5. 导入时可以取别名使用

   import {a as aa,b as bb,c as cc} from "./modules/1.js"
   

6. 导入这个模块导出的对象

   import * as obj from './modules/1.js';
   // 这个时候你就以使用obj这个Module对象了
   console.log(obj.a);
   

7. import 的导入语句会进行提升,提升到最顶部,首先执行

   console.log(a + b);   // 能正常获取到a,b的值
   import {a,b} from './1.js'
   

8. 导出去的模块内容,如果里面发生有定时器发生导出内容的改变,外边导入的也会发生改变,不像Comment会缓存

import() 动态引入

默认的import语法不能写在if之类的判断里的,因为是静态引入,先引入在使用

// 这种写法是错的
let a = 12;
if(a == 12){
    import {a} from './1.js'
}else{
    import {a} from './2.js'
}

import()是动态引入 类似于node里面的require

// import() 引入返回一个promise对象
import('./1.js').then(res => {
    console.log(res);
})

优点:

1. 按需加载
2. 可以写在if里面,判断加载
3. 路径都可以是动态的

导出 export

1. 可以单独导出变量或常量

   export let a = 15;
   

2. 可以导出一个对象

   export {
   	a,
       b,
       c
   }
   
   // 但是不能这么写 这么写会报错
   export {
   	a:a,
       b:b,
       c:c
   }
   

3. 可以给导出的变量或常量取别名,一旦取了别名,导出这个模块要用别名导入

   export {
   	a as aa,
       b as bb,
       c as cc
   }
   
   // 导入模块
   import {aa,bb,cc} from "./modules/1.js"
   
   // 导入时去别名
   import {aa as a,bb as b,cc as c} from "./modules/1.js"
   

特殊形式

发现导入都是需要花括号的,如果希望导入不用花括号,那就需要改变导出方式

// 导出时使用export default
let a;
export default a = 10;

// 导入时可以不用花括号
import a from './modules/1.js'

export 导出的内容,导入时都需要花括号,

export default 导出的 内容,导入时不需要花括号

例子:

// 这里是1.js
let a = 20;
let b = 30;
export {
  a, b
}

// 这里是2.js
import { a, b } from './1.js';
console.log(`a的值是:${a}, b的值是:${b}`);

const sum = () => {
  console.log(`我是a,b的和:${a + b}`);
  return a + b;
}
const show = () => {
  console.log('show 执行了')
  return 1;
}

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.showName = function () {
    return `我的名字是${this.name}`;
  }
}

export {
  sum,
  show,
  a,
  b
}
export default { Person }

// 这里是HTML导入
import mod, { sum, show, a, b } from "./2.js"
console.log(mod);

let p = new mod.Person("wuwei", 18);
console.log(p);
console.log(p.showName());

show();

sum();

console.log(a, b);