Mình là TUẤN hiện đang là một Full-stack 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 Strategy Pattern bằng TypeScript để giải quyết các vấn đỠthực tế trong các project web.
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 Strategy Pattern .
Strategy Pattern
Äăng ký và Äăng nháºp là các tÃnh năng quan trá»ng trong các ứng dụng web. Khi đăng ký má»™t ứng dụng web, cách phổ biến hÆ¡n để đăng ký là sá» dụng account/password, email hoặc số Ä‘iện thoại di Ä‘á»™ng… Khi bạn đã đăng ký thà nh công, bạn có thể sá» dụng hà m tÆ°Æ¡ng ứng để Login.
functionlogin(mode){if(mode ==="account"){loginWithPassword();}elseif(mode ==="email"){loginWithEmail();}elseif(mode ==="mobile"){loginWithMobile();}}
Khi ứng dụng web cần há»— trợ các hà m Login khác, và dụ: ngoà i hà m Login email, trang Login còn há»— trợ các tÃnh năng Login của ná»n tảng bên thứ ba nhÆ° Google, Facebook, Apple và Twitter.
Váºy để há»— trợ thêm các phÆ°Æ¡ng thức hà m Login của bên thứ ba, chúng ta cần sá»a đổi function login
trước đó:
functionlogin(mode){if(mode ==="account"){loginWithPassword();}elseif(mode ==="email"){loginWithEmail();}elseif(mode ==="mobile"){loginWithMobile();}elseif(mode ==="google"){loginWithGoogle();}elseif(mode ==="facebook"){loginWithFacebook();}elseif(mode ==="apple"){loginWithApple();}elseif(mode ==="twitter"){loginWithTwitter();}}
Nhìn có vẻ không ổn chút nà o nhở!
Nếu sau nà y chúng ta tiếp tục thêm hoặc sá»a đổi các phÆ°Æ¡ng thức Login, chúng ta sẽ thấy rằng function login
nà y ngà y cà ng trở nên khó maintenance hÆ¡n. Äối vá»›i vấn Ä‘á» nà y, chúng ta có thể sá» dụng Strategy Pattern để đóng gói các hà m Login khác nhau và o các strategy khác nhau.
Äể hiểu rõ hÆ¡n vá» Ä‘oạn code sau, trÆ°á»›c tiên chúng ta hãy xem sÆ¡ đồ UML tÆ°Æ¡ng ứng:
Trong hình trên, chúng ta xác định một Interface Strategy
, sau đó implement hai strategy Login cho Twitter và account/password dựa trên Interface nà y.
Interface strategy
interfaceStrategy{authenticate(args: any[]): boolean;}
Strategy Twitter Class được triển khai từ Interface Strategy
classTwitterStrategyimplementsStrategy{authenticate(args: any[]){const[token]= args;if(token !=="tw123"){
console.error("Twitter account authentication failed!");returnfalse;}
console.log("Twitter account authentication succeeded!");returntrue;}}
LocalStrategy class cũng được triển khai từ Interface Strategy
classLocalStrategyimplementsStrategy{authenticate(args: any[]){const[username, password]= args;if(username !=="bytefer"|| password !=="666"){
console.log("Incorrect username or password!");returnfalse;}
console.log("Account and password authentication succeeded!");returntrue;}}
Sau khi có các được triển khai từ Interface Strategy khác nhau, chúng ta định nghĩa một lớp Authenticator để chuyển đổi giữa các strategy Login khác nhau và thực hiện các thao tác authentication tương ứng.
Authenticator class
classAuthenticator{
strategies: Record<string, Strategy>={};use(name: string, strategy: Strategy){this.strategies[name]= strategy;}authenticate(name: string,...args: any){if(!this.strategies[name]){
console.error("Authentication policy has not been set!");returnfalse;}returnthis.strategies[name].authenticate.apply(null, args);// authenticate.apply là cú pháp apply args của typescript}}
Sau đó, chúng ta có thể sỠdụng các hà m Login khác nhau để đạt được authentication user theo các cách sau:
const auth =newAuthenticator();
auth.use("twitter",newTwitterStrategy());
auth.use("local",newLocalStrategy());functionlogin(mode: string,...args: any){return auth.authenticate(mode, args);}login("twitter","123");login("local","bytefer","666");
Khi bạn chạy thà nh công đoạn code trên, output tương ứng được hiển thị trong hình sau:
Strategy Pattern ngoà i việc sá» dụng cho trÆ°á»ng hợp authentication Login cÅ©ng có thể được sá» dụng trong nhiá»u kịch bản khác nhau (Và dụ nhÆ°: form validation). Nó cÅ©ng có thể được sá» dụng để tối Æ°u hóa các vấn Ä‘á» vá»›i quá nhiá»u nhánh if/else.
Nếu bạn sỠdụng Node.js để phát triển các authentication service, thì thông thương các bạn sẽ sỠdụng thư viện passport.js nà y đúng ko. Nếu các bạn đã từng sỠdụng thư viện/Mô-đun Passport.js nà y nhưng ko biết cách nó hoạt động ra sao, thì Strategy Pattern sẽ giúp bạn hiểu vỠnó hơn. Dùng một thứ mình hiểu vẫn tốt hơn là dùng mà ko hiểu đúng ko. Ahihi
Mô-đun passport.js nà y rất mạnh mẽ và hiện hỗ trợ tới 538 strategy:
Một số tình huống mà bạn có thể suy nghĩ đến việc sỠdụng Strategy Pattern:
- Khi má»™t hệ thống cần tá»± Ä‘á»™ng chá»n má»™t trong số các thuáºt toán. Và má»—i thuáºt toán có thể được gói gá»n trong má»™t strategy.
- Nhiá»u class chỉ khác nhau vá» hà nh vi và có thể sá» dụng Strategy Pattern để tá»± Ä‘á»™ng chá»n hà nh vi cụ thể sẽ được thá»±c thi trong thá»i gian chạy.
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