1 模块化出现的背景
(图片来源于网络)
在 Web 发展的早期,前端还没有作为一个单独的工种分离出来,JavaScript 的作用也只是在 HTML 上 用来实现简单的表单验证,到后来无非实现一些轮播图等简单的视觉效果。一句话来讲,很长时间以来我们的前端很简单,JS 代码也很少。
随着 Web 的发展,Web 应用越来越复杂,诸如淘宝、京东、美团等 Web 应用,其复杂度是极高的。前端的交互、视觉效果、逻辑控制需要编写大量的 JS 代码。前端急需使用工程化的方式来降低 Web 开发和维护成本,对 JS 模块化开发的需求越来越迫切。
2 模块化的意义
- 避免命名冲突。模块化开发中,每个文件是一个模块,模块中定义的变量、函数、类都是该模块的私有变量,不会污染全局变量。同样也不会被全局变量污染。
- 更清晰的依赖关系。在使用或定义一个模块的时候,会显式的声明对模块的引用,文件直接的依赖关系非常清晰,结合 Webpack 等构建工具,更是无需手动处理复杂的依赖关系。
- 高可维护性。每个模块的功能职责单一,需要升级改动部分功能只需要针对具体的模块进行改动,大大提高可维护性。
- 高可复用性。每个功能模块实现后,可以供开发者重复使用,开发者只需要关注本身的业务逻辑的开发,大大提高开发效率。
- 降低复杂度。通过将复杂的应用拆解成多个容易实现的模块,模块化可以降低项目本身