Template Method

Template Method is a behavioral pattern.

Intent: Define the skeleton of an algorithm in an operation, deferring some steps to subclasses. TemplateMethod allows subclasses to redefine specific steps of an algorithm without changing its structure.

For example,

If you don’t understand the above description, it doesn’t matter. Design patterns need to be used in daily work. Examples will help you understand better.

Template file

The document we print is a template document. We only need to write down basic personal information and then sign it. We do not need to do too much repetitive work, because most of the content can be solidified in some scenes. For example, when buying and selling houses, most of the terms of Party A and Party B are fixed. The biggest change is the difference between Party A and Party B. When we sign on the template, we use the template mode to reduce the time to write a lot of terms.

instantiation

Instantiation can also be thought of as a form of the template pattern, because for factory methods, we pass in different initial values that may give different results, and in effect leverage a large piece of functionality with very little code, acting as an abstraction.

Vue template

Vue templates are more in line with our intuitive understanding of templates. In this scenario, the template refers to the HTML template, and we only need to describe some variables in the template in the form of {}. We can generate a template DOM with only local variable changes, which is very convenient.

Intention to explain

Intent: Define the skeleton of an algorithm in an operation, deferring some steps to subclasses. TemplateMethod allows subclasses to redefine specific steps of an algorithm without changing its structure.

The design pattern was originally intended for object-oriented use, so the consideration was how to apply the template pattern to classes. First, define a parent class to implement some algorithms, and then put forward the methods that need to be overridden by the subclass. After the subclass overloads these partial methods, it can use the algorithm that the parent class implements to do some functions.

For example, the superclass function a() {b() + c()}, the subclass only needs to redefine b and C methods to reuse a’s algorithm (b and C add). Of course, this example is relatively simple, but the benefits of the template pattern come into play when the algorithm is more complex.

chart

• ConcreteClass: Concrete parent class. You can see that TemplateMethod is implemented in the parent class, which calls primitiveOperation1 and primitiveOperation2, so subclasses just need to override these two methods to take advantage of the algorithm provided by TemplateMethod.

Assuming TemplateMethod is what OpenDocument does to open a document, then primitiveOperation1 might be a CanOpen check, PrimitiveOperation2 is probably a ReadDocument method of reading documents.

We just have to focus on implementing the detailed methods, not on how they interact, and the parent will implement it for us. We can then call the subclass’s OpenDocument implementation to open the document.

The code example

The following example is written in typescript.

class View {
  doDisplay(){}

  display() {
    this.setFocus()
    this.doDisplay()
    this.resetFocus()
  }
}

class MyView extends View {
  doDisplay(){
    console.log('myDisplay')}}const myView = new MyView()
myView.display()
Copy the code

In this example, doDisplay represents the method that the parent class wants the subclass to override, usually starting with the DO convention.

disadvantages

When used in a class, the template pattern is essentially a fixed and immutable structure, which further reduces the scope of rewriting methods. The smaller the rewriting scope is, the higher the code reusability will be. Therefore, it must be used when there is a general algorithm that can be extracted, rather than using it excessively to save the number of lines of code.

In addition, in front-end development, HTML itself is very suitable for template mode, because HTML has a large number of tags describing the changing UI structure, there are too many reusable places, so it is very suitable for template mode, so do not think that template mode can only be used in the class, template mode can also be used in scaffolding. For example, fill in some forms to automatically generate code.

When learning this design pattern, pay attention to not solidified thinking in the class of its definition of the frame, because the design pattern was written in 1994, mentioned in the pattern has been a large number of transfer and application, whether to identify and do appropriate knowledge transfer, is the key to learning design pattern more than 20 years later today.

conclusion

The template mode is similar to the policy mode to some extent. The template mode is part of changing the algorithm, while the policy mode is to completely extract the policy, so it can change the whole algorithm.

Close read design Pattern-Template Method Template Pattern · Issue #305 · DT-fe /weekly

If you’d like to participate in the discussion, pleaseClick here to, with a new theme every week, released on weekends or Mondays. Front end Intensive Reading – Helps you filter the right content.

Pay attention to the front end of intensive reading wechat public account

Copyright Notice: Freely reproduced – Non-commercial – Non-derivative – Remain signed (Creative Commons 3.0 License)