StimulusJS：如何确保控制器拥有全部必要目标？

首先纠正你代码里的一个错误：connect方法中的that应该改为this，否则会因变量未定义报错。

下面是几种更地道、简洁的解决方案：

方案1：使用Stimulus内置的requiredTargets（推荐） #

Stimulus本身提供了requiredTargets静态属性，用于声明必须存在的目标。控制器连接时，Stimulus会自动检查这些目标是否存在，缺失时直接抛出清晰的错误，无需手动编写判断逻辑：

export default class extends Controller {
  static targets = ['name'];
  static requiredTargets = ['name'];
}

如果name目标缺失，Stimulus会抛出类似这样的错误：

Error: Missing required target "name" for controller "your-controller-identifier"

方案2：直接访问目标触发自动报错 #

如果你只需要检查单个目标，最简单的方式是在connect中直接访问xxxTarget属性——Stimulus在访问单个目标时，若目标不存在会自动抛出错误：

export default class extends Controller {
  static targets = ['name'];

  connect() {
    // 访问nameTarget，不存在则自动报错
    this.nameTarget;
  }
}

错误信息示例：

Error: Missing target "name" for controller "your-controller-identifier"

方案3：封装通用检查逻辑（适用于多控制器复用） #

如果需要自定义错误信息，或者多个控制器都需要类似的检查逻辑，可以封装一个基础控制器，子类继承后复用检查逻辑：

// 基础控制器，封装目标检查逻辑
export default class BaseController extends Controller {
  connect() {
    super.connect();
    this._validateRequiredTargets();
  }

  _validateRequiredTargets() {
    const requiredTargets = this.constructor.requiredTargets;
    if (!requiredTargets) return;

    requiredTargets.forEach(target => {
      const hasTarget = this[`has${target.charAt(0).toUpperCase() + target.slice(1)}Target`];
      if (!hasTarget) {
        throw new Error(`控制器 "${this.identifier}" 缺少必需目标: "${target}"`);
      }
    });
  }
}

// 业务控制器，继承基础控制器并声明必需目标
export default class extends BaseController {
  static targets = ['name', 'email'];
  static requiredTargets = ['name'];
}

这种方式可以灵活定制错误信息，同时避免重复编写检查代码。

内容的提问来源于stack exchange，提问作者Nikita Fedyashev