자극 컨트롤러를 사용한 상속

이 기사는 원래 Rails Designer에 게시되었습니다

---

저에게 Stimulus 컨트롤러를 사용하면서 가장 아름다운 점은 작고 구체적인 것들에 대한 것입니다. 하나의 구성 요소에 대해 큰 컨트롤러를 만드는 것이 아니라 모두 자체적으로 작은 작업을 수행하는 여러 개의 작은 Stimulus 컨트롤러를 만듭니다. 그리고 좀 더 결속력이 필요한 경우 아웃렛을 사용하여 "함께 대화"하도록 할 수 있습니다.

하지만 다른 자극 컨트롤러와 겹치는 로직이 있는 또 다른 Stimulus 컨트롤러가 필요한 경우 다음 두 가지 작업을 수행할 수 있습니다.

• 가져오는 별도의 함수로 논리를 추출합니다. 아니면
• 다른 컨트롤러에서 논리를 얻으려면 상속을 사용하세요.

오늘 제가 탐구하고 싶은 것은 상속입니다. 최근에 UI 구성 요소 라이브러리에 대량 작업 구성 요소를 추가했습니다. 이를 통해 사용자는 목록에서 여러 항목을 선택하고 모든 항목에 동일한 작업을 적용할 수 있습니다. 모두 삭제. 이는 체크박스 구성요소와 상당히 겹치는 부분이 있습니다. 둘 다 항목을 선택하려면 정확한 동일한 논리가 필요했습니다. 대량 작업의 경우 항목을 선택하는 것이 시작이었습니다. 그러면 카운터가 있는 "작업 표시줄"이 표시됩니다.

(움직이는 gif는 원문을 참고하세요! ?)

참고: 이 문서는 처음부터 끝까지 일괄 작업을 추가하는 것에 관한 것이 아닙니다! 이를 위해서는 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/자극"; 대신).

그러나 현재 작성된 내용으로는 이것만으로는 충분하지 않습니다. 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.

자바스크립트의 작동 방식과 비슷합니다.

자극 컨트롤러(기본 클래스 확장 컨트롤러 확장)를 작성하는 데 사용되는 방법은 자극 컨트롤러를 확장하는 익명 클래스(클래스 < Integration::Base와 유사)를 생성하는 것입니다. checkboxes_controller는 이제 Stimulus Controller를 확장하는 명명된 클래스입니다.

이제 bulk_actions_controller에서 문제 없이 가져올 수 있습니다. 이것이 바로 checkboxes_controller에서 함수와 기타 모든 로직(this.checkboxesCheckedCountValue)을 상속할 수 있는 방법입니다. 비공개 함수(#으로 시작하는 함수)는 Ruby 클래스와 달리 다른 JavaScript 클래스에서 사용할 수 없다는 점을 명심하세요!

Stimulus 컨트롤러에 상속을 사용하는 경우

나는 상속을 그다지 많이 얻지 못합니다. 더 자주 나는 논리를 다른 파일의 자체 함수로 추출하고 대신 가져옵니다(Ruby의 포함 또는 확장과 같은). 그러나 때로는 다른 컨트롤러의 로직과 100% 겹치는 경우가 있고 다른 컨트롤러를 변경할 필요가 없는 경우 상속은 훌륭하고 깔끔한 옵션입니다.

요약하자면:

• 다른 클래스를 가져오기 가능하게 만듭니다. 내보내기 기본 클래스 CheckboxesController는 Controller를 확장합니다.
• 그런 다음 "controllers/checkboxes_controller"에서 CheckboxesController를 가져오는 다른 컨트롤러의 클래스를 가져옵니다;;
• 그런 다음 가져온 컨트롤러 내보내기 기본 클래스 BulkActionsController 확장 CheckboxesController {}를 사용하여 다른 컨트롤러를 확장합니다.

구문은 Ruby와 매우 유사하지만 더 장황하다는 것을 알 수 있습니다(하지만 이는 Ruby에서 정말 독특합니다!).

? 나는 Rails 개발자를 위한 JavaScript라는 책을 출판할 계획입니다. 벌써 50명이 넘게 사전예약을 했네요. 다음은 당신인가요? ❤️

위 내용은 자극 컨트롤러를 사용한 상속의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!