- vừa được xem lúc

Blog#136: The Decorator Design Pattern in JavaScript

0 0 17

Người đăng: NGUYỄN ANH TUẤN

Theo Viblo Asia

The main goal of this article is to help you improve your English level. I will use Simple English to introduce to you the concepts related to software development. In terms of IT knowledge, it might have been explained better and more clearly on the internet, but remember that the main target of this article is still to LEARN ENGLISH.


Hi, I'm Tuan, a Full-stack Web Developer from Tokyo 😊. Follow my blog to not miss out on useful and interesting articles in the future.

In this article, we'll learn what is the Decorator Design Pattern in JavaScript, why its useful...

What is the Decorator Pattern?

The Decorator Design Pattern is a way of adding additional functionality to an existing object without modifying its structure. This is done by wrapping the existing object with an outer object to extend its behavior.

Why is the Decorator Design Pattern useful?

The Decorator Design Pattern is useful because it allows us to easily add additional functionality to an existing object without having to modify its structure. This is especially useful when the functionality we need is complex or would require a lot of code to implement.

Example in Javascript

Logging Decorator

In this example, we will create a Logging Decorator that logs a message every time a function is called.

// Create the base function
function getData() { // Do something
} // Create the LoggingDecorator
function LoggingDecorator(fn) { return function () { console.log('Logging...'); fn(); }
} // Decorate the function
let decoratedFn = LoggingDecorator(getData); // Call the decorated function
decoratedFn(); // Logs 'Logging...'

Caching Decorator

In this example, we will create a Caching Decorator that stores the result of a function call in a cache. We will also add a mechanism to check if the result is already present in the cache and return its value without calling the function.

// Create the base function
function getData() { // Do something
} // Create the cache
let cache = {}; // Create the CachingDecorator
function CachingDecorator(fn) { return function () { // Check if the result is in the cache if (cache[fn]) { return cache[fn]; } // Call the function and store the result in the cache let result = fn(); cache[fn] = result; return result; }
} // Decorate the function 
let decoratedFn = CachingDecorator(getData); // Call the decorated function
decoratedFn();

Throttling Decorator

In this example, we will create a Throttling Decorator that limits a function to run no more than once in a certain amount of time.

// Create the base function 
function getData() { // Do something
} // Create the ThrottlingDecorator
function ThrottlingDecorator(fn, delay) { let lastCallTime; return function () { // Check if the function was called before  if (lastCallTime && (Date.now() - lastCallTime) < delay) { return; } // Call the function and store the time lastCallTime = Date.now(); fn(); }
} // Decorate the function
let decoratedFn = ThrottlingDecorator(getData, 500); // Call the decorated function
decoratedFn();

Conclusion

The Decorator Design Pattern is a way to easily extend the functionality of an existing object without having to modify its structure. We've seen some code samples and can see how this pattern makes adding additional functionality to objects very easy.

And Finally

As always, I hope you enjoyed this article and learned something new. Thank you and see you in the next articles!

If you liked this article, please give me a like and subscribe to support me. Thank you. 😊


The main goal of this article is to help you improve your English level. I will use Simple English to introduce to you the concepts related to software development. In terms of IT knowledge, it might have been explained better and more clearly on the internet, but remember that the main target of this article is still to LEARN ENGLISH.

Resource

Bình luận

Bài viết tương tự

- vừa được xem lúc

Tổng hợp các bài hướng dẫn về Design Pattern - 23 mẫu cơ bản của GoF

Link bài viết gốc: https://gpcoder.com/4164-gioi-thieu-design-patterns/. Design Patterns là gì. Design Patterns không phải là ngôn ngữ cụ thể nào cả.

0 0 270

- vừa được xem lúc

Giới thiệu về Builder Design Pattern

Nguồn: refactoring.guru. Builder. Ý đồ.

0 0 33

- vừa được xem lúc

Một ví dụ nhỏ về Factory method

Trong bài viết trước mình đã giới thiệu tới các bạn về Abstract Factory pattern, các bạn quan tâm có thể theo dõi lại tại đây. Để tiếp tục về chủ đề design pattern trong bài viết này mình sẽ trình bày những khái niệm, ưu nhược điểm và các sử dụng của một creational design pattern khác đó là Factory

0 0 27

- vừa được xem lúc

Tôi đã dùng Service Pattern trong NuxtJS như thế nào ?

Giới thiệu. Trong quá trình làm VueJS NuxtJS hay thậm chí là Laravel mình cũng hay áp dụng các pattern như Service hoặc Repository.

0 0 58

- vừa được xem lúc

Hướng dẫn Adapter Design Pattern

Trong bài viết này, chúng ta sẽ cùng tìm hiểu về Adapter Design Pattern qua cấu trúc, cánh triển khai, ví dụ, ưu điểm nhược điểm và ứng dụng của nó. Đây là bài viết đầu tiên của mình nên sẽ không trán

1 1 52

- vừa được xem lúc

Giới thiệu về Prototype Design Pattern

Ý đồ. Prototype là một creational design pattern cho phép bạn sao chép các object hiện có mà không làm cho code của bạn phụ thuộc vào các class của chúng.

0 0 43