四、JavaScript、ES6中高级写法你会吗（吾日三省吾身）

嗨！我是浮生code，一个努力向上爬的蜗牛程序员。关注我！！！带你每天向上爬🐌🐌🐌。

可能一些人面试中会遇到面试官问，前端中什么是AMD和CMD？接下来让我们进入正题（话不多说）

1. 什么是模块化

模块化，是一种将代码按照一定规则组织成独立、可复用的单元的方式。模块化可以将一个复杂的系统分解为多个独立的模块，每个模块只关注自己的功能，与其他模块之间的耦合度低，从而提高代码的可维护性、复用性和扩展性。

2. 模块化方案

在 ES6 前， 实现模块化使用的是seaJS 或者 RequireJS （分别是基于 CMD 规范的模块化库 ，  和基于AMD 规范的模块化库）。 

ES6 引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。ES6 的模块化分为导出（export） @与导入（import）两个模块。

2.1） CommonJS

CommonJS 是 Node.js 中使用的模块化方案，它定义了 require() 和 module.exports 两个函数，可以通过这两个函数导入和导出模块。

//module.js
const obj = {
  name: "贾宝玉",
  age: 23,
  say: function() {
    console.log("我的名字是： " + this.name);
  }
}
module.exports = obj

//main.js
const obj = require("./module")
console.log(obj.name);//贾宝玉
obj.say();//我的名字是：贾宝玉

2.2 ）CMD

CMD（Common Module Definition）是另一种模块化方案，它与 AMD 类似，但有一些不同之处。

AMD 是在模块定义时就进行依赖的声明和模块的加载，而 CMD 是在模块执行时才进行依赖的声明和模块的加载。

在 CMD 中，模块的加载是通过 require 函数实现的，该函数接收一个模块标识符和一个回调函数作为参数。当模块的依赖项都加载完成后，回调函数会被执行。例如：

//module1.js  无依赖模块
define(function(require, exports, module) {
  const name = "宝玉"
  module.exports = {
    name
  }
});

//module2.js  依赖module1.js
define(function(require, exports, module) {
  const m1 = require('./module1')
  function fullName() {
    return `贾${m1.name}`
  }
  module.exports = {
    fullName
  }
});

//main.js  引入模块
define(function(require, exports, module){
  const m1 = require('./module1')
  const m2 = require('./module2')
  console.log("module1 --- ", m1, "     module2 --- ", m2.fullName());
  //module1 --- 宝玉   module2 --- 贾宝玉
})

<!-- index.html  引入seajs库 --> 
<script src="./lib/sea.js"></script>
<script>
  seajs.use("./main")
</script>

2.3 ）AMD

AMD（Asynchronous Module Definition） 是一种异步加载模块的方案，它采用异步加载方式，在加载模块时不会阻塞页面渲染。RequireJS 是 AMD 的一个实现。

在 AMD 规范中，一个模块需要通过 define 函数来定义，define 函数接收三个参数：

• 模块 ID：一个可选的字符串，用于指定模块的唯一标识符；

• 依赖列表：一个数组，指定该模块依赖的其他模块；

• 模块定义函数：一个函数，用于定义该模块的行为。

//module1.js   无依赖模块
define("module1", function() {
  const name = "宝玉"
  return {name}
});

//module2.js   依赖module1.js
define("module2",["module1"], function(m1) {
  function fullName() {
    return `贾${m1.name}`
  }
  return { fullName }
});

//main.js 
require.config({
  path: {
    module1: "./module1",
    module2: "./module2"
  }
})
require(["module1", "module2"], function(m1, m2){
  console.log("module1 --- ", m1, "     module2 --- ", m2.fullName());
  //module1 --- 宝玉   module2 --- 贾宝玉
})

<!-- index.html  引入requirejs库 --> 
<script data-main="./main.js" src="./lib/require.js"></script>

2.4） ES6 Module

ES6 Module是 JavaScript 中官方支持的模块化方案，它采用 import 和 export 关键字导入和导出模块。ES6 模块化支持静态分析，在编译时就能够确定模块的依赖关系，因此可以进行更加高效的打包和压缩。

//module.js
// 导出模块
const a = 1;
const b = 2;
export { a, b };

// 导入模块
import { a, b } from './module.js';
export const c = a + b;