DEV Community: Tình Hoàng Xuân

#2 Command Pattern

Tình Hoàng Xuân — Wed, 24 May 2023 06:46:13 +0000

1 Problem

Client họ chỉ muốn gửi yêu cầu, họ không quan tâm yêu cầu đó sẽ được xử lý như thế nào và khi nào. Họ chỉ quan tâm yêu cầu đó sẽ được thực hiện.

2 Định nghĩa

Command Pattern đóng gói 1 request thành 1 cái object và từ đó cho phép bạn tham số hoá object đó(pass params thông qua constructor) để thực hiện các request khác nhau, queue and log và undo hành động trước đó

3 Các thành phần trong Command Pattern

ICommand: là một interface or abstract class khai báo các phương thức chung của 1 yêu cầu
Concrete Command: là các lớp sẽ implement ICommand. Nó sẽ đóng gói một hành động cụ thể và chứa thông tin cần thiết để thực hiện yêu cầu đó.Nó thường tham chiếu tới 1 Receiver và gọi 1 phương thức trên Receiver khi lệnh được thực thi

-Commander (người chỉ huy) là thành phần chịu trách nhiệm gọi lệnh và kích hoạt thực thi. Tham chiếu tới ICommand và có thể cấu để làm việc với các lệnh khác nhau 1 cách linh hoạt

4 Code

interface ICommand {
  execute(): void
  undo(): void
}

class TurnOffCommand implements ICommand {
    private readonly fan: Fan
    constructor(fan: Fan) {
        this.fan = fan
    }
    execute(): void {
        this.fan.turnOff()
    }
    undo(): void {
        this.fan.turnOn()
    }
}

class TurnOnCommand implements ICommand {
    private readonly fan: Fan
    constructor(fan: Fan) {
        this.fan = fan
    }
    execute(): void {
     this.fan.turnOn()
    }
    undo(): void {
        this.fan.turnOff()
    }
}

class Commander {
    private readonly turnOnCommand: ICommand
    private readonly turnOffCommand: ICommand
    constructor(turnOnCommand: ICommand, turnOffCommand: ICommand) {
        this.turnOffCommand = turnOffCommand
        this.turnOnCommand = turnOnCommand
    }
    public turnOnButtonClick(): void {
        this.turnOnCommand.execute()
    }
    public turnOffButtonClick(): void {
        this.turnOffCommand.execute()
    }
}

// receiver -> cái quạt điều khiển bởi Remote
class Fan {
    turnOn(): void {
        console.log('Turn On')
    }

    turnOff(): void {
        console.log('Turn Off')
    }
}

function main() {
    const fan = new Fan()

    const turnOffCommand = new TurnOffCommand(fan)
    const turnOnCommand = new TurnOnCommand(fan)

    const remote = new Commander(turnOnCommand, turnOffCommand)

    remote.turnOnButtonClick()
    remote.turnOffButtonClick()
}
main()

class Commander {
}

// receiver -> cái quạt điều khiển bởi Remote
class Fan {
}

#1 Builder Pattern In Typescript

Tình Hoàng Xuân — Wed, 17 May 2023 10:38:30 +0000

Định nghĩa:
Builder Pattern

phân tách một đối tượng phức tạp thành các thành phần đơn giản, sau đó tạo chúng 1 cách riêng biệt theo các nhu cầu khác nhau. Và sau cùng là xây dựng lại 1 đối tượng phức tạp

Để dễ hiểu hơn chúng ta lấy 1 ví dụ:

class User {
  constructor(
    public username: string,
    public sex: string,
    public age: number,
    public photo: string,
    public email: string
  ) {}
}

Chúng ta có 1 Class User và chúng ta khởi tạo 1 đối tượng User với từ khoá New

const user = new User('john','male',18,'photo','john@gmail.com')

Bằng cách này chúng ta vẫn có thể tạo ra 1 đối tượng user nhưng trong quá trình tạo chúng ta cần chú ý đến thứ tự các tham số được truyền vào, cần truyền đủ các tham số và đúng kiểu dữ liệu của chúng.

Để giải quyết vấn đề trên thì ta có Builder Pattern.

class UserBuilder {
  public username!: string;
  public sex!: string;
  public age!: number;
  public photo!: string;
  public email!: string;

  setUserName(name: string) {
    this.username = name;
    return this;
  }

  setSex(sex: string) {
    this.sex = sex;
    return this;
  }

  setAge(age: number) {
    this.age = age;
    return this;
  }

  setPhoto(photo: string) {
    this.photo = photo;
    return this;
  }

  setEmail(email: string) {
    this.email = email;
    return this;
  }

  build() {
    return new User(this.username, this.sex, this.age, this.photo, this.email);
  }
}

Với cách này chúng ta có thể xây dựng lại 1 đối tượng phức tập theo ý muốn của chúng ta.

const bytefer = new UserBuilder()
  .setAge(30)
  .setSex("male")
  .setEmail("bytefer@gmail.com")
  .setPhoto("https://***.com/**")
  .setUserName("Bytefer")
  .build();

Kết quả:

User: { "username": "Bytefer", "sex": "male", "age": 30, "photo": "https://***.com/**", "email": "bytefer@gmail.com" }

Nếu ai dùng Nestjs rồi thì thấy cái này quen quen đúng không.

Design Pattern With Typescript

Tình Hoàng Xuân — Wed, 10 May 2023 10:43:06 +0000

https://dev.to/luis_tinh_1999/1-builder-pattern-in-typescript-5g5o

Design Pattern

Tình Hoàng Xuân — Tue, 09 May 2023 14:17:36 +0000

Design patterns are typical solutions to common problems
in software design. Each pattern is like a blueprint
that you can customize to solve a particular
design problem in your code.