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ụ:
classUser{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 =newUser("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
:
classUserBuilder{public username!: string;public sex!: string;public age!: number;public photo!: string;public email!: string;setUserName(name: string){this.username = name;returnthis;}setSex(sex: string){this.sex = sex;returnthis;}setAge(age: number){this.age = age;returnthis;}setPhoto(photo: string){this.photo = photo;returnthis;}setEmail(email: string){this.email = email;returnthis;}build(){returnnewUser(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 =newUserBuilder().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
interfaceUserInfo{
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
classUserInfo{
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
Nguồn: viblo.asia