Cara Menggunakan Pola Desain JavaScript

Pola desain JavaScript memberikan solusi yang terbukti untuk masalah umum dalam pengembangan perangkat lunak. Memahami dan menerapkan pola ini akan memungkinkan Anda menulis kode JavaScript yang lebih baik dan lebih efisien.

Pengantar Pola Desain JavaScript

Konsep yang terkandung dalam pola desain JavaScript berfungsi untuk memandu Anda tentang cara mengatasi masalah umum yang akan Anda hadapi sebagai pengembang JavaScript.

Anda harus memahami abstraksi yang mendasari di balik pola, sehingga Anda dapat menerapkannya pada masalah khusus Anda. Anda juga harus dapat mengidentifikasi kapan salah satu dari pola tersebut dapat berguna untuk kode Anda.

Pola Modul

Pola Modul, yang menyediakan enkapsulasi, adalah bagian dari Sistem modul JavaScript. Ini menyediakan cara untuk mengamankan data dan perilaku pribadi dalam modul sambil mengekspos API publik. Ini memungkinkan Anda membuat objek modul mandiri dengan tingkat akses pribadi dan publik.

Ini sedikit seperti bagaimana Anda bisa gunakan pengubah akses pada kelas dalam bahasa seperti Java atau C++.

Dalam JavaScript, Anda dapat mengimplementasikan pola Modul menggunakan penutupan.

Dengan menggunakan penutupan untuk menyertakan anggota pribadi (fungsi, variabel, data), Anda membuat ruang lingkup di mana anggota ini dapat diakses tetapi tidak secara langsung terpapar ke dunia luar. Ini membantu mencapai enkapsulasi, menjaga detail internal tersembunyi dari kode eksternal.

Selain itu, mengembalikan API publik dari penutupan memungkinkan akses pribadi ke fungsi atau properti tertentu yang ingin Anda tampilkan sebagai bagian dari antarmuka modul.

Ini akan memberi Anda kendali atas bagian mana dari modul yang dapat diakses ke bagian lain dari basis kode. Itu mempertahankan batas yang jelas antara fungsi publik dan pribadi.

Ini contohnya:

const ShoppingCartModule = (fungsi () {
// Data pribadi
membiarkan keranjangItem = [];
// Metode pribadi
fungsimenghitungTotalItem() {
kembali cartItems.mengurangi((keseluruhan, barang) => total + item.jumlah, 0);
 }
// API Publik
kembali {
 addItem (item) {
 cartItems.push (item);
 },
 getTotalItems() {
kembali hitungTotalItems();
 },
 clearCart() {
 keranjangItem = [];
 }
 };
})();
// Contoh penggunaan
ShoppingCartModule.addItem({ nama: 'Produk 1', kuantitas: 2 });
ShoppingCartModule.addItem({ nama: 'Produk 2', kuantitas: 1 });
menghibur.log (ShoppingCartModule.getTotalItems()); // Keluaran: 3
ShoppingCartModule.clearCart();
menghibur.log (ShoppingCartModule.getTotalItems()); // Keluaran: 0

Dalam contoh ini, ShoppingCartModul mewakili modul yang dibuat menggunakan pola modul. Eksekusi kode berjalan seperti ini:

1. Itu IIFE membungkus seluruh blok kode, membuat fungsi yang segera dieksekusi setelah deklarasi. Ini menetapkan ruang lingkup pribadi untuk anggota modul.
2. cartItems adalah array pribadi. Itu tidak dapat diakses langsung dari luar modul.
3. hitungTotalItems() adalah metode pribadi yang menghitung jumlah item dalam keranjang. Ini menggunakan mengurangi() metode untuk iterate selama cartItems array dan jumlah jumlah semua item.
4. Modul mengembalikan API publiknya sebagai literal objek, menampilkan tiga metode publik: Tambahkan Barang(), getTotalItems(), Dan clearCart().
5. Di luar modul, Anda dapat mengakses metode publik modul untuk berinteraksi dengan fungsionalitas keranjang belanja.

Contoh ini menunjukkan bagaimana pola modul memungkinkan Anda untuk mengenkapsulasi data pribadi (cartItems) dan perilaku (menghitungTotalItem) di dalam modul sambil menyediakan antarmuka publik (Tambahkan Barang, getTotalItems, Dan clearCart) untuk berinteraksi dengan modul.

Pola Pengamat

Pola Pengamat menetapkan ketergantungan satu-ke-banyak antara objek. Ketika keadaan satu objek berubah, itu memberi tahu semua tanggungannya, dan mereka memperbarui secara otomatis. Pola ini sangat berguna untuk mengelola interaksi yang digerakkan oleh peristiwa atau memisahkan komponen dalam suatu sistem.

Dalam JavaScript, Anda dapat mengimplementasikan pola Pengamat menggunakan addEventListener bawaan, dispatchEvent metode, atau apapun mekanisme penanganan acara. Dengan berlangganan pengamat ke acara atau subjek, Anda dapat memberi tahu dan memperbaruinya saat peristiwa tertentu terjadi.

Misalnya, Anda dapat menggunakan pola Observer untuk mengimplementasikan sistem notifikasi sederhana:

// Implementasi pola pengamat
fungsiSistem Pemberitahuan() {
// Daftar pelanggan
ini.pelanggan = [];
// Metode untuk berlangganan notifikasi
ini.langganan = fungsi (pelanggan) {
ini.subscribers.push (pelanggan);
 };
// Metode untuk berhenti berlangganan notifikasi
ini.berhenti berlangganan = fungsi (pelanggan) {
const indeks = ini.subscribers.indexOf (pelanggan);
jika (indeks !== -1) {
ini.subscribers.splice (indeks, 1);
 }
 };
// Metode untuk memberi tahu pelanggan
ini.beri tahu = fungsi (pesan) {
ini.pelanggan.untukEach(fungsi (pelanggan) {
 subscriber.receiveNotification (pesan);
 });
 };
}
// Objek pelanggan
fungsiPelanggan(nama) {
// Metode untuk menerima dan menangani notifikasi
ini.receiveNotification = fungsi (pesan) {
menghibur.log (nama + ' menerima pemberitahuan: ' + pesan);
 };
}
// Contoh penggunaan
const sistem notifikasi = baru Sistem Pemberitahuan();
// Buat pelanggan
const pelanggan1 = baru Pelanggan('Pelanggan 1');
const pelanggan2 = baru Pelanggan('Pelanggan 2');
// Berlangganan pelanggan ke sistem notifikasi
notificationSystem.subscribe (subscriber1);
notificationSystem.subscribe (subscriber2);
// Beri tahu pelanggan
notificationSystem.notify('Pemberitahuan baru!');

Tujuannya di sini adalah untuk memungkinkan banyak pelanggan menerima pemberitahuan ketika peristiwa tertentu terjadi.

Itu Sistem Pemberitahuan fungsi mewakili sistem yang mengirimkan pemberitahuan, dan Pelanggan fungsi mewakili penerima notifikasi.

NotificationSystem memiliki larik yang disebut pelanggan untuk menyimpan pelanggan yang ingin menerima notifikasi. Itu langganan metode memungkinkan pelanggan untuk mendaftar dengan menambahkan diri mereka sendiri ke array pelanggan. Itu berhenti berlangganan metode akan menghapus pelanggan dari array.

Itu memberitahu metode di NotificationSystem beralih melalui array pelanggan dan memanggil terimaPemberitahuan metode pada setiap pelanggan, yang memungkinkan mereka untuk menangani notifikasi.

Instance dari fungsi Subscriber mewakili pelanggan. Setiap pelanggan memiliki metode acceptNotification yang menentukan cara mereka menangani notifikasi yang diterima. Dalam contoh ini, metode mencatat pesan yang diterima ke konsol.

Untuk menggunakan pola pengamat, buat instance NotificationSystem. Anda kemudian dapat membuat instance Pelanggan dan menambahkannya ke sistem notifikasi menggunakan metode berlangganan.

Mengirimkan notifikasi akan memicu metode acceptNotification untuk setiap pelanggan, dan mencatat pesan untuk setiap pelanggan.

Pola Pengamat memungkinkan sambungan longgar antara sistem notifikasi dan pelanggan, memungkinkan fleksibilitas. Pola tersebut mempromosikan pemisahan perhatian yang akan membuat pemeliharaan dalam sistem yang digerakkan oleh kejadian menjadi lebih mudah.

Menggunakan Pola JavaScript Tingkat Lanjut

Berikut ini beberapa kiat umum untuk menggunakan pola JavaScript tingkat lanjut secara efektif:

• Pertimbangkan implikasi kinerja: Pola tingkat lanjut dapat menimbulkan kerumitan tambahan, yang dapat memengaruhi kinerja. Perhatikan implikasi kinerja dan optimalkan bila perlu.
• Hindari anti-pola: Pahami pola secara menyeluruh dan hindari jatuh ke dalam anti-pola atau menyalahgunakannya. Gunakan pola yang masuk akal dan selaras dengan kebutuhan aplikasi Anda.
• Ikuti konvensi pengkodean: Secara konsisten ikuti konvensi pengkodean untuk menjaga keterbacaan dan konsistensi di seluruh basis kode Anda. Gunakan nama variabel dan fungsi yang bermakna dan berikan dokumentasi yang jelas untuk pola Anda.

Berhati-hatilah Saat Menerapkan Pola Ini

Pola Modul memungkinkan untuk enkapsulasi dan mempromosikan privasi data, organisasi kode, dan pembuatan modul mandiri.

Di sisi lain, pola Pengamat memfasilitasi komunikasi antar komponen dengan membangun hubungan subjek-pelanggan.

Anda harus menyadari potensi jebakan dan kesalahan umum saat menerapkan pola JavaScript tingkat lanjut. Hindari penggunaan pola yang berlebihan di mana ada solusi yang lebih sederhana atau membuat kode yang terlalu rumit. Tinjau dan perbaiki kode Anda secara teratur untuk memastikannya tetap dapat dipertahankan.