本文已参与「新人创作礼」活动，一起开启掘金创作之路。

什么是模块化？

到底什么是模块化、模块化开发呢？

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

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

模块化的历史

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

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

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

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

所以，模块化已经是JavaScript一个非常迫切的需求：

但是JavaScript本身，直到ES6（2015）才推出了自己的模块化方案；
在此之前，为了让JavaScript支持模块化，涌现出了很多不同的模块化规范：AMD、CMD、CommonJS等；

没有模块化带来的问题

早期没有模块化带来了很多的问题：比如命名冲突的问题

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>

  <body>
    <script src="./format/index.js"></script>
    <script src="./math/index.js"></script>
    <script src="./main.js"></script>
  </body>

</html>

var info = 'format'

var info = 'math'

console.log(info)

当在浏览器中打开index.html时，我们会发现控制台打印的info为math，这是因为根据js文件的加载顺序，后面加载的js文件在执行的时候会将其它文件中重复声明的变量重新赋值。

当然，我们有办法可以解决上面的问题：立即函数调用表达式（IIFE）

IIFE (Immediately Invoked Function Expression）

使用立即调用函数表达式来改写我们上面的代码：

var moduleFormat = (function() {
  var info = 'format'
  return {
    info
  }
})()

var moduleMath = (function() {
  var info = 'math'
  return {
    info
  }
})()

console.log(moduleFormat.info); // format
console.log(moduleMath.info); // math

这样，我们就能分别去调用不同部分中的变量而互不影响了，可以认为实现了模块化。

但是，我们其实带来了新的问题：

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

所以，我们会发现，虽然实现了模块化，但是我们的实现过于简单，并且是没有规范的：

我们需要制定一定的规范来约束每个人都按照这个规范去编写模块化的代码；
这个规范中应该包括核心功能：模块本身可以导出暴露的属性，模块又可以导入自己需要的属性
JavaScript社区为了解决上面的问题，涌现出一系列好用的规范（CommonJS，AMD，CMD，ESModule）；

JS中为什么需要模块化

什么是模块化？

模块化的历史

没有模块化带来的问题