刺激控制器的继承

本文最初发表于 Rails Designer

---

对我来说，使用 Stimulus 控制器最美妙的事情就是让它们处理小而具体的事情。您不会为一个组件创建一个大控制器，而是创建多个较小的 Stimulus 控制器，它们都做自己的小事情。当你需要更多凝聚力时，你可以利用渠道让他们“一起说话”。

但是如果您需要另一个具有与另一个重叠的逻辑的 Stimulus 控制器，您可以做两件事：

• 将逻辑提取到您导入的单独函数中；或者，
• 使用继承从其他控制器获取逻辑。

继承是我今天想探讨的内容。最近我向 UI 组件库添加了一个批量操作组件。这允许用户从列表中选择多个项目，并对所有项目应用相同的操作，例如。 全部删除。这与复选框组件有相当多的重叠。两者都需要完全相同相同的逻辑来选择项目。对于批量操作，选择项目是开始；然后它会显示带有计数器的“操作栏”。

（动图请看原文！？）

注意：本文并不是从头到尾添加批量操作！为此，我建议查看 Rails Designer（它还有数百个组件可供您在 Rails SaaS 应用程序中使用）。

首先让我们看看checkboxes_controller.js（Rails Designer 中包含的那个有点复杂！）。

// app/javascript/controllers/checkboxes_controller.js
import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static values = { checkboxesCheckedCount: Number };

  selectAll() {
    this.setCheckboxesTo(true);
  }

  deselectAll() {
    this.setCheckboxesTo(false);
  }

  setCheckboxesTo(boolean) {
    const checkboxes = this.checkboxes
      .filter(checkbox => !checkbox.disabled)
      .forEach(checkbox => checkbox.checked = boolean);

    this.checkboxesCheckedCountValue = checkboxes.length;
  }

  // …
}

我认为这很简单，对吧？然后是 bulk_actions_controller.js:

// app/javascript/controllers/bulk_actions_controller.js
import CheckboxesController from "controllers/checkboxes_controller";

export default class BulkActionsController extends CheckboxesController {
  static values = { open: Boolean };

  // private

  checkboxesCheckedCountValueChanged() {
    this.openValue = this.checkboxesCheckedCountValue;
  }
}

快速运行代码：当 checkboxesCheckedCountValue 更改时（这是 checkboxes_controller 的值） 设置 openValue（0 为 false，其他均为 true）。够简单的！然后使用 openValue 显示/隐藏操作栏。

你可以看到它不是继承自Controller，而是继承自第二行导入的CheckboxesController（而不是典型的 import { Controller } from "@hotwired/stimulus";）。

但正如目前所写的，这还不够。 checkboxes_controller 实际上没有正确导出。让我们先这样做：

import { Controller } from "@hotwired/stimulus";

// Was: `export default class extends Controller {`
export default class CheckboxesController extends Controller {
  // …
}

那么这是如何运作的呢？对于 Ruby（和 Rails），您可以从另一个类继承，如下所示：

class User < ApplicationRecord
class Integration::Netlify < Integration::Base
# etc.

Rails，或更具体地说 Zeitwerk，会为您自动加载类，因此上面的内容就可以工作。对于典型的 Ruby 应用程序，类也不会自动加载，您需要手动加载。

require "application_record"
require "integration/base"
# etc.

这与 JavaScript 的工作原理类似。

用于编写 Stimulus 控制器（导出默认类扩展 Controller）的方法是创建一个扩展 Stimulus 控制器的匿名类（类似于类 <:base>checkboxes_controller 现在是一个扩展刺激控制器的命名类。

现在可以在 bulk_actions_controller 中毫无问题地导入。这就是它如何从 checkboxes_controller 继承函数和所有其他逻辑 (this.checkboxesCheckedCountValue)。请记住，私有函数（以 # 开头的函数）不能在其他 JavaScript 类中使用，这与 Ruby 类不同！

何时对 Stimulus 控制器使用继承

我并不太追求继承。更多时候，我将逻辑提取到另一个文件中其自己的函数中，然后导入它（就像 Ruby 的 include 或extend 一样）。但有时，当与其他控制器的逻辑 100% 重叠并且我不必对其他控制器进行更改时，继承是一个可爱而干净的选择。

总结一下：

• 使其他类可导入导出默认类CheckboxesController扩展Controller;
• 然后在另一个控制器中导入该类 import CheckboxesController from "controllers/checkboxes_controller";;
• 然后使用导入的控制器导出默认类 BulkActionsController extends CheckboxesController {} 来扩展另一个控制器。

您可以看到语法与 Ruby 非常相似，但更详细（但这确实是 Ruby 的独特之处！）。

？我计划出版一本书：JavaScript for Rails Developers。已有超过 50 人预订。下一个会是你吗？ ❤️

以上是刺激控制器的继承的详细内容。更多信息请关注PHP中文网其他相关文章！