What are design patterns?

In software design, a concise and elegant solution to a specific problem.

Summary of experience — > rational use — > problem solving

SOLID five design principles

  • S Single responsibility principle(A program only does one thing well)
  • O Open and closed principle(Open for extensions, closed for modifications)
  • L Richter's substitution principle(Subclasses can override the parent class and appear in the same place as the parent class.)
  • I Interface independence principle(Keep interfaces single and separate)
  • D Dependency lead principle(Use methods that focus only on the interface and not on the implementation of concrete classes)

Why are design patterns needed?

  1. Readability (Use design patterns to improve code readability and further development efficiency)
  2. Extensibility (decoupling code with design patterns is a great way to make code modifiable and extensible)
  3. Reusability (using design patterns to reuse existing solutions without having to do the same thing again)
  4. Reliability (Using design patterns increases the robustness of the system and makes code authoring truly engineering)

Common Design Patterns

Singleton, Policy, proxy, publish and subscribe, command, Composite, Decorator, adapter

The singleton pattern

Unique & global access. Ensure that a class has only one instance and provide a global access point to access it.

Application scenario: Contents that can be cached, such as login pop-ups.

Before use:

After use:

The strategy pattern

Define a set of algorithms, encapsulate them one by one, and make them interchangeable. Extract, encapsulate and reuse seemingly unrelated code to make it easier to understand and expand.

Application scenario: There are different strategies to get one thing done. Examples include performance calculations, form validation rules.

Before use:

After use:

The proxy pattern

An object is provided with a proxy or placeholder to control access to it. Proxy objects can preprocess requests. Then decide whether to pass to the ontology object.

Application scenario: When it is inconvenient to access an object directly, or the requirements are not met, we can consider using a surrogate object to control the access of the object

Before use:

After use:

Publish and subscribe model

A one-to-many dependency between objects in which all dependent objects are notified when the state of one object changes.

Application scenario: DOM events, message notification

Command mode

An instruction to do something specific

Application scenario: Rich text editing toolbar

Portfolio model

Small objects are used to build larger objects, and objects are grouped into a tree structure to represent a parts-whole hierarchy

Application scenario: From IS — A to HAS — A

Decorator mode

The ability to dynamically add responsibilities to an object during program execution without changing the object itself.

Application scenario: Reports data and collects statistics on function execution time

Before use:After use:

Adapter mode

Resolves interface incompatibilities between two software entities by enabling them to work together without changing existing interfaces.

Application scenario: Incompatible interfaces.

Before use:

After use:

conclusion

There are four stages to learning design patterns:

  1. Understand the idea
  2. The rational use of
  3. To sum up your experience
  4. Achieve mastery through a comprehensive

The last

⚽ This article mainly introduces JavaScript common design patterns, hope to help you ~ ⚾ if you are interested in this article welcome to like + collect, more wonderful knowledge is waiting for you! 😘 🏀GitHub blogs at github.com/Awu1227. 🏉 I have other columns, please read ~ 🏐 play the beauty of CSS 🎱Vue from giving up to getting started 🎳 simple JavaScript