- vừa được xem lúc

Blog#53: Design Patterns: Builder Pattern trong TypeScript 😊 (Series: Bón hành TypeScript - PHẦN 3)

0 0 19

Người đăng: NGUYỄN ANH TUẤN

Theo Viblo Asia

Mình là TUẤN hiện đang là một Full-stack Web Developer tại Tokyo 😊. Nếu bạn thấy Blog này hay xin hãy cho mình một like và đăng ký để ủng hộ mình nhé 😉.

Cách sử dụng Builder Pattern bằng TypeScript để giải quyết các vấn đề thực tế trong các project web. Làm chủ Builder Pattern sẽ giúp bạn dễ dàng xử lý việc tạo các đối tượng.

Chào mừng bạn đến với loạt bài Design Patterns trong TypeScript, loạt bài này mình sẽ giới thiệu một số Design Patterns hữu ích trong phát triển web bằng TypeScript.

Các Design Patterns rất quan trọng đối với các web developer và chúng ta có thể code tốt hơn bằng cách thành thạo chúng. Trong bài viết này, mình sẽ sử dụng TypeScript để giới thiệu Builder Pattern.

Builder Pattern

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

Vậy làm thế nào để hiểu rõ hơn về vai trò của Builder Pattern? Hãy thử lấy một ví dụ:

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

Trong đoạn code trên, chúng ta đã sử dụng cú pháp Class để định nghĩa một lớp User, với Class này, chúng ta có thể tạo một instance của lớp User:

const bytefer = new User( "Bytefer", "male", 30, "https://***.com/**", "bytefer@gmail.com"
);

Đối với đoạn code trên, mặc dù chúng ta có thể tạo thành công một instance của lớp User. Nhưng trong quá trình tạo các instance, chúng ta cần chú ý đến kiểu và thứ tự của các tham số constructor của lớp User. Đồng thời, chúng ta cũng cần truyền đủ tham số cùng một lúc để xây dựng một instance của lớp User.

Để giải quyết vấn đề trên, một giải pháp là sử dụng Design Patterns. Chìa khóa của Patterns này là phân tách một đối tượng phức tạp thành các phần tương đối đơn giản, sau đó tạo chúng riêng biệt theo các nhu cầu khác nhau và cuối cùng là xây dựng đối tượng phức tạp.

Sau khi hiểu các thông tin chính ở trên, hãy định nghĩa một lớp UserBuilder:

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

Trong lớp UserBuilder, chúng ta định nghĩa một số hàm setXXX và một hàm build. Phương thức setXXX được sử dụng để đặt value cho một Properties của UserBuilder instance và hàm build được sử dụng để thực hiện thao tác tạo một instance của lớp User.

Với lớp UserBuilder, chúng ta có thể tạo một instance của lớp User theo cách sau:

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

HÔ HÔ nhìn quen quen nhỉ chắc ae cũng đã thấy cách tạo Object này ở đâu đó rồi đúng ko.

Tiếp theo, mình sẽ sử dụng hình bên dưới để hiển thị các cách khác nhau để tạo một instance của class User:

Sau khi đọc ví dụ trên, bạn sẽ thấy rằng Builder Pattern không hề phức tạp đúng ko. Trong một project TypeScript thực tế, chúng ta có thể sử dụng thư viện Builder Pattern để áp dụng Builder Pattern một cách hiệu quả. Có sẵn hết rồi dùng thôi tuy nhiên vẫn câu nói cũng dùng mà hiểu thì vẫn sướng hơn dùng mà ko hiểu. Phải bón hành cho tụi này luôn chứ....

Sử dụng cơ bản

interface UserInfo { id: number; userName: string; email: string;
}
const userInfo = Builder<UserInfo>() .id(28) .userName('bytefer') .email('bytefer@gmail.com') .build();

Cách sử dụng với các đối tượng mẫu (template objects)

const defaultUserInfo: UserInfo = { id: 1, userName: 'bytefer', email: 'bytefer@gmail.com'
};
const modifiedUserInfo = Builder(defaultUserInfo) .id(28) .build();

Cách sử dụng với class object

class UserInfo { id!: number; userName!: string; email!: string;
}
const userInfo = Builder(UserInfo) .id(28) .userName('bytefer') .email('bytefer@gmail.com') .build();

Sau khi đọc ba ví dụ sử dụng ở trên, bạn thấy đó thư viện Builder Pattern khá mạnh mẽ. Trên thực tế, thư viện được implement dựa trên ES6 Proxy API. Nếu bạn quan tâm thì có thể đọc source code của nó.

Trong trường hợp truy vấn dữ liệu, chúng ta thường thấy Builder Pattern. Ví dụ: để xây dựng các điều kiện truy vấn sql hoặc elaticsearch. Ở đây chúng ta lấy thư viện bodybuilder làm ví dụ để xem cách sử dụng cơ bản của nó:

bodybuilder() .query('match', 'message', 'this is a test') .filter('term', 'user', 'kimchy') .filter('term', 'user', 'herald') .orFilter('term', 'user', 'johnny') .notFilter('term', 'user', 'cassie') .aggregation('terms', 'user') .build()

Một số trường hợp sử dụng của Builder Pattern:

  • Khi một lớp có nhiều hơn 4 tham số constructor và một số tham số này là tùy chọn, hãy cân nhắc sử dụng Builder Pattern (Hoặc một pattern nào đó trong bộ Constructor pattern mình sẽ giới thiệu trong các bài viết sau).

Roundup

Như mọi khi, mình hy vọng bạn thích bài viết này và học thêm được điều gì đó mới.

Cảm ơn và hẹn gặp lại các bạn trong những bài viết tiếp theo! 😍

Nếu bạn thấy Blog này hay xin hãy cho mình một like và đăng ký để ủng hộ mình nhé. Thank you.😉

Ref

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 496

- vừa được xem lúc

Type annotation vs Type Inference - Typescript

Trong bài viết này, chúng ta sẽ tìm hiểu kỹ về TypeScript bằng cách tìm hiểu sự khác biệt giữa kiểu chú thích và kiểu suy luận. Tôi sẽ cho rằng bạn có một số kinh nghiệm về JavaScript và biết về các kiểu cơ bản, như chuỗi, số và boolean.

0 0 31

- vừa được xem lúc

Type Annotation và Type Inference trong TypeScript là gì?

Khi làm việc với javascript chắc hẳn các bạn đã quá quen với việc dùng biến mà không cần phải quan tâm đến kiểu dữ liệu của nó là gì phải không? Đúng là mới đầu tiếp cận với Typescript mình cũng cảm thấy nó khá là phiền vì cần phải khai báo đủ type để nó chặt chẽ hơn. Lúc đó mình còn nghĩ: " JavaScr

0 0 24

- vừa được xem lúc

Tìm hiểu TypeScript và kiến thức cơ bản

TypeScript là gì. TypeScript sử dụng tất cả các tính năng của của ECMAScript 2015 (ES6) như classes, modules.

0 0 33

- vừa được xem lúc

TypeScript - P1: Vì sao TypeScript được yêu thích đến vậy?

Trải nghiệm thực tế. Trước khi là một Web Developer, tôi là một Mobile Developer và Java là thứ mà tôi từng theo đuổi.

0 1 57

- vừa được xem lúc

4 Tính năng rất hay từ TypeScript

Xin chào các bạn hôm nay mình xin chia sẽ những tính năng rất hay của TypeScript (TS), các bạn cùng tìm hiểu nhé. Ngoài việc set Type cho biến, tham số hay function thì ví dụ khi bạn nhìn vào một tham

0 0 81