JavaScript 中的模块化

封面图说明：© Michael J. Kochniss | mjk-photo.de | instagram.com/mjk_photo

在早期，JavaScript 程序主要用来实现一些页面上的动画或者简单的交互，所以程序不会太复杂，页面也不会有太多的 JavaScript 代码，前端在 JavaScript 程序中还没有模块化开发的需要。但是随着应用的复杂度增加，为增强代码的可维护性，提升应用的加载性能，前端开发对 JavaScript 模块化开发的需求愈发强烈。本文将按照 JavaScript 模块化开发的演进历程逐一介绍在社区被采用过的不同模块化方案。

什么是模块化

模块化是一种将系统分离成独立功能部分的方法，可将系统分割成独立的功能部分，严格定义模块接口、模块间具有透明性。
简单来说就是我们在开发应用的时候，通常会根据不同的功能分割成不同的模块来开发，开发完成后再按照特定的方式组合成一个整体，最终完成整个应用系统功能的开发。
JavaScript 的模块化开发，能帮助我们解决在开发过程中遇到的全局变量污染问题，函数命名冲突问题，以及依赖关系不好处理的问题，还有代码复用性问题。

无模块化开发

最原始的 JavaScript 程序开发就是没有模块化的概念的，在一个页面中，不管有多少功能，要写多少代码，我们都把代码写到一个或者几个JS 文件中，然后页面通过 script 标签引入相关 JS 文件。当页面功能比较复杂的时候，或者需要不同开发者协同进行同一功能开发的时候，就难免会遇到全局变量污染和命名冲突的问题，再者就是功能非常复杂的时候，写的代码量也会比较多，从外部引入到页面的 JS 文件数量也越来越多，如果没有管理和组织好代码以及代码的依赖关系，后期维护将变得非常被动。