object

Objects. The front end often creates objects and then starts stuffing things in. Personally, we’re still using objects as data structures, not doing object-oriented programming. Of course, this itself is related to the work of the front end, a lot of business work of the front end, is in the acquisition of data returned by the back end, some data logic processing, page display. With Java example, MVC framework, the front-end load is more view layer data rendering. So you probably don’t see a lot of use scenarios for front-end object-oriented programming.

With the advent of Knockout, Angular, React and Vue. The MV ** framework appears. At the framework design level, object-oriented programming is used.

In oop semantics, object characteristics are called properties and actions are called methods.

• Objects are often represented by nouns
• Methods are usually verbs
• Attribute values are adjectives

The React class components

Let’s now think about what the React component needs to do. React is an object that needs to be able to implement HTML and js code. Since an application is composed of multiple components, the React component also needs to implement data interaction during component nesting.

The React component basically consists of three parts — properties (props), state, and lifecycle methods. Here’s a quick overview of React.



The React component can accept parameters and may have its own state. Once the received parameters or their state changes, the React component executes the corresponding lifecycle methods and renders. The whole process fully conforms to the component responsibilities defined by traditional components.

Why React is structured like this? Let’s get rid of React and think of the current object in terms of native JS. Props is data communication for nested components. State is a private variable maintained internally by the component to monitor changes to the current component. The lifecycle and Render are internal methods, which should be borrowed from the Web Component’s Customer elements. Render is used to Render HTML, which is, after all, what the component ends up rendering. The lifecycle is about putting changes to components in the hands of the developer. In my opinion, setState method is a React protection mechanism for state, just like we create private variables in objects and use methods to assign values.

class

Similar objects often have some common constituent features. Sparrows and eagles, for example, are known collectively as birds because they both have bird characteristics. The above object is called an instance object of the class. The sparrow is an example of a bird.

A class is more of a template. Objects are created on a template basis.

The difference is that javascript, unlike traditional face-object languages like c++, Java, and c#, has virtually no classes at all. Everything in JS is object-based and relies on prototype systems.

In a traditional object-oriented language, a new object called sparrow is created based on birds. In js prototype-based object-oriented language: extend the bird object into a new object called sparrow.

• Prototype chain
• Js inheritance

The aggregation

Also called a combination. This is essentially the process of merging several existing objects into a new one, splitting the complexity of the transaction. Break down a complex transaction into small child objects. The complex object is then composed of multiple subobjects.

inheritance

Inheritance is an elegant way to reuse code. In a traditional OOP environment, inheritance usually refers to the relationship between classes. However, since there is no concept of class in JS, inheritance can only occur between objects.

When an object is inherited from another object, new methods are usually added to extend the inherited object. B inherits from A. For B, B can call methods inherited from A. At this time, B can extend its own new method, or add A method of the same name to A’s method. This process of redefining inherited methods is called overwrite.

• Js inheritance

Concept examples:

An important component of design patterns

• Schema name and description
• Problem statement: A diagram of the problem being solved so that we understand the pattern.
• Solution: Describe how a specific problem was solved in an understandable step.
• Design: The description of design patterns, especially the behavior of users and related interactions
• Implementation: How are design patterns applied
• Coexisting conditions: Whether other modes are required to support
• Relationships: Are patterns similar to other patterns, and what are the differences and connections?

Creational Design Patterns

• The factory pattern
• The singleton pattern
• The prototype pattern

Behavioral Design Patterns

• Observer model
• Iterator pattern
• The strategy pattern
• Template method pattern
• Chain of Responsibility model
• Command mode
• Memo mode
• The state pattern
• Visitor pattern
• The mediator pattern
• Interpreter mode

A configuration object

When our method has a lot of parameters, that is, when there are more than three parameters, it is very inconvenient to use the object as much as possible.

Advantages of using objects instead of parameters:

• Don’t worry about the order of arguments
• You can skip some parameter Settings
• Functions are more extensible
• The code is very readable, and we can use the attribute name to determine the meaning

Principle of single responsibility

The design principle is based on a corollary of Conway’s Law that the optimal structure of a software system is highly dependent on the internal structure of the organization developing the system. So each software module has one and only one reason to be changed.

This in the application of JS, mainly for the method and entity business boundary is what, how to divide the business boundary to create the corresponding object. And internal method division.

O Open and close principle

The core of this design principle, popularized by Bertrand Meyer in the 1980s, is that if a software system is to be more easily changed, it must be designed to allow new code to modify the system’s behavior, not just the original code.

• Development: Extension
• Off: Modify

Take the React Class component as an example: The established logic of the component is determined, and the declaration cycle is determined. We can extend our own methods to handle specific business logic and add pages to display in JSX language. These are the extensions supported by the component itself. For data modification, setState is used to modify the data to cause re-rendering. Refers to the privileged methods in the programming pattern above.

L Richter’s substitution principle

This design principle is a well-known subtype definition proposed by Barbara Liskov in 1988. In simple terms, this principle means that if you want to build a software system with replaceable components, those components must follow the same convention so that they can be replaced with each other.

For more information on how to use this in JS: check out Uncle Tom’s article

I Interface separation principle

This design principle mainly warns software designers to avoid unnecessary dependencies in their designs. Customers should not be forced to rely on methods they do not use. In JS it means a method.

D dependency reversal principle

This design principle states that high-level strategic code should not rely on code that implements low-level details; rather, code that implements low-level details should rely on high-level strategic code. It’s really decoupling. Specifically, I will introduce this principle in the following article: Design a simple version of the store decoration components.

www.cnblogs.com/TomXu/archi…

The most important problem with the dependency inversion principle is to ensure that the major components of an application or framework are decoupled from the non-essential low-level component implementation details. This will ensure that the most important parts of the application are not affected by low-level component changes

​