[ Better ] Builder Pattern Trong JavaScript và 10 ví dụ thực tế

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.

Builder Pattern 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.

Một ví dụ khác về đối tượng Product

// Đố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.

Các ví dụ thực tế Builder Pattern

Đâ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:

UserProfie

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);

Order

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);

Computer

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);

House

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);

Pizza

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);

Vacation Package

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);

Book

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);

Website

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);

SmartPhone

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);

Game Character Builder Pattern

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!