Book Image

TypeScript Design Patterns

By : Vilic Vane
Book Image

TypeScript Design Patterns

By: Vilic Vane

Overview of this book

In programming, there are several problems that occur frequently. To solve these problems, there are various repeatable solutions that are known as design patterns. Design patterns are a great way to improve the efficiency of your programs and improve your productivity. This book is a collection of the most important patterns you need to improve your applications’ performance and your productivity. The journey starts by explaining the current challenges when designing and developing an application and how you can solve these challenges by applying the correct design pattern and best practices. Each pattern is accompanied with rich examples that demonstrate the power of patterns for a range of tasks, from building an application to code testing. We’ll introduce low-level programming concepts to help you write TypeScript code, as well as work with software architecture, best practices, and design aspects.
Table of Contents (15 chapters)
TypeScript Design Patterns
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface

Chain of Responsibility Pattern


There are many scenarios under which we might want to apply certain actions that can fall back from a detailed scope to a more general one.

A nice example would be the help information of a GUI application: when a user requests help information for a certain part of the user interface, it is expected to show information as specific as possible. This can be done with different implementations, and the most intuitive one for a web developer could be events bubbling.

Consider a DOM structure like this:

<div class="outer"> 
  <div class="inner"> 
    <span class="origin"></span> 
  </div> 
</div> 

If a user clicks on the span.origin element, a click event would start bubbling from the span element to the document root (if useCapture is false):

$('.origin').click(event => { 
  console.log('Click on `span.origin`.'); 
}); 
 
$('.outer').click(event => { 
  console.log('Click...