Blog#133: Hiểu về Proxy Design Pattern

Thứ Tư, 08/02/2023

Tram Ho

Giới thiệu

Bạn có bao giờ cảm thấy mình phải nhảy qua các vòng để hoàn thành công việc không? Điều tương tự cũng có thể nói đối với mã hóa. Nhiều nhà phát triển web hiện đại đã quen thuộc với mẫu thiết kế proxy. Nó đơn giản hóa các tác vụ phức tạp, giúp viết mã hiệu quả hơn.

Mẫu proxy về cơ bản là một cách để chỉ ra cách các đối tượng khác được truy cập. Nếu bạn đang tìm kiếm một cách dễ dàng để giữ quyền kiểm soát dữ liệu mà bạn đang làm việc, thì mẫu thiết kế proxy là một lựa chọn tuyệt vời. Bài viết này sẽ hướng dẫn bạn cách triển khai mẫu thiết kế này trong Javascript.

Mẫu thiết kế proxy là gì?

Mẫu thiết kế proxy là một sơ đồ lập trình cấu trúc hoạt động như một trình bao bọc xung quanh một đối tượng khác. Nó cho phép truy cập vào các đối tượng phức tạp, tăng cường tính linh hoạt. Nó được thiết kế để ẩn các chi tiết triển khai và cung cấp một cấu trúc mã đơn giản hơn. Nó cũng có thể được sử dụng để thao tác dữ liệu hoặc hạn chế quyền truy cập vào một số phần của ứng dụng.

Tại sao nên sử dụng Mẫu thiết kế proxy?

Sử dụng mẫu thiết kế proxy cung cấp một số lợi thế chính;

Nó đơn giản hóa cấu trúc của mã.
Nó cải thiện hiệu suất của mã bằng cách giảm số lần lặp lại,
Nó cung cấp một lớp bảo mật để hạn chế quyền truy cập vào một số phần nhất định của mã.
Nó có thể được sử dụng để tạo các API linh hoạt.

Mẫu thiết kế proxy được sử dụng ở đâu?

Mẫu thiết kế proxy được sử dụng rộng rãi trong phát triển web. Nó được sử dụng để đơn giản hóa các tương tác máy khách/máy chủ, truy vấn API hoặc các nhu cầu lập mô hình dữ liệu khác. Nó cũng có thể được sử dụng trong các thư viện, khuôn khổ và thậm chí trong cơ sở dữ liệu.

Mẫu thiết kế proxy hoạt động như thế nào?

Nói một cách đơn giản nhất, proxy là một đối tượng trung gian thay thế cho một đối tượng khác. Nó thường được triển khai như một hàm nhận đầu vào và chuyển nó tới đối tượng bên dưới.

Mẫu thiết kế proxy có thể được triển khai theo nhiều cách khác nhau tùy thuộc vào nhiệm vụ cụ thể cần thiết. Các triển khai phổ biến nhất là cung cấp bộ nhớ đệm, ghi nhật ký và xác thực.

Trường hợp sử dụng

1. Bộ nhớ đệm

Bộ nhớ đệm là trường hợp sử dụng phổ biến cho proxy, vì nó nâng cao hiệu suất của mã khi làm việc với các đối tượng được sử dụng thường xuyên.

Ví dụ: hãy xem xét đoạn mã sau:

<span class="token keyword">const</span> <span class="token function-variable function">getRequest</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">url</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token function">fetch</span> <span class="token punctuation">(</span> url <span class="token punctuation">)</span>
    <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">response</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> response <span class="token punctuation">.</span> <span class="token function">json</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span>
    <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">data</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> data <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

const getRequest = ( url ) => {

fetch ( url )

. then ( ( data ) => console . log ( data ) ) ;

}

Để lưu trữ kết quả của yêu cầu, chúng ta có thể sử dụng proxy để cung cấp một lớp trừu tượng trên hàm tìm nạp(). Bằng cách này, chúng tôi có thể lưu trữ phản hồi của yêu cầu, vì vậy nó không phải được thực hiện lại nếu yêu cầu tương tự được gọi.

<span class="token keyword">const</span> <span class="token function-variable function">getCachedRequest</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">proxy <span class="token punctuation">,</span> url</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">// check if URL result is already cached</span>
  <span class="token keyword">const</span> cachedResult <span class="token operator">=</span> proxy <span class="token punctuation">.</span> <span class="token function">getCachedResult</span> <span class="token punctuation">(</span> url <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span> cachedResult <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> cachedResult <span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// if not, make the request and cache the result</span>
  <span class="token keyword">return</span> <span class="token function">fetch</span> <span class="token punctuation">(</span> url <span class="token punctuation">)</span>
    <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">response</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> cache <span class="token punctuation">.</span> <span class="token function">addCachedResult</span> <span class="token punctuation">(</span> url <span class="token punctuation">,</span> response <span class="token punctuation">.</span> <span class="token function">json</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span>
    <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">data</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> data <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

const getCachedRequest = ( proxy , url ) => {

// check if URL result is already cached

const cachedResult = proxy . getCachedResult ( url ) ;

if ( cachedResult ) {

return cachedResult ;

}

// if not, make the request and cache the result

return fetch ( url )

. then ( ( response ) => cache . addCachedResult ( url , response . json ( ) ) )

}

Mã cho proxy trông giống như thế này:

<span class="token keyword">const</span> proxy <span class="token operator">=</span> <span class="token punctuation">{</span>
  cache <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span>
  <span class="token function-variable function">getCachedResult</span> <span class="token operator">:</span> <span class="token punctuation">(</span> <span class="token parameter">url</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> proxy <span class="token punctuation">.</span> cache <span class="token punctuation">[</span> url <span class="token punctuation">]</span> <span class="token punctuation">,</span>
  <span class="token function-variable function">addCachedResult</span> <span class="token operator">:</span> <span class="token punctuation">(</span> <span class="token parameter">url <span class="token punctuation">,</span> result</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> proxy <span class="token punctuation">.</span> cache <span class="token punctuation">[</span> url <span class="token punctuation">]</span> <span class="token operator">=</span> result <span class="token punctuation">,</span>
<span class="token punctuation">}</span> <span class="token punctuation">;</span>

const proxy = {

cache : { } ,

getCachedResult : ( url ) => proxy . cache [ url ] ,

addCachedResult : ( url , result ) => proxy . cache [ url ] = result ,

} ;

2. Ghi nhật ký

Ghi nhật ký là một trường hợp sử dụng tuyệt vời cho thiết kế proxy. Nó cung cấp một lớp trừu tượng đối với các tác vụ ghi nhật ký, cho phép chúng tôi dễ dàng theo dõi các lỗi, cảnh báo và thông tin chung về những gì đang xảy ra trong ứng dụng.

Ví dụ: hãy xem xét đoạn mã sau:

<span class="token keyword">const</span> <span class="token function-variable function">getRequest</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">url</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token function">fetch</span> <span class="token punctuation">(</span> url <span class="token punctuation">)</span>
    <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">response</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> response <span class="token punctuation">.</span> <span class="token function">json</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span>
    <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">data</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> data <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

fetch ( url )

}

Để ghi nhật ký yêu cầu, chúng ta có thể sử dụng proxy để cung cấp một lớp trừu tượng trên hàm tìm nạp(). Bằng cách này, chúng tôi có thể lưu trữ URL yêu cầu và dữ liệu phản hồi, vì vậy chúng tôi có thể dễ dàng biết khi nào yêu cầu được thực hiện và những gì chúng trả về.

<span class="token keyword">const</span> <span class="token function-variable function">getRequestLogged</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">proxy <span class="token punctuation">,</span> url</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">fetch</span> <span class="token punctuation">(</span> url <span class="token punctuation">)</span>
    <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">response</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> proxy <span class="token punctuation">.</span> <span class="token function">logRequest</span> <span class="token punctuation">(</span> url <span class="token punctuation">,</span> response <span class="token punctuation">.</span> <span class="token function">json</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span>
    <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">data</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> data <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

const getRequestLogged = ( proxy , url ) => {

return fetch ( url )

. then ( ( response ) => proxy . logRequest ( url , response . json ( ) ) )

}

Mã cho proxy trông giống như thế này:

<span class="token keyword">const</span> proxy <span class="token operator">=</span> <span class="token punctuation">{</span>
  log <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span>
  <span class="token function-variable function">logRequest</span> <span class="token operator">:</span> <span class="token punctuation">(</span> <span class="token parameter">url <span class="token punctuation">,</span> result</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    proxy <span class="token punctuation">.</span> log <span class="token punctuation">.</span> <span class="token function">push</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>
      url <span class="token operator">:</span> url <span class="token punctuation">,</span>
      result <span class="token operator">:</span> result
    <span class="token punctuation">}</span> <span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span> <span class="token punctuation">;</span>

const proxy = {

log : [ ] ,

logRequest : ( url , result ) => {

proxy . log . push ( {

url : url ,

result : result

} )

}

} ;

3. Xác thực

Mẫu thiết kế proxy cũng tuyệt vời để xác thực. Nó có thể được sử dụng để ngăn chặn các thay đổi đối với một đối tượng làm mất hiệu lực dữ liệu.

Ví dụ, hãy xem xét một đối tượng mô hình cơ bản với một vài trường và một chức năng để thiết lập chúng.

<span class="token keyword">const</span> model <span class="token operator">=</span> <span class="token punctuation">{</span>
  name <span class="token operator">:</span> <span class="token string">''</span> <span class="token punctuation">,</span>
  age <span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">,</span>
  <span class="token function">setName</span> <span class="token punctuation">(</span> <span class="token parameter">name</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    model <span class="token punctuation">.</span> name <span class="token operator">=</span> name <span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token punctuation">,</span>
  <span class="token function">setAge</span> <span class="token punctuation">(</span> <span class="token parameter">age</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    model <span class="token punctuation">.</span> age <span class="token operator">=</span> age <span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

const model = {

name : '' ,

age : 0 ,

setName ( name ) {

model . name = name ;

} ,

setAge ( age ) {

model . age = age ;

}

Để tránh nhầm lẫn, chúng ta có thể sử dụng proxy để xác thực dữ liệu trước khi dữ liệu được đặt trong mô hình.

<span class="token keyword">const</span> <span class="token function-variable function">validateSetName</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">proxy <span class="token punctuation">,</span> name</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span> proxy <span class="token punctuation">.</span> <span class="token function">isValidName</span> <span class="token punctuation">(</span> name <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    model <span class="token punctuation">.</span> <span class="token function">setName</span> <span class="token punctuation">(</span> name <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'Invalid name'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

const validateSetName = ( proxy , name ) => {

if ( proxy . isValidName ( name ) ) {

model . setName ( name ) ;

} else {

console . log ( 'Invalid name' ) ;

}

Mã cho proxy trông giống như thế này:

<span class="token keyword">const</span> proxy <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function-variable function">isValidName</span> <span class="token operator">:</span> <span class="token punctuation">(</span> <span class="token parameter">name</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> name <span class="token punctuation">.</span> length <span class="token operator">&gt;</span> <span class="token number">2</span> <span class="token punctuation">,</span>
<span class="token punctuation">}</span> <span class="token punctuation">;</span>

const proxy = {

isValidName : ( name ) => name . length > 2 ,

} ;

Phần kết luận

Như bạn có thể thấy, mẫu thiết kế proxy là một cách tuyệt vời để cấu trúc mã và cải thiện hiệu suất của nó bằng cách cung cấp các lớp trừu tượng và xác thực. Nó đặc biệt hữu ích khi xử lý các tác vụ phức tạp và nhập dữ liệu. Chúng tôi hy vọng bài viết này đã cung cấp cho bạn thông tin cần thiết để bắt đầu sử dụng mẫu thiết kế proxy trong các dự án của riêng bạn.

Và cuối cùng

Như mọi khi, tôi hy vọng bạn thích bài viết này và học được điều gì đó mới. Xin 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 các bạn thích bài viết này thì hãy cho mình 1 like và subscribe để ủng hộ mình nhé. Cảm ơn.

Giới thiệu

https://tuan200tokyo.blogspot.com/2023/02/blog133-under Hiểu-proxy-design.html

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Blog#133: Hiểu về Proxy Design Pattern

Giới thiệu

Mẫu thiết kế proxy là gì?

Tại sao nên sử dụng Mẫu thiết kế proxy?

Mẫu thiết kế proxy được sử dụng ở đâu?

Mẫu thiết kế proxy hoạt động như thế nào?

Trường hợp sử dụng

1. Bộ nhớ đệm

2. Ghi nhật ký

3. Xác thực

Phần kết luận

Và cuối cùng

Giới thiệu

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript