从 jQuery 到模块化：一次前端工程意识的转变

wuwenzen@outlook.com (wuwj) — Fri, 20 Dec 2019 00:00:00 +0000

背景

在较早阶段的前端开发中，常见技术栈以 jQuery + 传统页面结构 为主。
这种模式在页面数量有限、业务逻辑简单时，具备实现成本低、交付速度快的优势。

但随着功能逐步增多、页面之间产生联动，代码结构问题开始显现，对可维护性提出了更高要求。

var list = [];
function init() {}
function render() {}

常见问题包括：

在缺乏结构约束的情况下：

相似功能在不同页面中往往通过复制实现：

为缓解上述问题，开始尝试在不依赖复杂工具链的前提下，引入基础的模块化设计思想。

js/
├── api.js
├── render.js
├── event.js
└── main.js

通过人为约定实现基础分层：

即使不依赖构建工具，也能显著提升代码可读性。

(function () {
  var state = {};
  function init() {}
  window.pageInit = init;
})();

这种方式在早期用于：