JavaScript Design Pattern Series 5: Adapter Pattern

This article shares with you the fifth series of JavaScript design patterns: Adapter pattern. Friends who are interested can take a look at

What is the adapter pattern

The so-calledAdapter pattern It is to use a new interface to wrap the existing interface and deal with the mismatch between the class and the API. Objects using this pattern are also called wrappers.
For example, we have an interface:

function api (x1, x2, x3) {
  console.log(x1 + x2 + x3);  // 用console.log来模拟接口的相关操作
}

Then we have an object data:

var obj = {
  a: '我',
  b: '很',
  c: '帅'
}

We can find that our data does not match the parameters of the interface and cannot be directly entered into obj Call the api.
What to do at this time? We can define an adapter function:

function adapter (o) {
  // 通过适配器函数来调用目的api
  api(o.a, o.b, o.c);
} 

adapter(obj);
// 我很帅

In this way, through the adapter function adapter() we can directly pass in obj to call the api, and the mismatch problem between the class and the api will be solved.

Summary

The adapter pattern is to wrap the existing interface with a new interface to handle the mismatch between the class and the API. Objects using this pattern are also called wrappers.
Applicable situations

1. Use an existing object, but its method or property interface does not meet our requirements.

2. Want to create a reusable object that can work with other unrelated or invisible objects

3. Want to The objects used already exist, but prototypal inheritance cannot be applied to each one to match its interface. An object adapter can adapt the interface methods or properties of its parent object.

Differences from other modes

1. Although adapters and bridges are similar, the starting point of bridging is different. The purpose is to separate the interface part from the implementation part so that they can be changed more easily and independently.

2. The decorator pattern enhances the functionality of an object without changing its interface, so its transparency to the program is better than that of the adapter.

3. Proxy mode defines a proxy for another interface without changing its interface.

4. The facade mode is to simplify an interface and does not provide additional options.

5. The adapter converts one interface to another interface, and does not filter out certain capabilities or simplify the interface.

Related recommendations:

JavaScript Design Pattern Series One: Factory Pattern

JavaScript Design Pattern Series Three: Builder pattern

The above is the detailed content of JavaScript Design Pattern Series 5: Adapter Pattern. For more information, please follow other related articles on the PHP Chinese website!