模块设计

实现原理

在过去 JS 不支持模块时我们使用AMD/CMD（浏览器端使用）、CommonJS（Node.js使用）、UMD(两者都支持)等形式定义模块。

AMD 代表性的是 require.js，CMD 代表是淘宝的 seaJS 框架。

基础知识

标签使用

<script type="module"></script>

延迟解析

模块总是会在所有 html 解析后才执行，下面的模块代码可以看到后加载的 button 按钮元素。

• 建议为用户提供加载动画提示，当模块运行时再去掉动画

严格模式

模块默认运行在严格模式，以下代码没有使用声明语句将报错

作用域

模块都有独立的顶级作用域，下面的模块不能互相访问

<script type="module">
  let hd = "dotohi.com";
</script>

<script type="module">
  alert(hd); // Error
</script>

预解析

模块在导入时只执行一次解析，之后的导入不会再执行模块代码，而使用第一次解析结果，并共享数据。

默认导出

使用default 定义默认导出的接口，导入时不需要使用 {}，默认导出的功能可以使用任意变量接收。

//导出
class User {
  static show() {
    console.log("User.method");
  }
}
export { User as default };

export default class {
  static show() {
    console.log("user.show");
  }
}

// 导入
import { site, default as hd } from "./love.js";
import show, { name } from "/modules/lvoe.js";

动态使用

使用 import 顶层静态导入，使用 import() 函数可以动态导入，实现按需加载，即按需加载后执行回调方法。

<button>love</button>
<script>
  document.querySelector("button").addEventListener("click", () => {
    let hd = import("./hd.js").then(module => {
      console.log(module.site);
    });
  });
</script>

因为是返回的对象可以使用解构语法

<button>love</button>
<script>
  document.querySelector("button").addEventListener("click", () => {
    let hd = import("./hd.js").then(({ site, func }) => {
      console.log(site);
    });
  });
</script>

指令总结

表达式	说明
export function show(){}	导出函数
export const name='love'	导出变量
export class User{}	导出类
export default show	默认导出
const name = 'love' export	导出已经存在变量
export	别名导出
import defaultVar from 'love'	导入默认导出
import {name,show} from 'a.j'	导入命名导出
Import {name as hdName,show} from 'love'	别名导入
Import * as api from 'houdunren.js'	导入全部接口