Decorator mode

The Decorator Pattern allows you to add new functionality to an existing object without changing its structure. It does not rely deeply on how the object is created, but rather focuses on extending its capabilities.

advantages

  1. The decorator class is independent of the decorator class and will not be coupled with each other. The decorator pattern is an inherited alternative pattern, and the decorator pattern can dynamically extend the functionality of an implementation class.

disadvantages

  1. Multi-layer decoration is more complicated.

We need you to have a basic understanding of ES6 decorators before implementing the specific code

So I’m going to implement an interface constructor based on Axios and decorators and see how it ends up working, okay

import { GET, POST } from "./axiosHelp.js";
// Home interface homeajax.js
class HomeAjax {
  @GET("/api/user")
  getUserInfo() {}

  @POST("/api/userName")
  setUserName(params){}}export default new HomeAjax();

// home.js
import HomeAjax from "./HomeAjax";
HomeAjax.getUserInfo();
HomeAjax.setUserName({ userName: "Decorator mode" }).then((res) = > {
  console.log("User name changed successfully");
});
Copy the code

It can be seen that when defining the interface above, modifiers such as GET and POST are used to modify the corresponding interface function. Intuitively, it will be clear and unified, so how to implement it?

// axiosHelp.js
import axios from "axios";

// 1. Build an axios instance
const axiosInstance = axios.create({ baseURL: "/" });

// 2. Implement the basic Request method to encapsulate GET/POST
const Request = (method) = > (url) = > (target, name, descriptor,) = > {
  descriptor.value = function (params) {
    const axiosConfig = {
      method,
      url: url,
    };
    // The parameters needed to construct axios
    if (params) {
      if (method === "get") {
        axiosConfig.params = params;
      } else{ axiosConfig.data = params; }}constreq = axiosInstance({ ... axiosConfig });return req;
  };
  return descriptor;
};

// 3. Construct separate GET/POST decorator functions using wrapped Request methods
export const GET = Request("get");
export const POST = Request("post");
Copy the code

The above is the decorator mode based on ES6. The actual production of Request will be very complicated, involving different Request bodies, such as form type, JSON type, URL type, path parameter, encode, exception handling, global loading, etc. This is simplified to give you an intuitive feel for the implementation of the decorator pattern.

My understanding of the decorator pattern is that the decorator function is simple and clear to use, and that is what the method will do after it is decorated. However, the disadvantages are obvious: the implementation of decoration functions is obscure, and multiple decorations can be complicated.

Note: this feature is not currently supported by browsers, which requires a standard Babel to stage2, and typescript should be open to experimentalDecorators configuration. Of course, you can also use the traditional function pattern decorator, which is similar to higher-order functions.