Looking for breakthrough ideas for innovation challenges? Try Patsnap Eureka!

Front-end component library construction method and device and storage medium

A technology of front-end components and construction methods, applied in the computer field, can solve the problems of incompatibility with different WEB development frameworks, unfavorable project development, testing and maintenance, poor reusability and portability, etc., to improve reusability and portability, guaranteeing validity and usability, and reducing the cost of testing

Active Publication Date: 2021-08-24
EISOO SOFTWARE
View PDF10 Cites 2 Cited by
  • Summary
  • Abstract
  • Description
  • Claims
  • Application Information

AI Technical Summary

Problems solved by technology

From the perspective of development, on the one hand, users need to readjust the performance and effects of components according to the requirements of product design, which leads to the need for multiple secondary developments; on the other hand, using different component libraries will inevitably increase Additional learning costs; in addition, from a testing point of view, multiple repeated tests on different component libraries are required, which will undoubtedly increase subsequent maintenance costs
[0004] In summary, the existing front-end component library is too dependent on the development framework, its reusability and portability are poor, and it cannot be compatible with different WEB development frameworks, resulting in low project delivery efficiency, which is not conducive to project development, testing and maintenance

Method used

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
View more

Image

Smart Image Click on the blue labels to locate them in the text.
Viewing Examples
Smart Image
  • Front-end component library construction method and device and storage medium
  • Front-end component library construction method and device and storage medium
  • Front-end component library construction method and device and storage medium

Examples

Experimental program
Comparison scheme
Effect test

Embodiment 1

[0039] Such as figure 1 As shown, a front-end component library construction method includes the following steps:

[0040] S1. Build the underlying processing module. The underlying processing module includes the underlying element unit and the visual model unit. The underlying element unit is used to initialize components, mount components, unload components, trigger binding events, and manage component status and life cycle;

[0041] Visual model units are used to implement internal two-way binding;

[0042] Wherein, the underlying element unit is provided with a template management subunit and a core subunit, and the template management subunit is used to process the HTML template set of the custom element and realize the separation of HTML and script;

[0043] The core subunit is used to coordinate the relationship between the scope, the visualization model and the underlying processing modules.

[0044] The core subunit is connected with an event bus, and the event bus ...

Embodiment 2

[0085] In this embodiment, the method proposed by the present invention is applied and the React framework is used. First, a project based on React needs to be prepared, and a component library is obtained by introducing the construction into the project. Using the component tags, properties and methods provided by the component library documents, the combined use of drop-down boxes and buttons and the two-way binding scenario are realized. The application code is as follows Figure 7 As shown, in this embodiment, eui-select represents a select drop-down component, eui-button represents a button; eui-width, eui-multiple, and eui-value represent component attributes, eui-change represents an event attribute, and onClick represents component event triggering; eui-model is two-way binding and interacts with eui-value.

Embodiment 3

[0087] This embodiment also uses the React framework to implement Figure 8 The combined usage scenario of the form, input box, drop-down box, and check box shown in Figure 9 is a schematic diagram of the application code of this embodiment, where eui-form represents a form component, eui-input represents an input box component, and eui- label indicates the label label, eui-checkbox indicates the check box component; eui-width, eui-multiple, eui-value indicate the component attribute, and eui-value indicates the assignment attribute.

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to View More

PUM

No PUM Login to View More

Abstract

The invention relates to a front-end component library construction method and device and a storage medium, and the method comprises the following steps: constructing an underlying processing module which comprises an underlying element unit and a visual model unit, wherein the bottom element unit is used for initializing a component, mounting the component, unloading the component, triggering a binding event and managing the state and life cycle of the component, the visual model unit is used for realizing internal bidirectional binding; and based on the constructed underlying processing module, customizing components, including customizing DOM labels, customizing attributes, customizing methods and customizing styles, so as to obtain an available component library. Compared with the prior art, the method does not depend on a development framework, is based on a user-defined DOM, and can provide a unified use mode for different frameworks, so that the reusability and transportability of the component library are improved, the project delivery efficiency is improved, and the development test and maintenance cost is reduced.

Description

technical field [0001] The present invention relates to the field of computer technology, in particular to a front-end component library construction method, device and storage medium. Background technique [0002] With the rapid development of front-end technology, front-end development frameworks emerge in an endless stream, such as JQuery, AngularJS, React, Vue.js, etc. At the same time, many supporting component libraries were born, such as: BootStrap, AntDesign, ElementUI, etc. It can be said that the evolution of the front-end development framework promotes the rapid advancement of technology, and also drives the emergence of various component libraries. [0003] The current mainstream front-end component libraries are all born with the mainstream development framework, that is, to write implementation methods and usage methods according to the characteristics of the development framework. Therefore, for different projects, most of them will choose different front-en...

Claims

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to View More

Application Information

Patent Timeline
no application Login to View More
Patent Type & Authority Applications(China)
IPC IPC(8): G06F8/34G06F8/38G06F16/958
CPCG06F8/34G06F8/38G06F16/986
Inventor 黄燕燕
Owner EISOO SOFTWARE
Who we serve
  • R&D Engineer
  • R&D Manager
  • IP Professional
Why Patsnap Eureka
  • Industry Leading Data Capabilities
  • Powerful AI technology
  • Patent DNA Extraction
Social media
Patsnap Eureka Blog
Learn More
PatSnap group products

Browse by: Latest US Patents, China's latest patents, Technical Efficacy Thesaurus, Application Domain, Technology Topic, Popular Technical Reports.

© 2024 PatSnap. All rights reserved.Legal|Privacy policy|Modern Slavery Act Transparency Statement|Sitemap|About US| Contact US: help@patsnap.com