define

Design pattern: In software design, a concise and elegant solution to a specific problem

Experience – Rational Application – Problem solving

Graph TD experience --> Rational application --> Problem solving

The principle of SOLID

  1. SingleThe principle of single responsibility, one procedure to do one thing well
  2. OpenOpen and closed principle, open for expansion and closed for modification
  3. LRichter’s substitution principle
  4. IInterface independence principle
  5. DDependency lead principle

Advantages and application scenarios

  1. legibility
  2. Can expand sex
  3. reusability
  4. Reliability: Increases robustness and makes code authoring truly engineering.

Eight common design patterns and applications

  1. The singleton pattern
  2. The strategy pattern
  3. The proxy pattern
  4. Publish and subscribe model
  5. Command mode
  6. Portfolio model
  7. Decorator mode
  8. Adapter mode

1. Singleton mode

A unique instance that can be accessed globally.

Application scenario: Contents that can be cached, for example, the login dialog box.

2. Policy mode

Define a set of algorithms, encapsulate them one by one, and make them interchangeable. The seemingly unrelated code is extracted, encapsulated and reused 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.

3. Proxy mode

Provides a proxy or placeholder for an object to control access to it. A surrogate object can preprocess the request before deciding whether to forward it to the ontology object.

Application scenario: When direct access to an object is not convenient, or the requirements are not met, we can consider using a surrogate object to control access to the object.

4. Publish and subscribe

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

Application scenarios: DOM events and message notifications.

5. Command mode

An instruction to do something specific

Application scenario: Rich text editor toolbar.

6. Combination mode

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

Application scenario: Is-is to HAS-A.

7. Decorator mode

The ability to dynamically add responsibilities to objects while the program is running without changing the objects themselves.

Application scenario: Data reporting and statistics function execution time.

8. Adapter mode

Solving interface incompatibilities between two software entities enables them to work together without changing existing interfaces.

Application scenario: Incompatible interfaces.

Summary & QA

Graph TD understand the idea --> Rational use --> summing up experience --> Integration

Design patterns and design patterns in JavaScript are very interesting, and the application scenario demo prepared in the teacher’s courseware is also particularly classic and easy to understand.