Summary of the application of Adapter adapter pattern in JavaScript design pattern programming (graphic tutorial)

The adapter pattern is used to solve the problem of interface incompatibility between two software entities. It is commonly used in JavaScript, especially AJAX. Next, let’s take a look at the application analysis of the Adapter adapter pattern in JavaScript design pattern programming

Definition
The Adapter pattern (Adapter) is to convert the interface (method or attribute) of a class (object) into another interface (method or attribute) that the customer wants. The adapter pattern makes the original Those classes (objects) that don't work together due to incompatible interfaces can work somewhat. Instant wrapper.

The alias of the adapter is wrapper, which is a relatively simple pattern. There are many scenarios in program development: when we try to call an interface of a module or object, we find that the format of the interface does not meet the current needs. There are two solutions at this time. The first is to modify the original interface implementation. However, if the original module is very complex, or the module we get is a compressed code written by someone else, modifying the original interface is not realistic. . The second method is to create an adapter to convert the original interface into another interface that the customer wants. The customer only needs to deal with the adapter.

Why do we need to use the adapter mode?
When developing an application, you will often need to replace a part of it, for example, a library that you use to save logs or something of that nature. When you replace it with a new library, it's unlikely that the new library will have exactly the same interface. From here, you have two options:
(1) Check all code and change everything pointing to the old library.
(2) Create an adapter so that the new library can use the same interface as the old library.
Obviously, in some cases, if your application is small, or has few references to the old library, it is more appropriate to go through the complete code and change it to match the new library, rather than adding a new A layer of abstraction that makes the code more complex. However, in most cases, it is more practical and time-saving to create an adapter.

JavaScript Code Example

When something can happen, it will definitely happen. First let's take a look at this little LoggerFactory, which allows us to more easily modify the logging interface we use.

var LoggerFactory = {
  getLogger: function() {
    return window.console;
  },
  ...
};

/* 用法示例 */
var logger = LoggerFactory.getLogger();
logger.log("something to log");

When we call getLogger it returns us the console object (console). For the purpose of this exercise we will pretend that the console object has only one method, log, and that it can only accept one parameter of type string. Next, we have another log interface, which will be more complicated because 1) it is implemented in JavaScript and is not native to the browser like the console; 2) it will send the log to the server through AJAX, which It also means that we have to encode the URL data (the code will not implement URL encoding specifically, because it has nothing to do with the adapter pattern we are going to talk about). Of course, it will use a different interface than the console.

var AjaxLogger = {
  sendLog: function() {
    var data = this.urlEncode(arguments);

    jQuery.ajax({
      url: "http://example.com/log",
      data: data
    });
  },

  urlEncode: function(arg) {
    ...
    return encodedData;
  },
  ...
};

We use jQuery's AJAX request, mainly to save time and ignore things that we don't want to do with the adapter mode. What we have to do now is create an adapter and change the previous LoggerFactory to return this adapter instead of the console object.

var AjaxLoggerAdapter = {
  log: function(arg) {
    AjaxLogger.sendLog(arg);
  }
};

/* 调整 LoggerFactory */

var LoggerFactory = {
  getLogger: function() {
    // 改变返回值
    return AjaxLoggerAdapter;
  },
  ...
};

We only made one line change to the existing code so that the entire program can use this new logging interface.

Complex Adapter

The logging interface is a very simple example. It has only one method, and it is not difficult to map it directly to the old method. In most cases this is not the case. You may encounter the problem that the parameters of these functions that are mapped to each other are completely different. The old interface may not have these parameters at all and you must handle them yourself. In some cases, you have to delete some parameters because the new interface simply doesn't use them. If the interface mapping between two objects is too difficult, we have to think of other ways. Anyway, I don't want to find and modify thousands of lines of old code.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Knowledge related to JavaScript typeof, null, and undefined

JavaScript Boolean (Boolean) object Related knowledge and usage

JavaScript Date (date) Related knowledge and usage

The above is the detailed content of Summary of the application of Adapter adapter pattern in JavaScript design pattern programming (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!