刺激控制器的繼承-js教程-PHP中文網

本文原刊於 Rails Designer

對我來說，使用 Stimulus 控制器最美妙的事情就是讓它們處理小而具體的事情。您不會為一個元件建立一個大控制器，而是建立多個較小的 Stimulus 控制器，它們都做自己的小事。當你需要更多凝聚力時，你可以利用管道讓他們「一起說話」。

但是如果您需要另一個具有與另一個重疊的邏輯的 Stimulus 控制器，您可以做兩件事：

將邏輯提取到您匯入的單獨函數中；或者，
使用繼承從其他控制器取得邏輯。

繼承是我今天要探討的內容。最近我為 UI 元件庫新增了一個批次操作元件。這允許使用者從清單中選擇多個項目，並對所有項目應用相同的操作，例如。 全部刪除。這與複選框組件有相當多的重疊。兩者都需要完全相同相同的邏輯來選擇項目。對於批次操作，選擇項目是開始；然後它會顯示帶有計數器的「操作欄」。

Inheritance with Stimulus Controller
（動圖請看原文！？）

注意：本文並不是從頭到尾加入大量操作！為此，我建議查看 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中文網其他相關文章！