As a front-end developer who has been working for 1-3 years, one of the most frequently asked questions in an interview is what are the common design patterns in JS? How does it actually work in front end code? So I fell into deep meditation… (Recently, I have been watching the big talk data model, and my experience is recorded as follows. I hope to help those in need.)

Singleton mode

  • Definition: Ensure that a class has only one instance and provide a global access point to access it.
  1. Practical application: Vuex store in VUE
  2. Practical application: Redux store in React

Second, the strategy mode

  • Definition: a family of algorithms is defined, encapsulated separately, so that they can be replaced with each other, so that the change of the algorithm does not affect the users of the algorithm.

Policy patterns are used to encapsulate algorithms.

  • Summary: is a method that defines a series of algorithms. Conceptually, all of these algorithms do the same job, but the implementation is different. It can call all the algorithms in the same way, reducing the variety of algorithm classes and using direct coupling of algorithm classes
  • Advantages: 1> The Strategy class level of the policy pattern defines a list of reusable algorithms and behaviors for context. Inheritance helps absorb the common functionality of these algorithms. 2> Simplifies unit testing because each algorithm has its own class and can be tested separately through its own interface.

3. Agency mode

  • Definition: Provides a proxy for other objects to control access to that object.

Practical application: Nginx reverse proxy: before and after the implementation of cross-domain requests

Iterator pattern

Definition: Provides a way to access elements in an aggregate object sequentially without exposing the internal representation of the object. Application: Map foreach

5. Publish and subscribe (Observer)

Definition: A one-to-many dependency that allows multiple observer objects to listen to a topic object at the same time, and the topic object notifies all observer objects when it changes so that they can update themselves automatically. Application scenario: Redux in React is the subscriber mode. Event listener mode is also the subscriber mode. The component automatically updates its props or state when detecting changes, which is observer mode.

6. Command mode

Definition: Encapsulate a request as an object that allows you to parameterize customers with different requests, queue or log requests, and support undoable operations.

7. Combination mode

Definition: Grouping objects into a tree structure to represent a partial-whole hierarchy. The composite pattern makes the use of single objects and composite objects consistent.

8. Template method mode

Definition: an algorithmically operated stock frame,

Nine, enjoy yuan mode

Definition: Efficient support for a large number of fine-grained objects using sharing techniques.

X. Responsibility chain mode

11. Intermediary model

Definition: a mediation object encapsulates a list of object interactions. The mediator makes the objects loose by not having to explicitly refer to each other, and can change their interactions independently. Practical application: Form form

Decorator mode

13. State mode

Adapter mode

15. Appearance mode

16. Factory mode

Unfinished to be continued…