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 …


This content originally appeared on DEV Community and was authored by Nhan Nguyen

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 };

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:


This content originally appeared on DEV Community and was authored by Nhan Nguyen


Print Share Comment Cite Upload Translate Updates
APA

Nhan Nguyen | Sciencx (2024-08-20T06:17:51+00:00) JavaScript Design Patterns – Behavioral – Template. Retrieved from https://www.scien.cx/2024/08/20/javascript-design-patterns-behavioral-template/

MLA
" » JavaScript Design Patterns – Behavioral – Template." Nhan Nguyen | Sciencx - Tuesday August 20, 2024, https://www.scien.cx/2024/08/20/javascript-design-patterns-behavioral-template/
HARVARD
Nhan Nguyen | Sciencx Tuesday August 20, 2024 » JavaScript Design Patterns – Behavioral – Template., viewed ,<https://www.scien.cx/2024/08/20/javascript-design-patterns-behavioral-template/>
VANCOUVER
Nhan Nguyen | Sciencx - » JavaScript Design Patterns – Behavioral – Template. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/08/20/javascript-design-patterns-behavioral-template/
CHICAGO
" » JavaScript Design Patterns – Behavioral – Template." Nhan Nguyen | Sciencx - Accessed . https://www.scien.cx/2024/08/20/javascript-design-patterns-behavioral-template/
IEEE
" » JavaScript Design Patterns – Behavioral – Template." Nhan Nguyen | Sciencx [Online]. Available: https://www.scien.cx/2024/08/20/javascript-design-patterns-behavioral-template/. [Accessed: ]
rf:citation
» JavaScript Design Patterns – Behavioral – Template | Nhan Nguyen | Sciencx | https://www.scien.cx/2024/08/20/javascript-design-patterns-behavioral-template/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.