Introduction to front-end UI component reuse tools

"Laziness" is the primary productive force.

Code reuse is always welcomed by programmers. The ultimate goal of front-end componentization is reuse. Today we will discuss in depth how to achieve the reuse of UI components.

Usually what we call components are often front-end components that contain business logic. In fact, it is difficult to reuse such components in a broad sense. At most, they can be reused in the same business line, but UI components are different. Without business constraints and only achieving reuse at the UI level, there is a lot of room for imagination, so here we only discuss UI components.

First define, UI components are the front-end code snippets of a web interface. Although it does not include business, basic JS effects are available, such as form verification, carousel effects, tab effects, etc. etc., which means that UI components can include htmlcssjs. The purpose of our reuse is not to simply copy and paste, but to achieve a certain degree of customization. For example, the interface content can be adjusted, the display style can be adjusted, and even JS effects can be set. Only in this way can it be truly of practical value. Component reuse.

Then let’s think about how to achieve the above goals. The first and most core thing is the component customization function. Customization means that the htmlcssjs code of a component can be modified, and the editing process must see what you get. We can implement this function with the help of a template engine. The idea is to write all component codes in template syntax, and then extract a configuration data. The template engine uses this data to parse the template, and then we get the final code that the browser can run. The process of modifying the configuration is also the process of editing the configuration data. After editing, the template engine is called in real time, the new code is re-parsed, and then the code is updated to the browser in real time, realizing what you see is what you get during the editing process.

Breaking it down, this function roughly needs to implement the following parts: acquisition of component code, visualization of configuration data, calling of template engine, editing of configuration files, component demonstration, and component html/css/js code copying .

To extend it further, the automatic acquisition of component code must rely on certain organizational rules, so the component management method must be agreed upon first. For example, the agreed component consists of a folder, which contains three template files temp.html/style.css/script.js, plus a config.json configuration data file. Components should have a general storage folder as a component library. In order to obtain component information, the component library also needs a directory file that provides a list of all components and information about each component, so that components can be obtained through this directory. Templates, configurations, and any information we need.

Based on the above analysis, we can start to develop a UI component management tool, which can realize component management, preview, editing, and code copy functions.

If you stop here, then the practical value of this tool is not very great. Focusing on front-end code reuse, functions can be further expanded. For example, can we participate in front-end component management from the design stage? The designer publishes and maintains the company's internal UI component library. During the project design stage, basic components can be selected from the component library to be adjusted, and the results are delivered to the front end. The front end only needs to restore the designer's components to get the functionality. It is directly used in the front-end code of the project.

To review, the function that needs to be implemented by the component library is to generate a special code from the editing result of the component. This code is used to restore the editing site of the component in the management tool, thereby realizing the design process to front-end development. handover. The implementation principle of this function is to merge the original configuration of the component with the modified configuration, obtain the modified configuration of the component, and then use it for rendering and display of the component, so that the design scene can be restored.

At this point, the functions we need are basically complete. At present, this tool has been developed. On the basis of the above functions, user management and usage statistics have been added to help better optimize the component library. construction.

Source code: Github
Preview:

If the project is helpful to you, please go to Github and star it as much as you want. You are welcome.

The above is the detailed content of Introduction to front-end UI component reuse tools. For more information, please follow other related articles on the PHP Chinese website!