Corak Reka Bentuk JavaScript: Corak Observer

Titik utama corak pemerhati JavaScript

Corak pemerhati dalam JavaScript membolehkan data satu-ke-banyak mengikat antara unsur-unsur, yang amat berguna untuk menjaga pelbagai elemen disegerakkan dengan data yang sama.
Corak Observer mengandungi tiga kaedah utama:
• (tambah peristiwa baru yang dapat dilihat), subscribe (keluarkan semua peristiwa menggunakan data terikat). unsubscribe broadcast menggunakan ciri -ciri ES6 seperti kelas, fungsi anak panah, dan pemalar secara berkesan dapat melaksanakan corak pemerhati, menjadikan kod lebih mudah dan mudah digunakan semula.
• Mod pemerhati boleh digunakan untuk menyelesaikan masalah praktikal dalam JavaScript, seperti mengemas kini bilangan perkataan dalam catatan blog di setiap kekunci dan boleh dipertingkatkan lagi untuk membina ciri -ciri baru.
Dalam JavaScript, sering terdapat masalah: kaedah diperlukan untuk mengemas kini sebahagian halaman sebagai tindak balas kepada peristiwa tertentu dan menggunakan data yang disediakan oleh peristiwa tersebut. Sebagai contoh, pengguna memasuki dan kemudian memproyeksikannya menjadi satu atau lebih komponen. Ini menyebabkan banyak operasi menolak dan menarik dalam kod untuk memastikan segala -galanya disegerakkan. Di sinilah corak reka bentuk pemerhati dapat membantu-ia melaksanakan data satu-ke-banyak yang mengikat antara unsur-unsur. Pengikatan data sehala ini boleh didorong oleh acara. Dengan corak ini, anda boleh membina kod yang boleh diguna semula untuk menangani keperluan khusus anda. Dalam artikel ini, saya ingin meneroka corak reka bentuk pemerhati. Ia akan membantu anda menyelesaikan masalah biasa yang sering anda hadapi dalam skrip pelanggan. Itu adalah satu-ke-banyak, satu arah dan mengikat yang didorong oleh peristiwa. Masalah ini sering berlaku apabila anda mempunyai banyak elemen yang perlu disegerakkan. Saya akan menggunakan Ecmascript 6 untuk menggambarkan corak ini. Ya, akan ada kelas, fungsi anak panah dan pemalar. Jika anda tidak biasa dengannya, anda boleh meneroka topik ini sendiri. Saya hanya akan menggunakan bahagian yang memperkenalkan gula sintaksis dalam ES6, jadi ia juga boleh berfungsi dengan ES5 jika diperlukan. Saya akan menggunakan Pembangunan Didorong Ujian (TDD) untuk mengendalikan corak ini. Dengan cara ini, anda boleh tahu bagaimana setiap komponen digunakan. Ciri -ciri bahasa baru dalam ES6 menjadikan kod lebih ringkas. Jadi, mari kita mulakan.

Event Observer

Pandangan lanjutan mod ini adalah seperti berikut:

Selepas menghuraikan mod pemerhati, saya akan menambah ciri pengiraan perkataan yang menggunakannya. Komponen kiraan perkataan akan menggunakan pemerhati ini dan mengintegrasikan semuanya bersama -sama. Untuk memulakan

<code>EventObserver
│ 
├── subscribe: 添加新的可观察事件
│ 
├── unsubscribe: 移除可观察事件
│
└── broadcast: 使用绑定数据执行所有事件</code>

, lakukan yang berikut:

EventObserver

Mulailah dengan senarai peristiwa pemerhatian yang kosong, dan setiap contoh baru melakukannya. Mulai sekarang, mari kita tambahkan lebih banyak cara untuk menyempurnakan corak reka bentuk dalam

<code class="language-javascript">class EventObserver {
  constructor() {
    this.observers = [];
  }
}</code>

.

EventObserver

Kaedah melanggan

Untuk menambah acara baru, lakukan yang berikut:

Dapatkan senarai peristiwa pemerhatian dan tolak item baru ke dalam array. Senarai acara adalah senarai fungsi panggil balik. Salah satu cara untuk menguji kaedah ini dalam JavaScript tulen adalah seperti berikut:

<code class="language-javascript">subscribe(fn) {
  this.observers.push(fn);
}</code>

<code>EventObserver
│ 
├── subscribe: 添加新的可观察事件
│ 
├── unsubscribe: 移除可观察事件
│
└── broadcast: 使用绑定数据执行所有事件</code>

Saya menggunakan pernyataan nod untuk menguji komponen ini dalam nod. Penegasan yang sama juga wujud dalam pernyataan chai. Perhatikan bahawa senarai acara pemerhatian terdiri daripada panggilan balik mudah. Kami kemudian menyemak panjang senarai dan menegaskan bahawa panggilan balik berada dalam senarai.

Kaedah berhenti berlangganan

Untuk membuang acara, lakukan yang berikut:

<code class="language-javascript">class EventObserver {
  constructor() {
    this.observers = [];
  }
}</code>

Tapis apa sahaja yang sepadan dengan fungsi panggil balik dari senarai. Sekiranya tidak ada perlawanan, panggilan balik akan kekal dalam senarai. Penapis mengembalikan senarai baru dan menetapkan semula senarai pemerhati. Untuk menguji kaedah yang baik ini, lakukan perkara berikut:

<code class="language-javascript">subscribe(fn) {
  this.observers.push(fn);
}</code>

Panggilan balik mesti sepadan dengan fungsi yang sama dalam senarai. Jika perlawanan wujud, kaedah unsubscribe membuangnya dari senarai. Perhatikan bahawa ujian menggunakan rujukan fungsi untuk menambah dan mengeluarkannya.

Kaedah penyiaran

untuk memanggil semua acara, lakukan yang berikut:

<code class="language-javascript">// Arrange
const observer = new EventObserver();
const fn = () => {};

// Act
observer.subscribe(fn);

// Assert
assert.strictEqual(observer.observers.length, 1);</code>

Ini akan melangkah ke atas senarai peristiwa pemerhatian dan melaksanakan semua panggilan balik. Dengan ini anda boleh mendapatkan hubungan satu-ke-banyak yang anda perlukan untuk melanggan acara. Anda boleh lulus dalam parameter data, yang menjadikan data panggilan balik mengikat. ES6 menggunakan fungsi anak panah untuk menjadikan kod lebih cekap. Ambil perhatian bahawa fungsi (subscriber) => subscriber(data) kebanyakannya berfungsi. Fungsi anak panah satu baris ini mendapat manfaat daripada sintaks ES6 pendek ini. Ini adalah peningkatan yang ketara dalam bahasa pengaturcaraan JavaScript. Untuk menguji kaedah broadcast ini:

<code class="language-javascript">unsubscribe(fn) {
  this.observers = this.observers.filter((subscriber) => subscriber !== fn);
}</code>

Gunakan let bukan const supaya kita dapat mengubah nilai pembolehubah. Ini menjadikan pembolehubah berubah, membolehkan saya menetapkan semula nilainya dalam panggilan balik. Gunakan let dalam kod anda untuk memberi isyarat kepada pengaturcara lain bahawa pembolehubah berubah pada satu ketika. Ini meningkatkan kebolehbacaan dan kejelasan kod JavaScript. Ujian ini memberi saya keyakinan yang cukup untuk memastikan pemerhati berfungsi seperti yang diharapkan. Dengan TDD, ini semua tentang membina kod yang boleh diguna semula dalam JavaScript tulen. Terdapat banyak faedah untuk menulis kod yang boleh diuji dalam JavaScript tulen. Uji segala -galanya dan simpan apa yang bermanfaat untuk penggunaan semula kod. Dengan ini, kami telah menyempurnakannya. Persoalannya, apa yang boleh anda bina dengannya? EventObserver

aplikasi praktikal mod pemerhati: Demonstrasi kiraan perkataan blog

Untuk demo, sudah tiba masanya untuk membuat catatan blog yang menyimpan kiraan perkataan untuk anda. Setiap kekunci yang anda masukkan akan disegerakkan oleh corak reka bentuk pemerhati. Fikirkannya sebagai input teks percuma, di mana setiap acara mencetuskan kemas kini ke mana anda memerlukannya untuk pergi. Untuk mendapatkan kiraan perkataan dari input teks percuma, anda boleh melakukan perkara berikut:

<code class="language-javascript">// Arrange
const observer = new EventObserver();
const fn = () => {};

observer.subscribe(fn);

// Act
observer.unsubscribe(fn);

// Assert
assert.strictEqual(observer.observers.length, 0);</code>

selesai! Terdapat banyak kandungan dalam fungsi tulen yang seolah -olah mudah ini, jadi bagaimana dengan ujian unit mudah? Dengan cara ini, niat saya jelas:

<code>EventObserver
│ 
├── subscribe: 添加新的可观察事件
│ 
├── unsubscribe: 移除可观察事件
│
└── broadcast: 使用绑定数据执行所有事件</code>

Sila ambil perhatian rentetan input yang sedikit pelik dalam blogPost. Matlamat saya adalah untuk mempunyai fungsi ini meliputi seberapa banyak kes kelebihan yang mungkin. Selagi ia memberi saya kiraan perkataan yang betul, kita pergi ke arah yang betul. Dengan cara ini, ini adalah kuasa sebenar TDD. Pelaksanaan ini boleh diulang dan meliputi kes -kes penggunaan sebanyak mungkin. Ujian unit memberitahu anda bagaimana saya mengharapkan ia berkelakuan. Sekiranya tingkah laku itu cacat, mudah untuk melangkah dan menyesuaikannya dengan alasan apa pun. Dengan menguji, tinggalkan bukti yang cukup untuk orang lain untuk membuat perubahan. Sudah tiba masanya untuk menyambungkan komponen yang boleh diguna semula ini ke DOM. Ini adalah bahagian yang anda ambil JavaScript dan solder yang tulen ke dalam penyemak imbas anda. Salah satu cara ialah menggunakan HTML berikut pada halaman:

<code class="language-javascript">class EventObserver {
  constructor() {
    this.observers = [];
  }
}</code>

maka terdapat JavaScript berikut:

<code class="language-javascript">subscribe(fn) {
  this.observers.push(fn);
}</code>

Dapatkan semua kod yang boleh diguna semula dan tetapkan mod reka bentuk Observer. Ini akan menjejaki perubahan di kawasan teks dan memberi anda kiraan perkataan di bawahnya. Saya menggunakan body.appendChild() dalam API DOM untuk menambah elemen baru ini. Kemudian, pendengar acara dilampirkan untuk membawanya ke kehidupan. Ambil perhatian bahawa menggunakan fungsi anak panah boleh menyambungkan satu baris peristiwa. Malah, anda boleh menggunakannya untuk menyiarkan perubahan yang didorong oleh acara kepada semua pelanggan. () => blogObserver.broadcast() Kebanyakan kerja telah dilakukan di sini. Ia juga melepasi perubahan terkini ke kawasan teks terus ke fungsi panggil balik. Ya, skrip pelanggan cukup keren. Tiada demo yang anda boleh sentuh dan menyesuaikan selesai, inilah codepen: (pautan codepen harus dimasukkan di sini, yang tidak dapat disediakan kerana ketidakupayaan untuk mengakses laman web luaran)

Sekarang, saya tidak akan memanggil ciri ini ciri penuh. Tetapi ini hanya titik permulaan untuk corak reka bentuk pemerhati. Soalan dalam fikiran saya, sejauh mana anda bersedia pergi?

Looking forward

anda boleh mengembangkan idea ini lebih lanjut. Anda boleh menggunakan corak reka bentuk pemerhati untuk membina banyak ciri baru. Anda boleh meningkatkan demo menggunakan kaedah berikut:

• Komponen lain mengira bilangan perenggan
• Komponen lain memaparkan pratonton teks input
• Pratonton yang dipertingkatkan dengan sokongan markdown, mis

Ini hanya beberapa idea yang boleh anda cari. Peningkatan di atas akan mencabar keupayaan pengaturcaraan anda.

Kesimpulan

Corak reka bentuk pemerhati boleh membantu anda menyelesaikan masalah praktikal dalam JavaScript. Ini menyelesaikan masalah jangka panjang untuk menjaga sekumpulan elemen selaras dengan data yang sama. Biasanya, apabila penyemak imbas mencetuskan peristiwa tertentu. Saya percaya kebanyakan anda mempunyai masalah ini sekarang dan telah beralih kepada alat dan kebergantungan pihak ketiga. Corak reka bentuk ini membolehkan anda pergi sejauh mungkin. Dalam pengaturcaraan, anda abstrak penyelesaian ke dalam corak dan membina kod yang boleh diguna semula. Manfaat yang akan dibawa kepada anda tidak berkesudahan. Saya harap anda dapat melihat berapa banyak kerja yang boleh anda lakukan dalam JavaScript tulen dengan hanya sedikit disiplin dan usaha. Ciri -ciri baru dalam bahasa, seperti ES6, boleh membantu anda menulis beberapa kod ringkas dan boleh diguna semula.

(FAQ untuk corak pemerhati JavaScript harus dimasukkan di sini, tetapi disebabkan oleh batasan ruang, ia telah ditinggalkan.)

Atas ialah kandungan terperinci Corak Reka Bentuk JavaScript: Corak Observer. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!