JavaScript Design Patterns - Behavioral - Template

nhannguyendevjs

Nhan Nguyen

Posted on August 20, 2024

JavaScript Design Patterns - Behavioral - Template

The template pattern allows defining the skeleton of an algorithm in the superclass but lets subclasses override specific algorithm steps without changing its structure.

In this example, We are creating a simple template method to calculate taxes and extending this template to VAT and GST (type of taxes). In this way, we can reuse the same structure in several tax classes.

class Tax {
  calc(value) {
    if (value >= 1000) {
      value = this.overThousand(value);
    }

    return this.complementaryFee(value);
  }

  complementaryFee(value) {
    return value + 10;
  }
}

class VAT extends Tax {
  constructor() {
    super();
  }

  overThousand(value) {
    return value * 1.1;
  }
}

class GST extends Tax {
  constructor() {
    super();
  }

  overThousand(value) {
    return value * 1.2;
  }
}

export { VAT, GST };
Enter fullscreen mode Exit fullscreen mode

A complete example is here ๐Ÿ‘‰ https://stackblitz.com/edit/vitejs-vite-ccbqh8?file=template.js

Conclusion

Use this pattern when you want to let clients extend only particular steps of an algorithm but not the whole algorithm or its structure.


I hope you found it helpful. Thanks for reading. ๐Ÿ™

Let's get connected! You can find me on:

๐Ÿ’– ๐Ÿ’ช ๐Ÿ™… ๐Ÿšฉ
nhannguyendevjs
Nhan Nguyen

Posted on August 20, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

ยฉ TheLazy.dev

About