Warisan dengan Pengawal Rangsangan

Artikel ini pada asalnya diterbitkan di Rails Designer

---

Bagi saya perkara yang paling indah tentang menggunakan pengawal Rangsangan ialah berikan mereka kepada perkara yang kecil dan khusus. Anda tidak mencipta pengawal besar untuk satu komponen, tetapi mencipta berbilang pengawal Rangsangan yang lebih kecil yang semuanya melakukan perkara kecil mereka sendiri. Dan apabila anda memerlukan perpaduan lagi, anda boleh menggunakan saluran untuk meminta mereka "bercakap bersama".

Tetapi jika anda memerlukan pengawal Rangsangan lain yang mempunyai logik yang bertindih dengan yang lain, anda boleh melakukan dua perkara:

• ekstrak logik ke dalam fungsi berasingan yang anda import; atau,
• gunakan warisan untuk mendapatkan logik daripada pengawal lain.

Warisan adalah perkara yang saya ingin terokai hari ini. Baru-baru ini saya menambahkan komponen tindakan pukal pada pustaka komponen UI. Ini membolehkan pengguna memilih berbilang item daripada senarai dan mereka menggunakan tindakan yang sama kepada mereka semua, mis. Padam Semua. Ini mempunyai beberapa pertindihan dengan komponen kotak pilihan. Kedua-duanya memerlukan tepat logik yang sama untuk memilih item. Untuk Tindakan Pukal, memilih item adalah permulaan; ia kemudian akan menunjukkan "bar tindakan" dengan pembilang.

(lihat artikel asal untuk gif bergerak! ?)

Nota: Artikel ini bukan tentang menambah tindakan pukal dari awal hingga akhir! Untuk itu saya cadangkan untuk melihat Rails Designer (ia juga mempunyai ratusan komponen yang sedia untuk digunakan dalam apl Rails SaaS anda).

Mula-mula mari kita lihat kotak semak_controller.js (yang disertakan dengan Rails Designer lebih terlibat sedikit!).

// 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;
  }

  // …
}

Saya rasa ini cukup mudah untuk diikuti, bukan? Kemudian 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;
  }
}

Habis cepat kod: apabila kotak semakCheckedCountValue berubah (iaitu nilai checkboxes_controller) tetapkan openValue (0 adalah palsu, semua yang lain adalah benar). Cukup mudah! OpenValue kemudiannya digunakan untuk menunjukkan/menyembunyikan bar tindakan.

Anda boleh melihat ia tidak diwarisi daripada Pengawal, tetapi daripada Kotak SemakController yang diimport pada baris ke-2 (bukannya import biasa { Pengawal } daripada "@hotwired/stimulus";).

Tetapi seperti yang tertulis pada masa ini, ini tidak akan mencukupi. checkboxes_controller sebenarnya tidak dieksport dengan betul. Jom buat dulu:

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

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

Jadi bagaimana ini berfungsi? Untuk Ruby (dan Rails) anda boleh mewarisi daripada kelas lain seperti:

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

Rails, atau lebih khusus Zeitwerk, memuatkan kelas secara automatik untuk anda, jadi di atas hanya berfungsi. Dengan apl Ruby biasa, kelas juga tidak dimuatkan secara automatik dan anda perlu melakukannya secara manual.

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

Itu serupa dengan cara JavaScript berfungsi.

Cara anda digunakan untuk menulis pengawal Rangsangan (kelas lalai eksport melanjutkan Pengawal) adalah dengan mencipta kelas tanpa nama yang memanjangkan Pengawal Rangsangan (sama dengan kelas < Integrasi::Base). checkboxes_controller kini ialah kelas bernama yang memanjangkan Stimulus Controller.

Kini ia boleh diimport tanpa masalah dalam pengawal_tindakan_pukal. Dan begitulah caranya ia boleh mewarisi fungsi dan semua logik lain (this.checkboxesCheckedCountValue) daripada checkboxes_controller. Perlu diingat bahawa fungsi peribadi (yang bermula dengan #) tidak boleh digunakan dalam kelas JavaScript lain, yang berbeza daripada kelas Ruby!

Bila hendak menggunakan warisan untuk pengawal Rangsangan

Saya tidak mencapai harta pusaka begitu banyak. Lebih kerap saya mengekstrak logik ke dalam fungsinya sendiri dalam fail lain dan mengimportnya sebaliknya (seperti Ruby's include atau extend). Tetapi kadangkala apabila terdapat 100% pertindihan dengan logik pengawal yang lain dan saya tidak perlu membuat perubahan pada pengawal yang lain, warisan adalah pilihan yang cantik dan bersih.

Jadi untuk meringkaskan:

• jadikan kelas lain yang boleh diimport eksport kelas lalai Kotak SemakController memanjangkan Pengawal;
• kemudian import kelas dalam import pengawal lain CheckboxesController daripada "controllers/checkboxes_controller";;
• kemudian lanjutkan pengawal yang lain menggunakan kelas lalai eksport pengawal yang diimport BulkActionsController memanjangkan CheckboxesController {}.

Anda boleh melihat sintaksnya hampir serupa dengan Ruby, tetapi lebih bertele-tele (tetapi itu benar-benar unik tentang Ruby!).

? Saya bercadang untuk mengeluarkan buku: JavaScript for Rails Developers. Lebih 50 orang sudah membuat pra-pesanan. Adakah anda akan seterusnya? ❤️

Atas ialah kandungan terperinci Warisan dengan Pengawal Rangsangan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!