"Lazy" is the primary productive force.
Code reuse is always a favorite of programmers. The ultimate goal of front-end componentization is reuse. Today we will discuss in depth how to reuse UI components.
Usually the components we talk about are often front-end components that contain business logic, and it is actually difficult for such components to be reused in a broad sense. At most, they can be reused on the same business line, but the UI components are different. , without the constraints of the business, only to achieve reuse at the UI level, then there is a lot of room for imagination, so here we only discuss UI components.
First of all, a UI component is a front-end code fragment of a web interface. Although it does not include business, basic JS effects are available, such as form validation, carousel effect, tab effect, etc., that is to say UI Components can include html\css\js. 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 the JS effect can be set, so that it is truly practical. component reuse.
So let's think about how to achieve the above goals. The first and most core is the component customization function. Customization means that the html\css\js code of a component can be modified, and the editing process should be WYSIWYG. We can implement this function with the help of a template engine. The idea is to write all the component code in template syntax, and then extract a piece of configuration data. The template engine uses this data to parse the template to 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, which realizes the editing process WYSIWYG.
To disassemble, this function roughly needs to implement the following parts: acquisition of component code, visualization of configuration data, invocation of template engine, configuration file editing, component demonstration, and component html/css/js code copying.
By extension, the automatic acquisition of component code must depend on certain organizational rules, so we must first agree on the management method of components. For example, the convention component consists of a folder, which contains three template files `temp.html/style.css/script.js`, plus a `config.json` configuration data file. The component should have a general storage folder as the component library. In order to obtain the information of the component, the component library also needs a directory file, which provides a list of all components and the information of each component, so that the components can be obtained through this directory. template, configuration, and any information we need.
Based on the above analysis, we can start to develop a UI component management tool, which can realize the functions of component management, preview, editing, and code copying.
If you stop there, then the practical value of this tool is not very great. Around front-end code reuse, functions can be further expanded. For example, can you 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, you can select basic components from the component library to adjust, and deliver the results to the front end. The front end only needs to restore the designer's components to get the It is directly used in the front-end code of the project.
Looking back, the function that needs to be implemented by the component library is to generate a special code from the editing result of the component, which is used to restore the editing scene of the component in the management tool, so as to realize the handover from the design process to the front-end development. The realization principle of this function is to merge the original configuration of the component with the modified configuration, get the modified configuration of the component, and then use it for the rendering and display of the component to restore the design scene.
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, which will help to better optimize the construction of the component library.
Source: [Github]
Preview: http://refined-x.com/WidgetsPlayground/
If the project is helpful to you, please go to Github and star it as much as you like.