7 Pola Desain JavaScript Yang Harus Diketahui Setiap Pengembang
Bagaimana jika Anda dapat menyusun kode sumber Anda seperti template cantik yang dapat diterapkan ke setiap proyek dengan jenis yang sama?
Template untuk setiap proyek? Kedengarannya luar biasa, bukan?
Itu juga tingkat pengkodean yang saya perjuangkan.
Salah satu cara untuk mencapainya adalah dengan menggunakan pola desain, yang membantu penulisan kode yang terstruktur dengan baik, indah, dan teratur.
Dalam cerita ini, kita akan menemukan beberapa pola desain umum yang digunakan dalam JavaScript. Mari kita mulai.
1. Constructor Pattern
Anda sudah familiar dengan konstruktor sebagai fungsi yang menginisialisasi objek dengan properti dan metode tertentu.
Pola konstruktor mirip dengan definisi itu. Kami menggunakan pola ini untuk membuat beberapa contoh dari objek yang sama.
Ada banyak cara untuk membuat objek baru di JavaScript. Lihat contoh di bawah ini:
// Using {} to create empty objects:
let person = {};// Using Object() to create empty objects:
let person = new Object();// Using function constructor:
function Person(name, age) {
this.name = name;
this.age = age;
this.showName = () => console.log(this.name);
}let person = new Person(‘Amy’, 28);
person.showName();
2. Prototype Pattern
Pola prototipe adalah pola desain kreasi berbasis objek. Ini membuat contoh objek baru dengan mengkloningnya dari prototipe. Fokus utama dari pola prototipe adalah membuat objek yang digunakan sebagai cetak biru untuk setiap konstruktor objek yang dibuat.
Jika Anda menemukan bahwa konstruksi objek baru secara langsung rumit dan tidak efisien, pola prototipe sangat tepat untuk kasus tersebut.
Anda dapat mengimplementasikan pola prototipe dengan cara klasik seperti di bawah ini:
function Book(title, price) {
this.title = title;
this.price = price;
this.printTitle = () => console.log(this.title);
}function BookPrototype(prototype) {
this.prototype = prototype; this.clone = () => {
let book = new Book();
book.title = prototype.title;
book.price = prototype.price;
return book;
};
}let sampleBook = new Book(‘JavaScript’, 15);
let prototype = new BookPrototype(sampleBook);
let book = prototype.clone();
book.printTitle();
Karena JavaScript memiliki fasilitas prototipe bawaannya sendiri, Anda dapat menggunakan pola itu dengan cara yang lebih efektif seperti di bawah ini:
let book = {
title: ‘JavaScript’,
price: 15
}let anotherBook = Object.assign({}, book);
Kami memiliki buku pertama yang digunakan sebagai prototipe. Kemudian kami membuat instance buku baru menggunakan prototipe itu sehingga buku baru tersebut memiliki semua nilai properti yang diinisialisasi dengan nilai prototipe.
3. Command Pattern
Tujuan utama dari pola ini adalah untuk merangkum tindakan atau operasi sebagai objek.
Bayangkan Anda memiliki persyaratan untuk membangun sistem pembayaran untuk toko eCommerce. Bergantung pada metode pembayaran yang dipilih, Anda akan memiliki proses khusus untuk ditangani.
Contoh:
if (selectedPayment == ‘creditcard’) {
// handle payment by creditcard
}Beberapa metode pembayaran hanya memiliki satu langkah untuk diproses, tetapi mungkin yang lain memiliki lebih dari satu. Dengan menggunakan kode contoh di atas, Anda memberikan implementasi, bukan antarmuka, yang menyebabkan keterkaitan erat.
Pola perintah adalah solusi yang bagus untuk menyediakan kopling longgar. Sistem seharusnya tidak mengetahui banyak informasi tentang setiap pemrosesan metode pembayaran tertentu. Untuk mencapai itu, pola ini akan memisahkan kode yang meminta operasi dari yang menjalankan implementasi sebenarnya.
Contoh:
function Command(operation) {
this.operation = operation;
}Command.prototype.execute = function () {
this.operation.execute();
}function ProcessCreditCardPayment() {
return {
execute: function() {
console.log(‘Credit Card’)
}
};
}function ProcessPayPalPayment() {
return {
execute: function() {
console.log(‘PayPal’)
}
};
}function ProcessStripePayment() {
return {
execute: function() {
console.log(‘Stripe’)
}
};}function CreditCardCommand() {
return new Command(new ProcessCreditCardPayment());
}function PayPalCommand() {
return new Command(new ProcessPayPalPayment());
}function StripeCommand() {
return new Command(new ProcessStripePayment());
}function PaymentSystem() {
let paymentCommand;
return {
setPaymentCommand: function(command) {
paymentCommand = command;
},
executeCommand: function() {
paymentCommand.execute();
}
};
}function run() {
let paymentSystem = new PaymentSystem();
paymentSystem.setPaymentCommand(new CreditCardCommand());
paymentSystem.executeCommand();
paymentSystem.setPaymentCommand(new PayPalCommand());
paymentSystem.executeCommand();
paymentSystem.setPaymentCommand(new StripeCommand());
paymentSystem.executeCommand();
}run();
4. Observer Pattern
Apakah Anda pernah berlangganan buletin apa pun?
Jika demikian, setiap kali pemilik mengirim email, Anda akan diberi tahu.
Pola pengamat bekerja dalam mekanisme yang sama. Ini memberi Anda model langganan di mana Anda berlangganan ke suatu acara dan ketika acara itu terjadi, Anda akan mendapatkan pemberitahuan.
Contoh:
function Newsletter() {
this.observers = [];
}Newsletter.prototype = {
subscribe: function (observer) {
this.observers.push(observer);
},
unsubscribe: function(observer) {
this.observers = this.observers.filter(ob => ob !== observer);
}, notify: function() {
this.observers.forEach(observer => console.log(‘Hello ‘ + observer.toString()));
}
}let subscriber1 = ‘Subscriber 1’;
let subscriber2 = ‘Subscriber 2’;
let newsletter = new Newsletter();newsletter.subscribe(subscriber1);newsletter.subscribe(subscriber2);
newsletter.notify(); // Hello Subscriber 1 Hello Subscriber 2newsletter.unsubscribe(subscriber2);
newsletter.notify(); // Hello Subscriber 1
5. Singleton Pattern
Ini adalah pola yang paling terkenal. Kami menggunakan pola ini untuk membatasi kelas agar hanya memiliki satu instance dan dapat diakses secara global. Ini sangat berguna saat Anda membutuhkan sesuatu untuk menangani tugas tertentu dari mana saja di seluruh aplikasi.
Contoh:
const utils = (function () {
let instance;
function initialize() {
return {
sum: function (a, b) {
return a + b;
}
};
} return {
getInstance: function () {
if (!instance) {
instance = initialize();
} return instance;
}
};
})();let sum = utils.getInstance().sum(3, 5); // 8
Meskipun nyaman, Anda harus menggunakan pola ini dengan bijak karena memiliki kekurangan yang membuat kode Anda sulit untuk diuji.
6. Module Pattern
Pola ini merupakan pola desain yang digunakan untuk mengimplementasikan konsep modul perangkat lunak. Pola modul adalah pola yang kuat dan umum digunakan dalam JavaScript.
Saat Anda melihat ke dalam pustaka JavaScript, Anda akan melihat pola ini biasanya digunakan sebagai objek tunggal. Ini memberi Anda kemampuan untuk merangkum kode Anda untuk menulis aplikasi yang paling kuat.
Anda dapat menjadikan fungsi, variabel, dan properti di dalam modul sebagai anggota publik atau pribadi.
Contoh:
const bookModule = (function() {
// private
let title = ‘JavaScript’;
let price = 15; // public
return {
printTitle: function () {
console.log(title);
}
}
})();bookModule.printTitle(); // JavaScript
7. Factory Pattern
Anda mungkin telah menggunakan pola itu tanpa menyadarinya. Pola pabrik berfungsi sebagai, yah, pabrik. Dalam JavaScript, ini memisahkan pembuatan objek dari kode lainnya. Anda membungkus kode pembuatan dan kemudian mengekspos API untuk menghasilkan objek yang berbeda.
Contoh:
const Vehicle = function() {};const Car = function() {
this.say = function() {
console.log(‘I am a car’);
}
};const Truck = function() {
this.say = function() {
console.log(‘I am a truck’);
}
};const Bike = function() {
this.say = function() {
console.log(‘I am a bike’);
}
};const VehicleFactory = function() {
this.createVehicle = (vehicleType) => {
let vehicle; switch (vehicleType) {
case ‘car’:
vehicle = new Car();
break;
case ‘truck’:
vehicle = new Truck();
break;
case ‘bike’:
vehicle = new Bike();
break;
default:
vehicle = new Vehicle();
}
return vehicle;
}
};const vehicleFactory = new VehicleFactory();let car = vehicleFactory.createVehicle(‘car’);
let truck = vehicleFactory.createVehicle(‘truck’);
let bike = vehicleFactory.createVehicle(‘bike’);car.say(); // I am a car
truck.say(); // I am a truck
bike.say(); // I am a bike
Kesimpulan
Dari pengalaman saya, sulit menerapkan pola desain ke proyek Anda. Anda harus mencoba dan gagal berkali-kali agar bisa menguasainya. Namun, kerja keras membuahkan hasil. Setelah Anda sepenuhnya memahami pola desain dan mengetahui kapan dan pola apa yang harus Anda terapkan, Anda dapat membawa kode Anda ke tingkat yang paling kuat.
Di atas hanyalah contoh sederhana dari beberapa pola desain. Jika Anda menemukan minat topik ini, Anda harus menyelami lebih dalam. Percayalah, Anda tidak akan pernah menyesalinya.
