如何理解前端模块化

来源:home1024 分类:JavaScript

在 JavaScript 发展初期,我们并没有前后端分离的说法。我刚开始做 asp.net 或者 jsp 开发的时候,基本就是我一个人承担了所有的开发任务:html 页面、简单的 js 交互逻辑、后端开发、数据库建表以及写文档等。这样做的好处就是我想修改哪就修改哪,不用通知任何人。可是随着前端的发展,前端开发的功能越来越复杂,也有很多后端的功能迁移到前端做(如:各种验证等),js 代码越来越多,增加了后期的维护成本。

使用 script 引入文件:

  1. 增加 http 请求。
  2. 依赖关系比较混乱,易因为引入先后次序的问题报错。
  3. 难以维护,容易牵一发而动全身导致各种奇奇怪怪的问题。

所以我们不得不考虑使用模块化管理前端。

模块化就是将一个复杂的程序按照一定的规则封装成几个模块(文件),并组合在一起。模块内部的数据都是私有化的,只会暴露出几个接口和其他组件通信。

模块化的好处:

  1. 避免命名冲突,减少命名空间污染。
  2. 按需加载。
  3. 提高了代码的复用性。
  4. 减少了维护成本等。

当然,模块化也有弊端。

  1. 增加开发成本,开发周期长。
  2. 模块的加载是单独请求或者统一打包成一个文件请求(打包成一个文件易造成首次加载慢的问题)。
  3. 兼容性问题等。