十九、模块化

（一）简介

• 模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来

1.好处

• 防止命名冲突
• 代码复用
• 高维护性

2.模块化规范产品

• ES6 之前的模块化：规范（纸质） => 对应实现了规范的模块化产品

规范	产品
CommonJS	NodeJS、Browserify
AMD	requireJS
CMD	seaJS

3.模块化语法

• 模块功能主要由两个命令构成： export 和 import
  • export 用于规定模块的对外接口
  • import 用于输入其他模块提供的功能

4.模块化文件案例

1）js/m1.js

/**
 * 分别暴露
 */
export let yg = "ikuko";

export function play() {
  console.log("我喜欢看日漫");
}

2）js/m2.js

/**
 * 统一暴露
 */
let yg = "ikuko";

function play() {
  console.log("我喜欢看日漫");
}

export { yg, play };

3）js/m3.js

/**
 * 默认暴露
 */
export default {
  yg: "ikuko",
  play: function () {
    console.log("我喜欢看日漫");
  },
};

（二）模块化引入方式一

• 引入 m1.js/m2.js/m3.js 模块内容

1.方式一：通用导入形式

<script type="module">
  import * as m1 from "./js/m1.js";
  console.log(m1);

  import * as m2 from "./js/m2.js";
  console.log(m2);

  import * as m3 from "./js/m3.js";
  console.log(m3);
  m3.default.play();
</script>

2.方式二：解构赋值形式

<script type="module">
  import { yg, play } from "./js/m1.js";
  console.log(yg);
  play();
</script>

<script type="module">
  import { yg as yg2, play as play2 } from "./js/m2.js";
  console.log(yg2);
  play2();
</script>

<script type="module">
  import { default as m3 } from "./js/m3.js";
  console.log(m3);
</script>

3.方式三：简便形式，只能针对默认暴露

<script type="module">
  import m3 from "./js/m3.js";
  console.log(m3);
</script>

（三）模块化引入方式二

<script src="./js/app.js" type="module"></script>

/* 入口文件 app.js */

// 模块引入
import * as m1 from "./m1.js";
import * as m2 from "./m2.js";
import * as m3 from "./m3.js";

console.log(m1);
console.log(m2);
console.log(m3);