This is the 10th day of my participation in the August More Text Challenge

preface

Today we are going to focus on structural patterns in design patterns.

Adapter Pattern

The adapter pattern can be used to accommodate existing interfaces with incompatible classes, and objects that use this pattern are also known as wrappers. For example, in the daily business development process, it is necessary to interconnect with the back-end and then implement its own business logic. But when the back-end API specification changes, we may need to change both the interface and the business logic, and the whole thing becomes uncontrollable. In this case, the adapter pattern can be used to solve the problem.

function getList() { // Request the back-end API and implement the front-end logic
    fetch('/api').then((res) = > {
        const data = Adapter(res.data);
        // TODO})}function Adapter(data) {
    for() {
        // TODO
    }
    return data
}
Copy the code

When the back-end API is adjusted, we only need to adjust the Adapter code Adapter, not the business logic code.

Bridge Pattern

Separate the abstract from its implementation so that they can all change independently. In other words, there are two roles in bridge mode:

  • Extended abstract class
  • Concrete implementation class

The simplest bridge mode:

var each = function (arr, fn) {
    for (var i = 0; i < arr.length; i++) {
        var val = arr[i];
        if (fn.call(val, i, val, arr)) {
            return false; }}};var arr = [1.2.3.4];
each(arr, function (i, v) {
    arr[i] = v * 2;
});
Copy the code

Each function is an abstract class, while fn function is the concrete implementation. In this code, the changes of the abstract part and the implementation part are not affected by each other, and can be changed independently. Therefore, although this example is simple, it is a typical application of bridge mode.

Filter Pattern (Filter, Criteria Pattern)

This pattern is already implemented in Javascript with the filter function we often use

[1.2.3].filter((currentValue,index,arr) = > true)
Copy the code
  • CurrentValue: must be. The value of the current element
  • Index: optional. The index value of the current element
  • Arr: optional. The array object to which the current element belongs

Composite Pattern

Common object-oriented languages, such as Go, implement inheritance through composition rather than inheritance. There are many disadvantages to inheriting this pattern, which are irrelevant to the discussion in this chapter. This mode is often used when writing Vue and React, and you may not even realize that it is a combination mode.

function render() {
    return (
        <div>
            <A />
            <B />
        </div>)}Copy the code

The composition pattern groups objects into a tree structure to represent a partial-whole hierarchy. In addition to being used to represent tree structures, another benefit of the composite pattern is that it enables consistent use of individual and composite objects through the polymorphic representation of objects.

Decorator Pattern

You’ve probably used mixin, Vue, React. Decorators are an architectural design pattern that promotes reuse.

They can be used to change existing systems to which we want to add functionality without deeply changing the dependency code of the objects that use them. A common reason for developers to use them is that their applications may contain features that require a large number of objects of unrelated types. Imagine having to define constructors for hundreds of different objects, say, a Javascript game.

The javascript language makes it fairly easy to change objects on the fly, directly overwriting an object or one of its methods

Function.prototype.before = function( beforefn ){
	 var __self = this; // Save a reference to the original function
	 return function(){ // Returns a "proxy" function that contains both the original function and the new function
	 beforefn.apply( this.arguments ); // Execute the new function and ensure that this is not hijacked
	 // The new function is executed before the original function
	 return __self.apply( this.arguments ); // Execute the original function and return the result of the original function.
	 // And make sure this is not hijacked}}Function.prototype.after = function( afterfn ){
	 var __self = this;
	 return function(){
	 var ret = __self.apply( this.arguments );
	 afterfn.apply( this.arguments );
	 returnret; }}; work.after(function(){
	 console.log('work:17:00 - 21:00')})Copy the code

Finally, a small advertisement, meituan school recruitment club recruitment push, no restrictions on departments, no restrictions on posts, no restrictions on the number of delivery, massive HC, come quickly come ~