Javascript中的模块化详解

1.什么是模块化、模块化开发？

事实上模块化开发最终的目的是将程序划分成一个个小的结构；
这个结构中编写属于自己的逻辑代码，有自己的作用域，不会影响到其他的结构；
这个结构可以将自己希望暴露的变量、函数、对象等导出给其结构使用；
也可以通过某种方式，导入另外结构中的变量、函数、对象等；

上面说提到的 结构 ，就是 模块 ；按照这种 结构划分 开发程序的过程，就是 模块化开发 的过程；

2.JavaScript模块化的历史

在网页开发的早期， Brendan Eich 开发JavaScript仅仅作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码还是很少的：

这个时候我们只需要讲JavaScript代码写到<script>标签中即可；
并没有必要放到多个文件中来编写；甚至流行：通常来说 JavaScript 程序的长度只有一行。

但是随着前端和JavaScript的快速发展，JavaScript代码变得越来越复杂了：

ajax的出现，前后端开发分离，意味着后端返回数据后，我们需要通过JavaScript进行前端页面的渲染；
SPA的出现，前端页面变得更加复杂：包括前端路由、状态管理等等一系列复杂的需求需要通过JavaScript来实现；
包括Node的实现，JavaScript编写复杂的后端程序，没有模块化是致命的硬伤；

所以，模块化已经是JavaScript一个非常迫切的需求：但是JavaScript本身，直到 ES6 （2015）才推出了自己的模块化方案；在此之前，为了让JavaScript支持模块化，涌现出了很多不同的模块化规范： AMD、CMD、CommonJS 等。

3.没有模块化带来的问题

早期没有模块化带来了很多的问题：比如命名冲突的问题
当然，我们有办法可以解决上面的问题：立即函数调用表达式（IIFE）
IIFE (Immediately Invoked Function Expression)
但是，我们其实带来了新的问题：

第一，我必须记得每一个模块中返回对象的命名，才能在其他模块使用过程中正确的使用；
第二，代码写起来混乱不堪，每个文件中的代码都需要包裹在一个匿名函数中来编写；
第三，在没有合适的规范情况下，每个人、每个公司都可能会任意命名、甚至出现模块名称相同的情况；

所以，我们会发现，虽然实现了模块化，但是我们的实现过于简单，并且是没有规范的。
我们需要制定一定的规范来约束每个人都按照这个规范去编写模块化的代码；这个规范中应该包括核心功能：模块本身可以导出暴露的属性，模块又可以导入自己需要的属性；
JavaScript社区为了解决上面的问题，涌现出一系列好用的规范，接下来我们就学习具有代表性的一些规范。

4.CommonJs

exports和module.exports可以负责对模块中的内容进行导出；
require函数可以帮助我们导入其他模块（自定义模块、系统模块、第三方库模块）中的内容；

4.1 export和module.export导出

最终导出的是module.export对象，export是对module.export的引用，可以往export上面添加属性，但是不能直接给export赋值一个新对象，这样不能正确的导出。

javascript 复制代码

// why.js
const name = "why"
const age = 18
let friend = {
 name:'哈哈',
 age:18
}
function sum(num1, num2) {
  return num1 + num2
}

// 第一种导出方式
exports.name = name
exports.age = age
export.friend = friend

// 第二种导出方式
module.exports = {
  name,age,friend
}

// 这种代码不会进行导出
exports = {
   name,
   age,
   sum
}

// 最终能导出的一定是module.exports

4.2 require()导入

javascript 复制代码

// main.js
const why = require("./why.js")
console.log(why.name)
console.log(why.age)

上面这行完成了什么操作呢？理解下面这句话，Node中的模块化一目了然

而在使用require导入模块时，实际上是将导出模块中的module.exports变量浅拷贝到当前模块的作用域中。
当不同的文件中使用require导入相同的模块时，它们实际上是拥有各自独立的模块实例，彼此之间不会共享模块中的变量。
当导出模块中的module.exports变量是基本数据类型时，源模块和导入模块修改这个变量不会互相影响。

javascript 复制代码

// foo.js
setTimeout(() => {
  module.exports = "我改了"
}, 1000)
module.exports = "我还没改"

// main.js
const foo = require("./foo.js")
console.log(foo) //我还没改
setTimeout(() => {
  console.log(foo) //我还没改
}, 2000)

当导出模块中的module.exports变量是引用数据类型时，源模块和导入模块都指向同一个内存空间，修改了之后会互相影响

4.3 require()的查找规则

导入格式如下：require(X)
情况一 ：X是一个Node核心模块，比如path、http ，直接返回核心模块，并且停止查找
情况二：X是以 ./ 或 ../ 或 /（根目录）开头的
第一步：将X当做一个文件在对应的目录下查找；
1.如果有后缀名，按照后缀名的格式查找对应的文件
2.如果没有后缀名，会按照如下顺序：

直接查找文件X
查找X.js文件
查找X.json文件
查找X.node文件

第二步：没有找到对应的文件，将X作为一个目录，查找目录下面的index文件

查找X/index.js文件
查找X/index.json文件
查找X/index.node文件

如果没有找到，那么报错：not found
情况三: 直接是一个X（没有路径），并且X不是一个核心模块
会现在当前目录的node_modules下查找是否有这个文件，如果没有找到则去上一级目录查找，如果找到了直接返回，没有找到再去上一级目录查找，直到找到根目录下的node_modules，如果上面的路径中都没有找到，那么报错：not found
例如：
在这个目录的main.js文件中：
/Users/coderwhy/Desktop/Node/TestCode/04_learn_node/05_javascript-module/02_commonjs/main.js
编写 require('why')
查找的路径如下：

4.4 模块的加载过程

1.模块的加载是同步的
**2.模块在被第一次引入时，**模块中的js代码会被运行一次

为什么只会加载运行一次呢？

这是因为每个模块对象module都有一个属性：loaded，为false表示还没有加载，为true表示已经加载；

3.模块被多次引入时，会缓存，最终只加载（运行）一次
4.如果有循环引入，那么加载顺序是****深度优先算法

如果出现上图模块的引用关系，那么加载顺序是什么呢？

这个其实是一种数据结构：图结构；
图结构在遍历的过程中，有深度优先搜索（DFS, depth first search）和广度优先搜索（BFS,breadth first search）；
Node采用的是深度优先算法：main -> aaa -> ccc -> ddd -> eee ->bbb

4.5 CommonJS规范缺点

CommonJS加载模块是 同步的：

同步的意味着只有等到对应的模块加载完毕，当前模块中的内容才能被运行；
这个在服务器不会有什么问题，因为服务器加载的js文件都是本地文件，加载速度非常快；

如果将它应用于浏览器呢？

浏览器加载js文件需要先从服务器将文件下载下来，之后再加载运行；
那么采用同步的就意味着后续的js代码都无法正常运行，即使是一些简单的DOM操作；

所以在浏览器中，我们通常不使用CommonJS规范：
当然在webpack中使用CommonJS是另外一回事，因为它会将我们的代码转成浏览器可以直接执行的代码；
在早期为了可以 在浏览器中使用模块化，通常会采用AMD或CMD ：
但是目前一方面现代的浏览器已经支持ES Modules ，另一方面借助于webpack等工具可以实现对CommonJS或者ES Module代码的转换； AMD和CMD已经使用非常少了

5.ES Module

ES Module模块采用 export 和 import 关键字来实现模块化：

export负责将模块内的内容导出；
import负责从其他模块导入内容；

另一方面它采用编译期的静态分析，并且也加入了动态引用的方式；

5.1 exports导出关键字

export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。export语句输出的接口，与其对应的值是动态绑定关系，通过该接口，可以取到模块内部实时的值，即当变量的值发生变化，接口的值也会实时的发生变化。

javascript 复制代码

// foo.js
// 导出方式一:export 声明语句
export const name = "why"
export const age = 18
export function foo() {
   console.log("foo function")
 }

// 导出方式二:export 导出 和 声明分开
const name = "哈哈"
const age = "18"
export {name, age} //声明了对外的接口name,age,和模块内的变量一一对应

// 导出方式三: 第二种导出时起别名
 export {
   name as fName,
   age as fAge,
   foo as fFoo
 }

// 导出方式四：默认导出,一个模块的默认导出只能有一个
export default name

最后，export命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错，下一节的import命令也是如此。这是因为处于条件代码块之中，就没法做静态优化了，违背了 ES6 模块的设计初衷。

javascript 复制代码

function foo() {
  export default 'bar' // SyntaxError
}
foo()

5.2 import 导入关键字

import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同。

javascript 复制代码

// main.js
// 1.导入方式一: 普通的导入
import { name, age, foo } from "./foo.js"
import { fName, fAge, fFoo } from './foo.js'

// 2.导入方式二: 起别名
import { name as fName, age as fAge, foo as fFoo } from './foo.js'

// 3.导入方式三: 将导出的所有内容放到一个标识符中
import * as foo from './foo.js'

// 4.导入方式四：默认导入可以自己起名字
import myName from './foo.js'

import命令输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面，改写接口。

javascript 复制代码

import {a} from './xxx.js'

a = {}; // Syntax Error : 'a' is read-only;

上面代码中，脚本加载了变量a，对其重新赋值就会报错，因为a是一个只读的接口。但是，如果a是一个对象，改写a的属性是允许的。

javascript 复制代码

import {a} from './xxx.js'

a.foo = 'hello'; // 合法操作

上面代码中，a的属性可以成功改写，并且其他模块也可以读到改写后的值。不过，这种写法很难查错，建议凡是输入的变量，都当作完全只读，不要轻易改变它的属性。

5.3 import和export混合使用

javascript 复制代码

// 1.导出方式一:
import { add, sub } from './math.js'
import { timeFormat, priceFormat } from './format.js'

export {
   add,
   sub,
   timeFormat,
   priceFormat
 }

// 2.导出方式二:
 export { add, sub } from './math.js'
 export { timeFormat, priceFormat } from './format.js'

// 3.导出方式三:
export * from './math.js'
export * from './format.js'

5.4 模块加载过程

import命令会被 JavaScript 引擎静态分析，先于模块内的其他语句执行

当JavaScript引擎执行代码时，会在编译阶段对import语句进行静态分析，确定所导入的模块，并在运行时加载这些模块。

在使用import导入模块时，实际上是在模块内部创建了一个指向被导入模块的引用，而不是直接复制模块中的变量。因此，当不同的文件中使用import导入相同的模块时，它们实际上是共享了同一个模块实例，所以可以访问和修改同一个模块中的变量。

JS 引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用 。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。原始值变了，import加载的值也会跟着变。因此，ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。

5.5 import() 函数实现动态加载

ES6的模块不是对象，import 命令会被 JavaScript 引擎静态分析，在编译时就引入模块代码，而不是在代码运行时加载，所以无法实现条件加载。也正因为这个，使得静态分析成为可能。

这样的设计，固然有利于编译器提高效率，但也导致无法在运行时加载模块。在语法上，条件加载就不可能实现。如果import命令要取代 Node 的require方法，这就形成了一个障碍。因为require是运行时加载模块，import命令无法取代require的动态加载功能。

动态加载 ，require到底加载哪一个模块，只有运行时才知道。

ES2020提案引入import()函数，支持动态加载模块。

javascript 复制代码

import(specifier)

上面代码中，import函数的参数specifier，指定所要加载的模块的位置。import命令能够接受什么参数，import()函数就能接受什么参数，两者区别主要是后者为动态加载。

import()函数可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用。它是运行时执行，也就是说，什么时候运行到这一句，就会加载指定的模块。另外，import()函数与所加载的模块没有静态连接关系，这点也是与import语句不相同。import()类似于 Node 的require方法，区别主要是前者是异步加载，后者是同步加载。

import()加载模块成功以后，这个模块会作为一个对象，当作then方法的参数。因此，可以使用对象解构赋值的语法，获取输出接口。

javascript 复制代码

import('./myModule.js')
.then(({export1, export2}) => {
  // ...·
});

上面代码中，export1和export2都是myModule.js的输出接口，可以解构获得。

如果模块有default输出接口，可以用参数直接获得。

javascript 复制代码

import('./myModule.js')
.then(myModule => {
  console.log(myModule.default);
});

6.ES6 模块与 CommonJS 模块的差异

相同点：

只有在第一个导入的时候会执行源模块的代码，重复导入不会再执行

不同点：

CommonJS 模块输出的是一个值的浅拷贝，ES6 模块输出的是值的引用。

CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

7.AMD

这种方案采用异步加载的方式来加载模块，模块的加载不影响后面语句的执行，所有依赖这个模块的语句都定义在一个 回调函数里，等到加载完成后再执行回调函数。
require.js实现AMD规范的模块化：
用 require.config() 指定引用路径等，用 define() 定义模块，用 **require()**加载模块。

javascript 复制代码

// main.js
// index.html 网页中引入require.js及main.js 
<script src="js/require.js" data-main="js/main"></script>

// 首先用config()指定各模块路径和引用名
require.config({
  baseUrl: './src',
  paths: {
    foo: "foo", // 实际路径为./src/foo
    bar: "bar"
  }
})
// 引用模块的时候，我们将模块名放在[ ]中作为requier()的第一参数
require(["foo", "bar"], function(foo) {
  console.log("main:", foo)
})

javascript 复制代码

// foo.js
define(function() {
  const name = "why"
  const age = 18
  function sum(num1, num2) {
    return num1 + num2
  }
  return {
    name,
    age,
    sum
  }
})

如果我们定义的模块本身也依赖其他模块,那就需要将它们放在[ ]中作为define()的第一参数。

javascript 复制代码

// bar.js
define(["foo"], function(foo) {
  console.log("bar:", foo)
  const name = "bar"
  return { name }
})

AMD 在依赖模块加载完成后就 直接执行依赖模块，依赖模块的执行顺序和我们书写的顺序不一定一致，并且即使在回调函数里面没有用到该模块，也会加载执行。

javascript 复制代码

define(["a", "b", "c", "d", "e", "f"], function(a, b, c, d, e, f) { 
    // 等于在最前面声明并初始化了要用到的所有模块
    if (false) {
      // 即便没用到某个模块 b，但 b 还是提前执行了
      b.foo()
    } 
});

8.CMD

这种方案采用异步加载的方式来加载模块, CMD 在依赖模块 加载完成后并不执行 ，只是下载而已，等到所有的依赖模块都加载好后，进入回调函数逻辑， 遇到 require 语句的时候才执行对应的模块，这样模块的执行顺序就和我们书写的顺序保持一致了。
sea.js实现了 CMD 规范。它和require.js的区别在于对依赖模块的执行时机的处理不同。

javascript 复制代码

// 定义模块 math.js
define(function(require, exports, module) {
    var a = require('./a'); //遇到require语句时，才会执行对于模块的代码
    a.doSomething();
    if (false) {
        var b = require('./b'); // 该语句不会执行，所以./b对应的模块也不会执行
        b.doSomething();
    }
   let add = function(a,b){
        return a+b;
    }
    exports.add = add; // 导出add
});

javascript 复制代码

// 加载模块
seajs.use(['math.js'], function(math){
    var sum = math.add(1+2);
});

参考：

一文了解js中导入模块import、import()和require()的区别 - 掘金 (juejin.cn)