Pola desain dalam pengembangan JavaScript modern

Penulis materi, terjemahan yang kami terbitkan, mengatakan bahwa dalam dunia pengembangan perangkat lunak, "desain arsitektur" dapat disebut proses membangun aplikasi, di mana mereka berusaha untuk membuatnya berkualitas tinggi, dapat diandalkan, dan dapat menerima dukungan. Selain itu, pola desain (pola) memungkinkan Anda untuk beroperasi dengan konsep yang merupakan pendekatan untuk memecahkan masalah umum. Keputusan-keputusan ini dapat bervariasi dari abstrak, konseptual, hingga sangat spesifik. Pengetahuan mereka memungkinkan pengembang untuk berkomunikasi secara efektif satu sama lain.

Jika setidaknya dua pengembang dalam tim memahami pola, berbicara tentang menyelesaikan masalah yang dihadapi tim menjadi sangat produktif. Jika hanya satu anggota tim yang tahu tentang polanya, biasanya hanya terjadi untuk memperjelas apa yang dia ketahui kepada anggota tim yang lain.



Tujuan artikel ini adalah untuk menarik minat pembaca dengan semacam presentasi formal pengetahuan di bidang pengembangan perangkat lunak, menunjukkan kepada mereka ide pola desain dan menggambarkan beberapa pola yang menarik karena mereka menemukan aplikasi dalam pengembangan JavaScript modern.

Pola singleton

▍ Umum

Pola desain "singleton" (juga disebut "singleton") tidak dapat disebut sebagai salah satu pola yang paling banyak digunakan, tetapi kami memulai percakapan dengannya, karena relatif mudah dipahami.

Pola ini tumbuh dari konsep matematika singleton - himpunan singleton, yaitu himpunan yang hanya mengandung satu elemen. Sebagai contoh, set {null} adalah singleton.

Dalam bidang pengembangan perangkat lunak, makna dari pola "singleton" bermuara pada kenyataan bahwa kita membatasi jumlah instance yang mungkin dari kelas tertentu untuk satu objek. Pada upaya pertama untuk membuat objek berdasarkan kelas yang mengimplementasikan pola ini, objek seperti itu sebenarnya dibuat. Semua upaya berikutnya untuk membuat instance kelas akan mengembalikan objek yang dibuat selama upaya pertama untuk mendapatkan instance kelas.


Kenapa superhero lain kalau kita punya Batman?

Di atas adalah contoh kelas yang mengimplementasikan pola singleton.

▍ Mengapa dibutuhkan?

Jelas bahwa pola ini memungkinkan kita membatasi diri hanya pada satu "pahlawan super" (ini jelas Batman). Tapi mengapa lagi dia membutuhkannya?

Meskipun pola ini bukan tanpa masalah sendiri (sebelumnya disebut jahat, mengingat fakta bahwa singleton disebut pembohong patologis ), itu, dalam beberapa situasi, bisa sangat berguna. Salah satu situasi ini adalah menginisialisasi objek konfigurasi. Dalam aplikasi tipikal, masuk akal untuk menyimpan hanya satu instance dari objek seperti itu, kecuali, sesuai dengan fitur proyek, beberapa objek serupa digunakan di dalamnya.

Here Di mana menggunakannya?

Contoh utama penggunaan pola singleton dalam kerangka kerja populer yang besar adalah layanan Angular. Dokumentasi Angular memiliki halaman terpisah yang menjelaskan bagaimana membuat layanan menjadi singleton.

Desain layanan dalam bentuk singletones membawa makna yang dalam, karena layanan digunakan sebagai repositori keadaan, konfigurasi, dan memungkinkan Anda untuk mengatur interaksi antar komponen. Semua ini mengarah pada fakta bahwa pengembang perlu sehingga aplikasinya tidak akan memiliki beberapa contoh layanan yang sama.

Pertimbangkan sebuah contoh. Misalkan kita memiliki aplikasi sederhana yang digunakan untuk menghitung jumlah klik pada tombol.


Setiap klik pada salah satu tombol memperbarui penghitung

Jumlah klik pada tombol harus disimpan dalam satu objek, yang mengimplementasikan fitur-fitur berikut:

• Ini memungkinkan Anda menghitung klik pada tombol.
• Memungkinkan untuk membaca nilai penghitung klik saat ini.

Jika objek seperti itu bukan singleton (dan setiap tombol memiliki turunannya sendiri dari objek tersebut), program akan secara keliru menghitung jumlah klik pada tombol. Selain itu, dengan pendekatan ini, perlu untuk menyelesaikan masalah berikut: "Dari objek mana yang bertanggung jawab untuk menghitung klik yang akan diambil data yang ditampilkan pada layar?"

Pola Pengamat

▍ Umum

Pola pengamat adalah pola desain di mana objek yang disebut subjek memelihara daftar objek dependen yang disebut pengamat dan secara otomatis memberi tahu mereka ketika keadaannya berubah, biasanya dengan memanggil salah satu metode mereka .

Memahami pola ini tidak sulit jika Anda menemukan analoginya di dunia nyata. Yaitu, kita berbicara tentang langganan koran.

Misalkan Anda biasanya membeli koran di kios. Anda pergi ke sana, menanyakan apakah ada masalah baru dari surat kabar favorit Anda. Jika yang Anda butuhkan tidak ada di kios, maka Anda pulang, membuang waktu dan pergi ke kios lagi. Jika kita menganggap situasi ini sebagai yang diterapkan pada JavaScript, maka itu akan seperti poling siklus beberapa entitas, dilakukan hingga data yang diperlukan diterima darinya.

Setelah, ketika Anda akhirnya mendapatkan koran yang Anda butuhkan, Anda bisa mulai dengan apa yang selama ini Anda perjuangkan - ambil secangkir kopi dan buka lipatan koran. Dalam JavaScript, ini sama saja dengan menelepon callback, yang akan kami panggil setelah mendapatkan hasil yang diinginkan.


Akhirnya Anda bisa membaca koran

Akan jauh lebih masuk akal untuk melakukan ini: berlangganan koran dan terima edisi terbarunya setiap hari. Dengan pendekatan ini, penerbit akan memberi tahu Anda bahwa edisi baru surat kabar telah dirilis dan mengirimkannya kepada Anda. Anda tidak perlu pergi ke kios lagi. Tidak ada lagi waktu yang terbuang.

Jika Anda beralih ke JavaScript lagi, ini berarti Anda tidak lagi harus menunggu di loop untuk beberapa hasil, dan, setelah menerimanya, panggil fungsi tertentu. Alih-alih, Anda memberi tahu subjek bahwa Anda tertarik pada peristiwa tertentu (pesan), dan meneruskan fungsi panggilan balik ke sana, yang seharusnya dipanggil saat data yang diinginkan siap. Anda, dalam hal ini, menjadi pengamat.


Sekarang Anda tidak akan pernah ketinggalan koran pagi favorit Anda

Pola tersebut memiliki satu fitur yang bagus: Anda tidak harus menjadi satu-satunya pengamat. Jika Anda tidak bisa mendapatkan surat kabar favorit, itu akan membuat Anda marah. Tetapi hal yang sama akan terjadi pada orang lain yang tidak dapat membelinya. Itulah sebabnya beberapa pengamat dapat berlangganan satu subjek.

▍ Mengapa dibutuhkan?

Pola "pengamat" digunakan dalam banyak situasi, tetapi biasanya itu harus digunakan ketika Anda ingin membuat hubungan satu-ke-banyak antara objek, dan pada saat yang sama, objek tersebut tidak harus terhubung dengan kuat. Selain itu, sistem harus dapat memberi tahu objek yang jumlahnya tidak terbatas tentang perubahan tertentu.

Aplikasi JavaScript adalah tempat yang tepat untuk menerapkan pola pengamat, karena semuanya didorong oleh peristiwa di sini, dan alih-alih secara konstan merujuk pada entitas tertentu untuk mencari tahu apakah suatu peristiwa yang menarik bagi Anda telah terjadi, akan jauh lebih baik untuk membiarkannya memberi tahu Anda saat terjadinya acara ini (ini mirip dengan pepatah lama: "Jangan panggil kami. Bila perlu, kami akan memanggil Anda sendiri").

Kemungkinan Anda telah menggunakan desain yang menyerupai pola pengamat. Misalnya, ini adalah addEventListener . Menambahkan pendengar acara ke elemen memiliki semua tanda menggunakan pola pengamat:

• Anda dapat berlangganan objek.
• Anda dapat berhenti berlangganan dari objek.
• Objek dapat menginformasikan semua pelanggan tentang acara tersebut.

Sangat berguna untuk mengetahui tentang keberadaan pola "pengamat" dalam arti bahwa pengetahuan ini memungkinkan Anda untuk merealisasikan subjek Anda sendiri, atau jauh lebih cepat dari sebelumnya, untuk mencari solusi yang ada dengan menggunakan pola ini.

Here Di mana menggunakannya?

Implementasi dasar dari pola ini tidak harus sangat rumit, tetapi ada perpustakaan yang sangat baik yang mengimplementasikannya dan digunakan dalam banyak proyek. Kita berbicara tentang proyek ReactiveX , dan versi JavaScript RxJS-nya .

Pustaka RxJS memungkinkan tidak hanya berlangganan subjek, tetapi juga memberi programmer kemampuan untuk mengubah data dalam berbagai cara, memungkinkan Anda untuk menggabungkan banyak langganan, meningkatkan kemampuan untuk mengelola operasi asinkron. Selain itu, kemampuannya tidak terbatas pada ini. Jika Anda ingin meningkatkan kemampuan program Anda untuk memproses dan mengonversi data ke tingkat yang lebih tinggi, maka Anda dapat merekomendasikan untuk mempelajari perpustakaan RxJS.

Selain pola "pengamat", proyek ReactiveX dapat bangga dengan penerapan pola "iterator", yang memungkinkan subjek untuk memberi tahu pelanggan tentang penyelesaian langganan, pada dasarnya, memungkinkan untuk membatalkan langganan atas inisiatif subjek. Dalam artikel ini saya tidak akan berbicara tentang pola "iterator", tetapi saya dapat mengatakan bahwa jika Anda baru mulai mempelajari pola desain, mempelajari pola ini dan berpikir tentang bagaimana ia menyusun dengan pola "pengamat" bisa menjadi latihan yang baik.

Pola Fasad

▍ Umum

Pola fasad mendapatkan namanya dari arsitektur. Dalam arsitektur, fasad biasanya merupakan salah satu sisi luar bangunan, biasanya bagian depan. Bahasa Inggris meminjam kata "fasad" dari bahasa Prancis. Kita berbicara tentang kata "façade", yang, antara lain, diterjemahkan sebagai "sisi depan bangunan."

Fasad bangunan dalam arsitektur adalah bagian luar bangunan, menyembunyikan apa yang ada di dalamnya. Properti serupa dapat dicatat dalam pola "fasad", karena ditujukan untuk menyembunyikan mekanisme internal yang kompleks di balik antarmuka eksternal tertentu. Aplikasinya memungkinkan pengembang untuk bekerja dengan API eksternal, diatur dengan cukup sederhana, dan, pada saat yang sama, menyediakan kemampuan untuk mengubah mekanisme internal yang tersembunyi di balik fasad, tanpa mengganggu kinerja sistem.

▍ Mengapa dibutuhkan?

Pola "fasad" dapat digunakan dalam sejumlah besar situasi, di antaranya dapat kita catat secara khusus ketika mereka mencoba untuk membuat kode lebih mudah dipahami (yaitu, mereka menyembunyikan mekanisme rumit di balik API sederhana), dan ketika fragmen sistem cenderung membuat sebanyak mungkin lebih longgar terhubung satu sama lain.


Benda-benda ini membutuhkan sesuatu dari sarang naga.

Sangat mudah untuk melihat bahwa objek fasad (atau lapisan dengan beberapa objek) adalah abstraksi yang sangat berguna. Tidak mungkin ada orang yang mau bertemu naga jika ini bisa dihindari. Objek fasad diperlukan untuk menyediakan objek lain dengan API yang nyaman, dan objek ini akan mengatasi semua trik naga sendiri.

Fitur lain yang berguna dari pola "fasad" adalah bahwa naga dapat "dibuat kembali" seperti yang diinginkan, tetapi ini tidak akan mempengaruhi bagian lain dari aplikasi. Misalkan Anda ingin mengganti naga dengan anak kucing. Anak kucing, seperti naga, memiliki cakar, tetapi lebih mudah diberi makan. Ubah naga menjadi anak kucing - artinya - untuk menulis ulang kode objek fasad tanpa membuat perubahan pada objek dependen.

Here Di mana menggunakannya?

Pola fasad sering ditemukan di Angular. Di sana, layanan digunakan sebagai sarana untuk menyederhanakan beberapa logika dasar. Tetapi pola ini berlaku tidak hanya di Angular, di bawah ini Anda dapat melihat ini.

Misalkan kita perlu menambahkan sistem manajemen negara ke aplikasi. Untuk mengatasi masalah ini, Anda dapat menggunakan berbagai alat, di antaranya - Redux, NgRx, Akita, MobX, Apollo, dan - alat baru yang terus muncul. Mengapa tidak mencoba semuanya?
Apa fungsi utama yang harus disediakan oleh perpustakaan manajemen negara? Ini mungkin fitur-fitur berikut:

• Suatu mekanisme untuk memberitahukan sistem manajemen negara bahwa kita perlu mengubah keadaan.
• Mekanisme untuk mendapatkan status saat ini atau fragmennya.

Itu semua terlihat tidak terlalu buruk.

Sekarang, dengan dipersenjatai dengan pola "fasad", Anda dapat menulis fasad untuk bekerja dengan berbagai bagian negara, menyediakan API yang nyaman yang dapat digunakan dalam program. Misalnya, sesuatu seperti facade.startSpinner() , facade.stopSpinner() dan facade.getSpinnerState() . Metode seperti itu mudah dipahami, Anda dapat dengan mudah merujuknya dalam percakapan tentang program tersebut.

Setelah itu, Anda dapat bekerja dengan objek yang menerapkan pola "fasad" dan menulis kode yang akan mengubah kode Anda sehingga dapat bekerja dengan Apollo (mengelola negara dengan GraphQL adalah topik hangat). Mungkin selama tes Anda akan menemukan bahwa Apollo tidak cocok untuk Anda, atau bahwa Anda tidak nyaman menulis unit test berdasarkan sistem manajemen negara bagian ini. Tidak masalah - tulis fasad baru yang dirancang untuk mendukung MobX, dan coba sistem lagi.


Sistem yang berbeda untuk mengelola keadaan aplikasi, diakses melalui fasad tunggal, juga dapat menjadi ...

Ringkasan

Anda mungkin memperhatikan bahwa ketika kami berbicara tentang pola desain, kami tidak mempertimbangkan contoh kode. Faktanya adalah bahwa analisis mendalam dari masing-masing pola menarik setidaknya bab terpisah jauh dari buku tertipis. Ngomong-ngomong, karena kita berbicara tentang buku, di sini kami memiliki publikasi menarik yang dapat Anda lihat bagi mereka yang ingin mempelajari studi pola.

Pada akhirnya, saya ingin mengatakan bahwa dalam pengembangan pola, tidak ada yang mengalahkan pencarian di Internet, membaca dan secara independen menguji berbagai ide. Bahkan jika ternyata Anda tidak akan pernah menggunakan pola, Anda akan memahami sesuatu yang baru dan belajar tentang mereka dan tumbuh di daerah yang tidak terduga untuk Anda.

Pembaca yang budiman! Pola desain apa yang Anda gunakan?