第三十一节: ES6 ESModule

1. Module 模块化

JavaScript 采用'共享一切'的方式加载代码, 也就是在ES6 之前, JavaScript中定义的一切都共享同一个全局作用于, 这样随着程序复杂度提升的同时,也会带来命名冲突等诸多问题. 因此ES6的一个目标就是解决作用域问题. 也为了使JavaScript 应用程序显得有序, 于是引进了模块

1.1 模块功能

模块功能主要由两个命令构成：export和import。

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

import命令用于输入其他模块提供的功能。

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。

2. 模块的使用

注意如果需要测试模块化需要放到服务器环境

2.1. export 导出语法

使用export 关键字将模块中的一部分代码暴露给其他模块, 可以将export 关键字放在任何变量, 函数,类声明之前, 将其导出

导出模块

export 东西

2.1.1 export输出变量的写法：

导出单个的变量

// 单个变量导出
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};
//跟上面写法等价，推荐这种写法。

注意点: 一次导出是, 严禁对象属性值的写法.如下写法会报错

// 报错写法
let firstName = 'wuwei';
let lastName = 'haha';
let year = 2019;

export {
    firstName:firstName, 
    lastName:lastName, 
    year:year
};  

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

// 导出函数
export function multiply(x, y) {
  return x * y;
};

// 导出类
export class Penson{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
}

2.1.3 as关键字重命名

通常情况下export 输出的变量, 函数或者类就是本来的名字，但是有时,我们可能并不希望使用它们的原始名称. 此时就可以通过as关键字修改导出元素的名称.

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

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

2.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};

动态绑定
export`语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。

export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);

上面代码输出变量foo，值为bar，500 毫秒之后变成baz。

2.1.5 整体导出

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

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

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

2.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';

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

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

2.2.1 as关键字改变量名

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

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

2.2.2 import 提升

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

foo();

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

2.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.2.4 模块化整体加载

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

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

2.2.5 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会缓存
   

2.2.6 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. 路径都可以是动态的

例子:

// 这里是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);