この記事では、JavaScriptでのデコレーターデザインパターンとは何か、なぜ有用なのかを学びます。

デコレーターパターンとは何ですか？

デコレーターデザインパターンとは、既存のオブジェクトの構造を変更せずに、追加の機能を追加する方法です。これは、既存のオブジェクトを外部オブジェクトでラップして、その振る舞いを拡張することで実現します。

デコレーターデザインパターンはなぜ有用なのでしょうか？

デコレーターデザインパターンは、既存のオブジェクトの構造を変更せずに、簡単に追加の機能を追加できるため、有用です。特に、実装するには多くのコードが必要な機能がある場合に特に有用です。

Javascriptで例

ロギングデコレーター

この例では、関数が呼び出されるたびにメッセージをログに記録するロギングデコレーターを作成します。

// 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...'

キャッシュデコレーター

この例では、関数の呼び出しの結果をキャッシュに保存するキャッシュデコレーターを作成します。また、結果がキャッシュに既に存在するかどうかをチェックする機構を追加し、関数を呼び出すことなくその値を返すようにします。

// 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();

スロットルデコレーター

この例では、ある時間内に関数を1回しか実行しないように制限するスロットリングデコレーターを作成します。

// 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();

まとめ

デコレーターデザインパターンとは、既存のオブジェクトの機能を拡張する簡単な方法です。コードサンプルを見て、このパターンがオブジェクトに追加機能を簡単に追加することがわかりました。

Mình hy vọng bạn thích bài viết này và học thêm được điều gì đó mới.

Donate mình một ly cafe hoặc 1 cây bút bi để mình có thêm động lực cho ra nhiều bài viết hay và chất lượng hơn trong tương lai nhé. À mà nếu bạn có bất kỳ câu hỏi nào thì đừng ngại comment hoặc liên hệ mình qua: Zalo - 0374226770 hoặc Facebook. Mình xin cảm ơn.

Momo: NGUYỄN ANH TUẤN - 0374226770

TPBank: NGUYỄN ANH TUẤN - 0374226770 (hoặc 01681423001)