7

Tối ưu năng xuất làm việc với Javascript bằng Proxy

đăng cách đây 8 tháng
source: https://areknawo.com/javascript-proxy-object-explained/source: https://areknawo.com/javascript-proxy-object-explained/

Proxy là một trong những tính năng mới được giới thiệu trong chuẩn ES6. Proxy dùng để custom lại các phương thức của một Object. ( ví dụ: get, set, function execute ... của một Object)

Function là một Executable Object

Syntax

target: object bạn muốn proxy.

handler:  object khai báo những phương thức được custom.

Tham khảo thêm các phương thức có thể custom lại được ở đây:

✧ ✧ ✧

Proxy concept

Mình lấy ví dụ với phương thức đơn giản nhất của Object là get:

proxyproxy

 Object week truy cập tới một property không được khởi tạo lúc này kết quả trả về là undefined.

Mình sẽ sử dụng Proxy để custom lại phương thức get của Object week như sau :

custom object with proxycustom object with proxy

 Object secureWeek sau khi được custom lại hàm get thì lúc này mọi truy xuất đến bất kì property nào của Object secureWeek đều được handle bởi hàm get trong Object handlers

Trong trường hợp trên. Object được truy xuất khi đi qua hàm get chưa được handle nên kết quả trả về là undefined.

Khi bạn customize lại một phương thức A của một Object . Thì bạn chính là người quyết định phương thức đó sẽ làm việc như thế nào. 

Mình sẽ bắt đầu handle function get :

handle proxy functionhandle proxy function

Sau khi handle xong, khi kiểm tra có thì mình sẽ return về kết quả, còn không thì mình sẽ return về bất cứ thứ gì mình muốn.

Customize phương thức set để validate:

custom method setcustom method set

Proxy là một Object Middlewares

✧ ✧ ✧

Hy vọng bạn nắm được những concept cơ bản trên trước khi bắt đầu sử dụng Proxy để optimize quá trình làm việc với javascript. 

API interface

Khi bạn customize lại một phương thức A của một Object . Thì bạn chính là người quyết định phương thức đó sẽ làm việc như thế nào.  Dựa vào tính chất này mình sẽ viết một API interface bằng cách customize lại phương thức get 

proxy handlersproxy handlers

Sử dụng:

interface apinterface ap

Như các bạn thấy, Object configs không về có methods nào tên là getUserMe hoặc getUser_Likes_ .  Các methods ở đây đóng vài trò là một pattern để hàm getter compile ra api url.

Những keyworkd  _  sẽ được thay thế đúng với index trong argument params  truyền vào. Mỗi function chỉ có một tham số duy nhất là Object  để tiện cho việc handle.

 Query/ Group data from Object

 Cung cấp các phương thức xử lý data trên một Object. 

Query/Group dataQuery/Group data

Customize Promise Output

Giả sử mình đang dùng chung  Base API ( Get, Post, Put...) và hiện tại trong project của mình có gần 20 function sử dụng các methods này để request API.

Không may cho bạn Base API này không được xử lý luồng UnAuthorize. Điều đầu tiên  bạn sẽ nghĩ ngay đến việc customize lại Base API kia, nhưng không may việc custom lại sẽ làm chết những function của người khác đang xài Base API này.

Lúc này giải pháp là mình sẽ dùng Proxy để custom lại kết quả trả về:

Proxy PromiseProxy Promise
✧ ✧ ✧

Proxy Performance

Yah. Tiện thì tiện, nhưng ngược lại nếu so sánh với những cách implement khác với cùng ouput thì dựa vào bài benchmark dưới đây thì performance của Proxy lại không bằng những method khác.

Và đương nhiên cũng sẽ có cách để Optimize Proxy:

✧ ✧ ✧

Kết bài

Chúng ta có thể sử dụng Proxy để optimize quá trình làm việc với javascript vì những tính chất khá là advance của nó. Tuy nhiên không phải nó mới, nó lạ dùng là sẽ cool ngầu, cần biết được khi nào bạn sử dụng nó vì Proxy cũng có những nhược điểm của nó.

Nếu bạn chuẩn bị/đang sử dụng Proxy và có use case nào hay thì chia sẽ mình với nha. 
Cản ơn các bạn đã theo dõi và hẹn gặp lại ở những bài blog tiếp theo.

Tham khảo:

#productive#javascript#proxy
7
0
...