Content overview:
- The purpose of componentization
- Which logic needs to be componentized
- Based on existing scenarios, how to design components to improve development efficiency
The purpose of componentization
There are many concepts or descriptions of componentization, which are not listed here. In our work, we will encounter many business scenarios and high-frequency controls with similar functions. Here we need to analyze, summarize, and abstract these large amounts of repetitive but not completely consistent codes, and finally encapsulate them into components for easy unification and upgrading. Reduce code copying and pasting, improve project code readability, and reduce maintenance and development costs.
In addition, sometimes a large business scenario is divided into multiple small modules to reduce the size of a single file or to develop collaboratively with multiple people.
All in all, the purpose of componentization is to reduce development costs and improve development efficiency.
Which logic needs to be componentized
Referring to some existing UI libraries and the situations encountered in daily work, I like to divide components into three categories: basic functional components, multiple business module reuse logic components, and business module split components.
Basic functional components: buttons, pagination, lists, charts, time pickers, etc.
Multiple business modules reuse logic components: These components usually refer to appearing in multiple business scenarios within a specific business scope. Such components are usually combined with specific data or interface secondary encapsulation combination on the basis of basic functional components. become. For example, general personnel drop-down selection, general type drop-down selection, and general view node drop-down selection.
Business module splitting components: Some business scenarios have a lot of content. If they are all put together, it will be too much code and difficult to manage, and it is not conducive to the collaborative development of multiple people, such as display pages such as Dashboard, orders, and personnel deployment. Action page
Design components based on existing scenarios to improve development efficiency
The previous projects involved usually rely on third-party UI component libraries due to insufficient manpower to undertake self-developed UI. Therefore, when designing components, it is more to combine the characteristics of UI components for secondary development. Take the project I was involved in before as an example (vue+element-ui). There are tons of lists and charts in business. In terms of lists, except for a few special types, most of them are the common display column + operation column mode. My processing method is to pass the column into the component as a configuration to reduce the template content. The chart is mainly implemented by echarts. In order to avoid the process of initializing, binding size monitoring, and logging out the instance when the component is destroyed every time it is used in the business code, I encapsulate these into the chart component for processing, and expose the options property to the outside world. Used to be responsible for delivering data changes.
(To be continued...)