Mẫu trang trí là gì?
Mẫu thiết kế trang trí là một cách thêm chức năng bổ sung cho một đối tượng hiện có mà không sửa đổi cấu trúc của nó. Điều này được thực hiện bằng cách bọc đối tượng hiện có bằng một đối tượng bên ngoài để mở rộng hành vi của nó.
Tại sao Mẫu thiết kế trang trí lại hữu ích?
Mẫu thiết kế trang trí rất hữu ích vì nó cho phép chúng ta dễ dàng thêm chức năng bổ sung vào một đối tượng hiện có mà không phải sửa đổi cấu trúc của nó. Điều này đặc biệt hữu ích khi chức năng chúng ta cần phức tạp hoặc cần nhiều mã để triển khai.
Ví dụ trong Javascript
Trang trí nhật ký
Trong ví dụ này, chúng tôi sẽ tạo Trình trang trí ghi nhật ký để ghi lại thông báo mỗi khi một chức năng được gọi.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <span class="token comment">// Create the base function</span> <span class="token keyword">function</span> <span class="token function">getData</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Do something</span> <span class="token punctuation">}</span> <span class="token comment">// Create the LoggingDecorator</span> <span class="token keyword">function</span> <span class="token function">LoggingDecorator</span> <span class="token punctuation">(</span> <span class="token parameter">fn</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</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">'Logging...'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token function">fn</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 comment">// Decorate the function</span> <span class="token keyword">let</span> decoratedFn <span class="token operator">=</span> <span class="token function">LoggingDecorator</span> <span class="token punctuation">(</span> getData <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Call the decorated function</span> <span class="token function">decoratedFn</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Logs 'Logging...'</span> |
Bộ nhớ đệm trang trí
Trong ví dụ này, chúng ta sẽ tạo một Caching Decorator lưu trữ kết quả của một lệnh gọi hàm trong bộ đệm. Chúng tôi cũng sẽ thêm một cơ chế để kiểm tra xem kết quả đã có trong bộ đệm chưa và trả về giá trị của nó mà không cần gọi hàm.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <span class="token comment">// Create the base function</span> <span class="token keyword">function</span> <span class="token function">getData</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Do something</span> <span class="token punctuation">}</span> <span class="token comment">// Create the cache</span> <span class="token keyword">let</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 comment">// Create the CachingDecorator</span> <span class="token keyword">function</span> <span class="token function">CachingDecorator</span> <span class="token punctuation">(</span> <span class="token parameter">fn</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Check if the result is in the cache</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> cache <span class="token punctuation">[</span> fn <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> cache <span class="token punctuation">[</span> fn <span class="token punctuation">]</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// Call the function and store the result in the cache</span> <span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token function">fn</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> cache <span class="token punctuation">[</span> fn <span class="token punctuation">]</span> <span class="token operator">=</span> result <span class="token punctuation">;</span> <span class="token keyword">return</span> result <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// Decorate the function </span> <span class="token keyword">let</span> decoratedFn <span class="token operator">=</span> <span class="token function">CachingDecorator</span> <span class="token punctuation">(</span> getData <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Call the decorated function</span> <span class="token function">decoratedFn</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
điều chỉnh trang trí
Trong ví dụ này, chúng tôi sẽ tạo một Trình trang trí điều tiết giới hạn một chức năng không được chạy nhiều hơn một lần trong một khoảng thời gian nhất định.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <span class="token comment">// Create the base function </span> <span class="token keyword">function</span> <span class="token function">getData</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Do something</span> <span class="token punctuation">}</span> <span class="token comment">// Create the ThrottlingDecorator</span> <span class="token keyword">function</span> <span class="token function">ThrottlingDecorator</span> <span class="token punctuation">(</span> <span class="token parameter">fn <span class="token punctuation">,</span> delay</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> lastCallTime <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Check if the function was called before </span> <span class="token keyword">if</span> <span class="token punctuation">(</span> lastCallTime <span class="token operator">&&</span> <span class="token punctuation">(</span> Date <span class="token punctuation">.</span> <span class="token function">now</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">-</span> lastCallTime <span class="token punctuation">)</span> <span class="token operator"><</span> delay <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// Call the function and store the time</span> lastCallTime <span class="token operator">=</span> Date <span class="token punctuation">.</span> <span class="token function">now</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token function">fn</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 comment">// Decorate the function</span> <span class="token keyword">let</span> decoratedFn <span class="token operator">=</span> <span class="token function">ThrottlingDecorator</span> <span class="token punctuation">(</span> getData <span class="token punctuation">,</span> <span class="token number">500</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Call the decorated function</span> <span class="token function">decoratedFn</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Phần kết luận
Mẫu thiết kế trang trí là một cách để dễ dàng mở rộng chức năng của một đối tượng hiện có mà không phải sửa đổi cấu trúc của nó. Chúng ta đã xem một số mẫu mã và có thể thấy mẫu này giúp việc thêm chức năng bổ sung vào các đối tượng trở nên rất dễ dàng như thế nào.
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.