I have experienced many interviews, as well as the thinking and accumulation of my own projects. A little understanding of componentized development. In fact, developing a project is like building a Lego toy. Lego is made of different blocks, and each block can be connected to a different block. And there’s no effect from block to block. A turnip a pit, as long as this pit you can fill in, you are fit. And when we develop a project, we plan out those features. On the front end, which tags, which CSS, which JS can be abstracted into a building block. After the programming starts, the data and events needed by this building block are continuously improved. How to decouple the influences between the blocks as much as possible. Parent component child component data how to pass and change.

How to achieve componentization

Component implementation in SPA

  1. Define CSS, JS in a file using JSX or Template.
  2. This component needs those properties. Properties are passed in via props, defined directly in data, or defined in state management.
  3. Does the data need to be persisted, cached? Since spa initializes the data state (depending on the code you wrote) after a refresh, we need to keep track of the data, whether it is stored in localStorage or cookies, and whether we need to consider backward compatibility when using storage.
  4. Changes to data, whether committed to state management or through child component events, are listened for by the parent to change the data.
  5. Whether a function needs to be abstracted as a component depends on reuse requirements, since converting to a component often requires changing the structure of many pages, as well as data and events.
  6. The extensibility of a component, with minimal changes if the component is required to complete a new addition.

Component implementation in JQuery

  1. Write the style and functionality of the component first.
  2. Create a constructor that contains the creation of the component instance, converting the HTML code in 1 to a string for concatenation. Or a DocumentFragment object.
  3. Bind events.
  4. Pass the required data and parameters of the used event.
  5. Insert into the specified position,append.

Object-oriented development

When doing componentized development, you already have object-oriented development in mind. You can use constructors, prototypes, inheritance, and other object-oriented features. But this step doesn’t have to be mandatory for all scenarios, because sometimes the time you spend abstracting the components, and the robustness of the components, doesn’t make you happy. Code as required, think. Is what works best for developers. Moreover, the establishment of a development idea requires a lot of code and self-driven thinking.