Template Method

The template approach pattern is a design pattern that encapsulates changes to improve system extensibility.

In traditional object-oriented languages, in a program that uses the template method pattern, the class of methods and execution order of the subclass are unchanged, so we abstract this logic into the template method of the parent class. However, how the methods of subclasses are implemented is variable, so we encapsulate this part of the changing logic in the subclass. By adding new subclasses, we can add new functionality to the system without changing the abstract superclass and other subclasses, which is open and closed.

Application scenarios

Let’s say we have some parallel subclasses, some of the same behaviors, some of the different behaviors. If the same and different behaviors are mixed in the implementation of each subclass, it means that the same behaviors are repeated in each subclass. But in fact, the same behavior can be moved to another single place, and the template method pattern was created to solve this problem. In the template method pattern, the same parts of the subclass implementation are moved up into the parent class, leaving the different parts to be implemented by the subclass. This is also a good example of the idea of generalization.

composition

The template method pattern consists of two parts:

• Abstract superclass: An algorithm framework that usually encapsulates a subclass in an abstract superclass, including the implementation of some common methods and the execution of all methods in the subclass (such as execution order, conditional execution, etc.).
• Concrete implementation subclasses: By inheriting this abstract class, subclasses also inherit the entire algorithm structure and can choose to override the methods of the parent class.

The sample

The template method pattern is usually implemented through inheritance, which is not often used in JavaScript development. Most of the time, we prefer mix-in methods to extend attributes to objects.

Abstract classes define how methods are executed (such as order of execution, conditional execution, etc.), and their subclasses can override the methods being executed as needed. The core is abstract classes.

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

    return this.complementaryFee(value);
  }
  complementaryFee(value) {
    return value + 10; }}class Tax1 extends Tax {
  constructor() {
    super(a); }overThousand(value) {
    return value * 1.1; }}Copy the code

Adapter Pattern

The purpose of the adapter pattern is to resolve interface incompatibilities between two interfaces/methods.

As a bridge between two incompatible interfaces, a wrapper class is added to wrap the new interface to fit the call of the old code, avoiding modifying the interface and calling code.

The sample

// 1. Methods are adapted to *******************************
const A = {
    show() {
       console.log('visible'); }}const B = {
    display() {
       console.log('visible'); }}// No adapter is used
A.show();
B.display();

// Use the adapter
const C = {
    show() {
       B.display();
    }
}
A.show();
C.show();

// 2. Interface adaptation *******************************
const data1 = {name: 'alan'};
const data2 = {username: 'tom'};
function sayName(param) {
    console.log(param.name);
}
function adapter(param) {
    return {name: param.username}
}
sayName(data1);
sayName(adapter(data2));
Copy the code

Differences between similar patterns

Some patterns are very similar in structure to the adapter pattern, such as the decorator pattern, the proxy pattern, and the facade pattern.

Each of these patterns is a “wrapping pattern” in which one object wraps another. Again, what differentiates them is the intent of the pattern.

• Adapter modeIt is primarily used to solve the problem of mismatches between two existing interfaces, regardless of how those interfaces are implemented or how they might evolve in the future. The adapter pattern enables synergies without changing existing interfaces.
• Decorator patternAnd the proxy mode also do not change the interface of the original object, but the decorator mode is used to add functionality to the object. The decorator pattern often forms a long chain of decorators, whereas the adapter pattern usually wraps once. The proxy pattern is designed to control access to objects and is usually wrapped only once.
• The appearance modelSome people think of the exterior pattern as an adapter for a set of objects, but the most notable feature of the exterior pattern is that it defines a new interface.

conclusion

The adapter pattern serves as a bridge in the middle, turning previously disparate interfaces into required standards that meet the needs of existing interfaces without modifying existing source code.

reference

JavaScript design patterns and development practices