Giới thiệu
Bạn đã bao giờ nghe nói về một mẫu thiết kế? Nó giống như một công thức viết code giúp bạn dễ dàng giải quyết các vấn đề thông thường. Một trong những mẫu này được gọi là mẫu thiết kế Mặt tiền, tất cả là về việc làm cho mã phức tạp trở nên dễ sử dụng hơn. Trong bài viết này, chúng ta sẽ nói về mẫu thiết kế Mặt tiền trong JavaScript và cách nó có thể giúp chúng ta viết mã tốt hơn.
Mẫu thiết kế mặt tiền là gì?
Mẫu thiết kế Mặt tiền là tất cả về việc tạo ra một giao diện đơn giản hơn cho một hệ thống phức tạp. Nó giống như có một người gác cửa mở cửa cho bạn, vì vậy bạn không phải lo lắng về cơ chế phức tạp đằng sau cánh cửa. Trong lập trình, điều này có nghĩa là tạo ra một chức năng hoặc đối tượng đơn giản che giấu sự phức tạp của một hệ thống lớn hơn, giúp các nhà phát triển khác sử dụng dễ dàng hơn.
Tại sao nên sử dụng Mẫu thiết kế mặt tiền?
Sử dụng mẫu thiết kế Mặt tiền có nhiều lợi ích. Trước hết, nó làm cho mã của bạn dễ sử dụng và dễ hiểu hơn, điều này rất quan trọng khi bạn làm việc với một nhóm các nhà phát triển. Nó cũng giúp giảm số lượng mã bạn cần viết, điều này có thể tiết kiệm thời gian và giảm khả năng xảy ra lỗi.
Khi nào bạn nên sử dụng mẫu thiết kế mặt tiền?
Bạn nên cân nhắc sử dụng mẫu thiết kế Mặt tiền khi bạn có một hệ thống phức tạp với nhiều bộ phận chuyển động. Đây có thể là bất kỳ thứ gì, từ ứng dụng web có nhiều thành phần khác nhau đến công cụ trò chơi có nhiều hệ thống khác nhau. Nếu bạn thấy mình viết rất nhiều mã soạn sẵn chỉ để khởi động và chạy hệ thống của mình, thì có lẽ đã đến lúc bạn nên nghĩ đến việc sử dụng mẫu thiết kế Mặt tiền.
Cách triển khai Mẫu thiết kế mặt tiền
Việc triển khai mẫu thiết kế Mặt tiền khá đơn giản. Dưới đây là một số trường hợp sử dụng cho nó:
1. Đơn giản hóa các cuộc gọi Ajax
Nếu đang làm việc với các ứng dụng web, bạn sẽ thường xuyên cần thực hiện lệnh gọi Ajax để tìm nạp dữ liệu từ máy chủ. Tuy nhiên, mã để thực hiện lệnh gọi Ajax có thể khá phức tạp, đặc biệt nếu bạn cần xử lý lỗi và thử lại các yêu cầu không thành công. Bằng cách tạo một đối tượng facade bao hàm chức năng Ajax, bạn có thể đơn giản hóa mã và làm cho nó dễ sử dụng hơn.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <span class="token keyword">const</span> ajaxFacade <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token function-variable function">get</span> <span class="token operator">:</span> <span class="token punctuation">(</span> <span class="token parameter">url <span class="token punctuation">,</span> data</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">fetch</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token template-punctuation string">`</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> url <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">?</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token keyword">new</span> <span class="token class-name">URLSearchParams</span> <span class="token punctuation">(</span> data <span class="token punctuation">)</span> <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token template-punctuation string">`</span></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 parameter">response</span> <span class="token operator">=></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 punctuation">,</span> <span class="token function-variable function">post</span> <span class="token operator">:</span> <span class="token punctuation">(</span> <span class="token parameter">url <span class="token punctuation">,</span> data</span> <span class="token punctuation">)</span> <span class="token operator">=></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> method <span class="token operator">:</span> <span class="token string">'POST'</span> <span class="token punctuation">,</span> body <span class="token operator">:</span> <span class="token constant">JSON</span> <span class="token punctuation">.</span> <span class="token function">stringify</span> <span class="token punctuation">(</span> data <span class="token punctuation">)</span> <span class="token punctuation">,</span> headers <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string">'Content-Type'</span> <span class="token operator">:</span> <span class="token string">'application/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 parameter">response</span> <span class="token operator">=></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 punctuation">}</span> <span class="token comment">// Example usage</span> ajaxFacade <span class="token punctuation">.</span> <span class="token function">get</span> <span class="token punctuation">(</span> <span class="token string">'/api/users'</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> page <span class="token operator">:</span> <span class="token number">1</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 parameter">users</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> users <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> |
2. Đơn giản hóa thao tác DOM
Làm việc với DOM có thể gây khó khăn, đặc biệt khi bạn cần tạo và thao tác với nhiều phần tử. Bằng cách tạo một đối tượng mặt tiền bao bọc chức năng DOM, bạn có thể làm việc với nó dễ dàng hơn.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token keyword">const</span> domFacade <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token function-variable function">createElement</span> <span class="token operator">:</span> <span class="token punctuation">(</span> <span class="token parameter">tagName <span class="token punctuation">,</span> props <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> children <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span></span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> element <span class="token operator">=</span> document <span class="token punctuation">.</span> <span class="token function">createElement</span> <span class="token punctuation">(</span> tagName <span class="token punctuation">)</span> <span class="token punctuation">;</span> Object <span class="token punctuation">.</span> <span class="token function">assign</span> <span class="token punctuation">(</span> element <span class="token punctuation">,</span> props <span class="token punctuation">)</span> <span class="token punctuation">;</span> children <span class="token punctuation">.</span> <span class="token function">forEach</span> <span class="token punctuation">(</span> <span class="token parameter">child</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token keyword">typeof</span> child <span class="token operator">===</span> <span class="token string">'string'</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> element <span class="token punctuation">.</span> <span class="token function">appendChild</span> <span class="token punctuation">(</span> document <span class="token punctuation">.</span> <span class="token function">createTextNode</span> <span class="token punctuation">(</span> child <span class="token punctuation">)</span> <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> element <span class="token punctuation">.</span> <span class="token function">appendChild</span> <span class="token punctuation">(</span> child <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 punctuation">;</span> <span class="token keyword">return</span> element <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token function-variable function">appendTo</span> <span class="token operator">:</span> <span class="token punctuation">(</span> <span class="token parameter">element <span class="token punctuation">,</span> parent</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> parent <span class="token punctuation">.</span> <span class="token function">appendChild</span> <span class="token punctuation">(</span> element <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// Example usage</span> <span class="token keyword">const</span> button <span class="token operator">=</span> domFacade <span class="token punctuation">.</span> <span class="token function">createElement</span> <span class="token punctuation">(</span> <span class="token string">'button'</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> className <span class="token operator">:</span> <span class="token string">'btn'</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token string">'Click me'</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> domFacade <span class="token punctuation">.</span> <span class="token function">appendTo</span> <span class="token punctuation">(</span> button <span class="token punctuation">,</span> document <span class="token punctuation">.</span> body <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
3. Đơn giản hóa lệnh gọi API của bên thứ ba
Khi làm việc với API của bên thứ ba, bạn có thể gặp phải các yêu cầu xác thực và ủy quyền phức tạp có thể gây khó khăn cho việc sử dụng API. Bằng cách tạo một đối tượng facade xử lý các yêu cầu này, bạn có thể sử dụng API dễ dàng hơn.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token keyword">const</span> thirdPartyApiFacade <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token function-variable function">getToken</span> <span class="token operator">:</span> <span class="token keyword">async</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span> <span class="token punctuation">(</span> <span class="token string">'/api/token'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> token <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</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 keyword">return</span> token <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token function-variable function">getData</span> <span class="token operator">:</span> <span class="token keyword">async</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> token <span class="token operator">=</span> <span class="token keyword">await</span> thirdPartyApiFacade <span class="token punctuation">.</span> <span class="token function">getToken</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span> <span class="token punctuation">(</span> <span class="token string">'/api/data'</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> headers <span class="token operator">:</span> <span class="token punctuation">{</span> Authorization <span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span> <span class="token string">Bearer </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> token <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token template-punctuation string">`</span></span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">return</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 comment">// Example usage</span> thirdPartyApiFacade <span class="token punctuation">.</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 function">then</span> <span class="token punctuation">(</span> <span class="token parameter">data</span> <span class="token operator">=></span> <span class="token punctuation">{</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> <span class="token punctuation">;</span> |
Phần kết luận
Mẫu thiết kế Mặt tiền là một công cụ mạnh mẽ để đơn giản hóa mã phức tạp. Bằng cách tạo một giao diện đơn giản cho một hệ thống lớn hơn, bạn có thể làm cho mã của mình dễ sử dụng và dễ hiểu hơn. Trong bài viết này, chúng tôi đã nói về những lợi ích của việc sử dụng mẫu thiết kế Mặt tiền và cung cấp ba trường hợp sử dụng thực tiễn tốt nhất. Cho dù bạn đang làm việc với các ứng dụng web, DOM hay API của bên thứ ba, mẫu thiết kế Mặt tiền có thể giúp bạn viết mã tốt hơ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.