复杂表单实战：我在项目里踩过的 Vue 坑

wuwenzen@outlook.com (wuwj) — Tue, 18 Jun 2019 00:00:00 +0000

表单是前端最常见、也最容易写成一坨的东西。简单表单随便放几个 v-model 都能跑，一旦字段多起来、存在动态联动、跨步校验，代码就开始失控。

这篇文章基于我做过的一个"几十个字段 + 多步 + 条件显示"的表单项目，总结一些在 Vue 里踩过的坑和解决方案。

需求背景：一个略显「超标」的表单

当时的表单大概长这样：

3 个步骤：基础信息 → 业务信息 → 确认提交
每步有 8～15 个字段
部分字段需要「根据上一步选择动态显示或隐藏」
有跨字段校验（比如：结束日期 ≥ 开始日期）
需要支持「草稿保存」+「再次打开自动回填」

如果一股脑全写在一个组件里，大概会出现：

data 里一个巨大的 form = { ... }。
各种 watch 做联动逻辑。
methods 里各种 validateXXX，互相依赖。
维护成本爆炸。

核心思路：拆数据结构 + 拆 UI + 拆校验

1. 数据结构要先定清楚

我一般会在一开始，就写出一个完整的 formModel：

const defaultForm = () => ({
  basic: {
    name: '',
    idNo: '',
    phone: '',
  },
  business: {
    type: '',
    amount: null,
    startDate: '',
    endDate: '',
  },
  extra: {
    agree: false,
    comment: '',
  },
});

在组件里：

JavaScript 模块化那些事：从 IIFE 到 ES Modules

wuwenzen@outlook.com (wuwj) — Sun, 10 Mar 2019 00:00:00 +0000

最早写前端的时候，经常是一个 index.html 里塞一大坨 <script>，变量到处飞，函数名一改项目全崩。后来慢慢开始接触各种模块化方案，从 IIFE、AMD、CommonJS 一路走到 ES Modules，心态也经历了从凑合能用到必须有规范。

这篇就当是给自己的一个小总结：为什么需要模块化、几种常见写法的区别、现在应该怎么写。

为什么要模块化？

几个非常现实的问题：

全局变量名冲突：不同文件里不小心定义了同名变量/函数。
依赖关系混乱：这个文件依赖谁？要先引哪个 <script>？
代码难以拆分复用：逻辑越写越大，一改就牵一大片。
测试困难：无法只「拿出一小块」单独测试。

所以模块化要解决的就是：

把代码按职责拆成「小块」 + 明确每块对外暴露什么 + 明确依赖关系。

第一阶段：IIFE 模式（自执行函数）

当时 jQuery 时代最常见的一种写法，就是用自执行函数「造一个自己的小世界」。

(function () {
  const API_URL = '/api/todos';

  function fetchTodos() {
    return fetch(API_URL).then(res => res.json());
  }

  function renderTodos(list) {
    // 渲染逻辑...
  }

  window.todoApp = {
    init() {
      fetchTodos().then(renderTodos);
    },
  };
})();

特点：

用 IIFE 隔离出一个作用域，避免变量污染全局。
需要暴露给外面的东西挂在 window.todoApp 上。
所有代码其实还是在一个文件里，没有真正意义上的「依赖管理」。

适合：小项目 / 简单封装。
不适合：多页面、多模块的大型项目。

第二阶段：AMD / RequireJS

再往后，就出现了 AMD（Asynchronous Module Definition），代表是 RequireJS。

前端基础 on Saiga