JavaScript：module·源栈课堂·一起帮

JavaScript：module

当前系列： ES进阶

引子

复习：随着项目代码量的增加，我们不断的进行组织整理：

表达式（expression） -----> 函数（function/method） -----> 类（class） --------> 程序集（Assmebly/Project）

JavaScript因为设计之初，就没有考虑过大规模（large-scale）的项目开发，所以在这方面先天不足。直到ES6推出模块（module）……

Module

将一个一个独立的.js文件视为module

在一个.js文件（注意：不是html文件）中可以引用其他的.js文件，形成.js文件中的相互引用

共分三步：

export（student.js 模块决定对外“暴露”name）
```
export let name = 'yf';
```
import（site.js上引用student.js暴露的name）
```
import { name } from './student.js';
```
reference（Html 页面上引用site.js）
```
<script type="module" src="~/js/site.js"></script>
```
注意这个type="module"，必须的！

特点：

默认"use strict";
实现了“封装”，除非export，否则外部无法获取，所以可以理解为：module中的变量都是局部作用域
```
var score = 96;
//等同于：
//{
//    let score = 96;
//}
```
一次加载，反复使用
加载出来的内容只能读取（readonly），不能（也不建议）修改（复习：const：区分值/引用... ）
```
//sname += '帅呆了'; 报错
```
动态取值：即通过该接口，可以取到模块内部“实时”的值
```
if (Math.random() > 0.5) {
    sname = 'fg';
} else {
    sname = 'yf';
}
```

export

方式一：如上所示，声明的同时赋值，或者声明之后在module中赋值

方式二（推荐）：在module中声明赋值，export时用花括号{}包裹变量名/类名等

export { Student};

class Student {
    hello() {
        console.log("源栈欢迎你");
    }
}

可以使用as进行重命名：

export { Student as s };

import

.js 可以是绝对/相对路径（复习），但不能不以js文件名直接开头

import { name } from 'sample.js';  //报错

另：是否可省略.js扩展名看运行时环境，浏览器环境不能省略

import一样可以用as重命名

将所有被export的当做一个整体被取出来

import * as student from '/js/student.js';
//注意：1、没有{}；2、as必不可少

整个模块作为一个整体被加载，所以

default

module可以用default暴露一个默认的成员

export default function () {
    console.log('default');
}

import s from '/js/student.js';  //注意：没有{}
s();

暴露的也可以是命名函数（但对外部无效）

function hello() {
    console.log('default');
}
export default hello;  //没有{}

default只能使用一次：

//可以这样，暴露两个变量
export default { oh, cname };
//不可以这样
export default oh;
export default cname;

本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字

复合写法

import { age } from './student.js';
export { age };

可以简写为：

export { age } from './student.js';
//或者：
export * from './student.js';     /*    注意这里使用了"*"   */

但是，这种写法只能中转，无法在中转Module中引用被中转的成员

在 export * 的基础上，再export自己的成员，有时候被称之为：module的继承。

import()

优势：动态（运行时）加载，如：

if ('源栈最棒哒') {
    import('./student.js').then((module) => {
        alert(module.age);
    });
}

but，等一等，什么then啊=>的什么鬼？

这是异步回调的写法，因为module的加载是异步的：

    <script type="module" src="js/site.js"></script>
    <script>
        console.log('after module load...');
    </script>

具体then()的用法，且听下回分解！

作业：

建立第一个module：score.js，里面有一个类score：
1. 含参构造函数，能给当前实例的属性赋值：时间（datetime=当前时间），玩家Id（playerName）和成绩（score）
2. 静态方法：getBest(playName)，返回一个score对象
3. 实例方法：save()
以及：一个整数值bestOfAll