Builder pattern là một mẫu thiết kế tạo ra, còn được gọi là mẫu thiết kế tạo ra, được sử dụng để xây dựng các đối tượng phức tạp.
Mẫu thiết kế này giúp tạo ra các thành phần từng bước một dễ hiểu và dễ bảo trì.
Đây là một ví dụ về cách sử dụng mô hình Builder trong JavaScript.
// Đối tượng Product phức tạp cần được xây dựng class Car { constructor() { this.make = ''; this.model = ''; this.year = 0; this.color = ''; this.engine = ''; this.transmission = ''; } } // Builder cho đối tượng Product class CarBuilder { constructor() { this.car = new Car(); } setMake(make) { this.car.make = make; return this; } setModel(model) { this.car.model = model; return this; } setYear(year) { this.car.year = year; return this; } setColor(color) { this.car.color = color; return this; } setEngine(engine) { this.car.engine = engine; return this; } setTransmission(transmission) { this.car.transmission = transmission; return this; } build() { return this.car; } } // Sử dụng Builder để xây dựng một đối tượng Car const car = new CarBuilder() .setMake('Toyota') .setModel('Camry') .setYear(2023) .setColor('Red') .setEngine('V6') .setTransmission('Automatic') .build(); console.log(car);
Bạn nhìn thấy với mỗi phương thức điều trả về đối tượng this khi đó bạn có thể truy cập vào class ở bất kì phương thức nào để lấy thuộc tính trong Builder Pattern
và cuối cùng là phương thức build sẽ trả ra đối tượng được khởi tạo.
Cái kỹ thuật này thì được dùng nhiều trong flutter, trong javascript thì hầu như ít dùng hơn
Trong ví dụ trước Builder Pattern:
Xây dựng một chiếc xe là một công việc phức tạp.
CarBuilder là một lớp builder cung cấp các cách để thiết lập tất cả các tính năng của xe.
Mỗi phương thức thiết lập trả về chính nó, cho phép chuỗi các lệnh gọi phương thức.
Phương thức xây dựng của CarBuilder trả về xe đã được xây dựng.
CarBuilder là một công cụ đơn giản và dễ hiểu để tạo các đối tượng xe theo từng bước.
// Đối tượng Product phức tạp cần được xây dựng class Product { constructor() { this.name = ''; this.category = ''; this.price = 0.0; this.discount = 0.0; this.description = ''; this.manufacturer = ''; } } // Builder cho đối tượng Product class ProductBuilder { constructor() { this.product = new Product(); } setName(name) { this.product.name = name; return this; } setCategory(category) { this.product.category = category; return this; } setPrice(price) { this.product.price = price; return this; } setDiscount(discount) { this.product.discount = discount; return this; } setDescription(description) { this.product.description = description; return this; } setManufacturer(manufacturer) { this.product.manufacturer = manufacturer; return this; } build() { return this.product; } } // Sử dụng Builder để xây dựng một đối tượng Product const product = new ProductBuilder() .setName('Smartphone') .setCategory('Electronics') .setPrice(699.99) .setDiscount(50.00) .setDescription('A high-end smartphone with a great camera') .setManufacturer('TechCorp') .build(); console.log(product);
Trong ví dụ sau đây:
Đối tượng phức tạp phải được xây dựng Builder Pattern.
Lớp builder ProductBuilder cung cấp các cách để thiết lập các thuộc tính của sản phẩm.
Mỗi phương thức thiết lập trả về chính nó, cho phép chuỗi các lệnh gọi phương thức.
Phương thức xây dựng của ProductBuilder trả về đối tượng được xây dựng.
Chúng tôi có thể dễ dàng tạo ra các đối tượng Product với các thuộc tính khác nhau theo từng bước một cách rõ ràng và dễ dàng bảo trì bằng cách sử dụng ProductBuilder.
Đây là mười ví dụ về cách sử dụng phong cách Builder trong JavaScript để xây dựng các đối tượng phức tạp:
class UserProfile { constructor() { this.username = ''; this.email = ''; this.age = 0; this.address = ''; this.phone = ''; } } class UserProfileBuilder { constructor() { this.userProfile = new UserProfile(); } setUsername(username) { this.userProfile.username = username; return this; } setEmail(email) { this.userProfile.email = email; return this; } setAge(age) { this.userProfile.age = age; return this; } setAddress(address) { this.userProfile.address = address; return this; } setPhone(phone) { this.userProfile.phone = phone; return this; } build() { return this.userProfile; } } const userProfile = new UserProfileBuilder() .setUsername('john_doe') .setEmail('[email protected]') .setAge(30) .setAddress('123 Main St') .setPhone('555-1234') .build(); console.log(userProfile);
class Order { constructor() { this.orderId = ''; this.customerName = ''; this.items = []; this.totalAmount = 0.0; this.shippingAddress = ''; } } class OrderBuilder { constructor() { this.order = new Order(); } setOrderId(orderId) { this.order.orderId = orderId; return this; } setCustomerName(customerName) { this.order.customerName = customerName; return this; } addItem(item) { this.order.items.push(item); return this; } setTotalAmount(totalAmount) { this.order.totalAmount = totalAmount; return this; } setShippingAddress(shippingAddress) { this.order.shippingAddress = shippingAddress; return this; } build() { return this.order; } } const order = new OrderBuilder() .setOrderId('ORD12345') .setCustomerName('Jane Smith') .addItem('Laptop') .addItem('Mouse') .setTotalAmount(1200.0) .setShippingAddress('456 Another St') .build(); console.log(order);
class Computer { constructor() { this.cpu = ''; this.ram = ''; this.storage = ''; this.gpu = ''; this.powerSupply = ''; } } class ComputerBuilder { constructor() { this.computer = new Computer(); } setCpu(cpu) { this.computer.cpu = cpu; return this; } setRam(ram) { this.computer.ram = ram; return this; } setStorage(storage) { this.computer.storage = storage; return this; } setGpu(gpu) { this.computer.gpu = gpu; return this; } setPowerSupply(powerSupply) { this.computer.powerSupply = powerSupply; return this; } build() { return this.computer; } } const computer = new ComputerBuilder() .setCpu('Intel i9') .setRam('32GB') .setStorage('1TB SSD') .setGpu('NVIDIA RTX 3080') .setPowerSupply('750W') .build(); console.log(computer);
class House { constructor() { this.floors = 0; this.bedrooms = 0; this.bathrooms = 0; this.garden = false; this.pool = false; } } class HouseBuilder { constructor() { this.house = new House(); } setFloors(floors) { this.house.floors = floors; return this; } setBedrooms(bedrooms) { this.house.bedrooms = bedrooms; return this; } setBathrooms(bathrooms) { this.house.bathrooms = bathrooms; return this; } setGarden(garden) { this.house.garden = garden; return this; } setPool(pool) { this.house.pool = pool; return this; } build() { return this.house; } } const house = new HouseBuilder() .setFloors(2) .setBedrooms(4) .setBathrooms(3) .setGarden(true) .setPool(true) .build(); console.log(house);
class Pizza { constructor() { this.size = ''; this.crust = ''; this.cheese = ''; this.toppings = []; } } class PizzaBuilder { constructor() { this.pizza = new Pizza(); } setSize(size) { this.pizza.size = size; return this; } setCrust(crust) { this.pizza.crust = crust; return this; } setCheese(cheese) { this.pizza.cheese = cheese; return this; } addTopping(topping) { this.pizza.toppings.push(topping); return this; } build() { return this.pizza; } } const pizza = new PizzaBuilder() .setSize('Large') .setCrust('Thin') .setCheese('Mozzarella') .addTopping('Pepperoni') .addTopping('Mushrooms') .build(); console.log(pizza);
class VacationPackage { constructor() { this.destination = ''; this.startDate = ''; this.endDate = ''; this.flightsIncluded = false; this.hotelIncluded = false; this.activities = []; } } class VacationPackageBuilder { constructor() { this.vacationPackage = new VacationPackage(); } setDestination(destination) { this.vacationPackage.destination = destination; return this; } setStartDate(startDate) { this.vacationPackage.startDate = startDate; return this; } setEndDate(endDate) { this.vacationPackage.endDate = endDate; return this; } includeFlights(flightsIncluded) { this.vacationPackage.flightsIncluded = flightsIncluded; return this; } includeHotel(hotelIncluded) { this.vacationPackage.hotelIncluded = hotelIncluded; return this; } addActivity(activity) { this.vacationPackage.activities.push(activity); return this; } build() { return this.vacationPackage; } } const vacationPackage = new VacationPackageBuilder() .setDestination('Hawaii') .setStartDate('2024-07-01') .setEndDate('2024-07-10') .includeFlights(true) .includeHotel(true) .addActivity('Snorkeling') .addActivity('Hiking') .build(); console.log(vacationPackage);
class Book { constructor() { this.title = ''; this.author = ''; this.publisher = ''; this.year = 0; this.genre = ''; } } class BookBuilder { constructor() { this.book = new Book(); } setTitle(title) { this.book.title = title; return this; } setAuthor(author) { this.book.author = author; return this; } setPublisher(publisher) { this.book.publisher = publisher; return this; } setYear(year) { this.book.year = year; return this; } setGenre(genre) { this.book.genre = genre; return this; } build() { return this.book; } } const book = new BookBuilder() .setTitle('The Great Gatsby') .setAuthor('F. Scott Fitzgerald') .setPublisher('Scribner') .setYear(1925) .setGenre('Fiction') .build(); console.log(book);
class Website { constructor() { this.domain = ''; this.hosting = ''; this.pages = []; this.features = []; } } class WebsiteBuilder { constructor() { this.website = new Website(); } setDomain(domain) { this.website.domain = domain; return this; } setHosting(hosting) { this.website.hosting = hosting; return this; } addPage(page) { this.website.pages.push(page); return this; } addFeature(feature) { this.website.features.push(feature); return this; } build() { return this.website; } } const website = new WebsiteBuilder() .setDomain('example.com') .setHosting('AWS') .addPage('Home') .addPage('About Us') .addFeature('Contact Form') .addFeature('E-commerce') .build(); console.log(website);
class Smartphone { constructor() { this.brand = ''; this.model = ''; this.os = ''; this.storage = ''; this.camera = ''; this.battery = ''; } } class SmartphoneBuilder { constructor() { this.smartphone = new Smartphone(); } setBrand(brand) { this.smartphone.brand = brand; return this; } setModel(model) { this.smartphone.model = model; return this; } setOs(os) { this.smartphone.os = os; return this; } setStorage(storage) { this.smartphone.storage = storage; return this; } setCamera(camera) { this.smartphone.camera = camera; return this; } setBattery(battery) { this.smartphone.battery = battery; return this; } build() { return this.smartphone; } } const smartphone = new SmartphoneBuilder() .setBrand('Apple') .setModel('iPhone 14') .setOs('iOS') .setStorage('128GB') .setCamera('12MP') .setBattery('3100mAh') .build(); console.log(smartphone);
class GameCharacter { constructor() { this.name = ''; this.class = ''; this.level = 0; this.health = 0; this.mana = 0; this.skills = []; } } class GameCharacterBuilder { constructor() { this.gameCharacter = new GameCharacter(); } setName(name) { this.gameCharacter.name = name; return this; } setClass(characterClass) { this.gameCharacter.class = characterClass; return this; } setLevel(level) { this.gameCharacter.level = level; return this; } setHealth(health) { this.gameCharacter.health = health; return this; } setMana(mana) { this.gameCharacter.mana = mana; return this; } addSkill(skill) { this.gameCharacter.skills.push(skill); return this; } build() { return this.gameCharacter; } } const gameCharacter = new GameCharacterBuilder() .setName('Archer') .setClass('Ranger') .setLevel(10) .setHealth(150) .setMana(50) .addSkill('Arrow Shot') .addSkill('Evasion') .build(); console.log(gameCharacter);
Builder Pattern Các bạn thấy như vậy nó sẽ rất là tiện khi bạn muốn thêm gán giá trị cho đối tượng, vừa tường mình, vừa dễ dàng, đảm bảo được nguyên tắt DRY
DRY tại đây
#Mtips5s #Contact
Fanpage: https://www.facebook.com/mtipscoder
Group trao đổi, chia sẻ: https://www.facebook.com/groups/mtipscoder
Website: https://mtips5s.com
Youtube: https://mtips5s.com
Twitter(X): @takagiks99
Instagram: @khuongkara
Threads: @khuongkara
Google Maps: @khuongkara
#Base Code #Souce Code
Npm: @tools.mtips5s.com
Bộ công cụ My Self: @github
Npm: @npm
Docker: @docker
Chúc các bạn thành công!
Leave A Comment