Method and device for dragging part data management in large-screen data visualization development

Abstract

The invention discloses a device for dragging part data management in large-screen data visual development, and relates to the technical field of information. The device consists of a global data management module and a part data management module, the global data management module is composed of a global data memory, a global data display updater, a global data bidirectional binding module and aglobal data broadcaster; the part data management module is composed of a part global data receiver, a part interaction data receiver, a part data privatization module, a part data tangent plane module and a part data globalization module. According to the method, the traversal problem of data transmission in the parts is avoided, data processing between the parts is concentrated on a sender and areceiver of the data, and no matter which position the parts are in the DOM tree, the data processing operation is consistent. The display of the part and the change response of the data are processed in the part nearby, so that the readability and maintainability of the code are greatly enhanced, and the method is easy to grasp by developers and is suitable for popularization and application.

Description

technical field [0001] The invention relates to the field of information technology, in particular to the field of data visualization technology. Background technique [0002] With the development of Web front-end technology, the capabilities of the browser itself are getting stronger and stronger. Almost all business scenarios that can only be realized on the desktop software based on the operating system can be realized on the browser side. For example: the browser can Realize the functions of online excel and word, and realize the application of professional tools such as CAD, PhotoShop, 3DMax, etc. Compared with the traditional web management system, if we want to implement some complex software that can only be completed by desktop software on the browser side, the development of the web front-end requires a new technology stack and a new technology framework solution. The new technology stack is mainly that browser manufacturers endow browsers with various powerful ne...

AI Technical Summary

Problems solved by technology

[0017] 3. Interaction problems between subcomponents

Subcomponent interaction will encounter the following difficult problems. A component will define several events according to business requirements. Different events need to transmit the data of this component. When the event is triggered, how to transmit and receive data between components and receive interactive data How to intelligently make corresponding changes according to the received data, these processes are not available in existing front-end technologies

[0018] 4. Structural issues of data, logic and presentation

[0034] 1. The state management scheme cannot handle the relationship between Page and each sub-object well

The Page object is the object of business logic. On the R&D side, the specific sub-objects required by each sub-component are used. If we define the state of each component by entity component in the state tree, we need to merge these states into the Page object in the end. , due to the lack of a corresponding mechanism for this work, it is basically difficult to do a good job in the merge operation to ensure the singleness of the object and the two-way binding of the data

When we only store Page objects in the state tree, R&D needs to split Page objects for specific components. This method encounters three difficulties in development. The first difficulty is that we need to continuously merge sub-component data into Page objects. , because the Page object is two-way binding of data, which leads to the overall update of the Page. The consequence of this is that we may only add a line chart to the page, and the original components of the page may be re-initialized, which will cause the page to load. Slow, and some configuration operations will be lost. The second problem is that the subcomponent data stored by the Page component is not in the correct format required by the subcomponent. The subcomponent needs to convert the data format in the Page object before it can be used, for example: text size , the effective format of the page needs to add a unit, such as the pixel unit px, so that the page can be parsed correctly, but in the configuration panel, we often need to convert it into a digital format for the user to operate, which leads to the split data. Transformation, because JavaScript passes references to objects instead of passing values, which easily destroys the characteristics of singletons. In the actual development process, many junior and middle-level front-end engineers often cannot effectively deal with these problems

[0035] 2. The code writing method of state management is very cumbersome, and it mainly processes data, so it and page logic are always written in separate files. When we intend to define an integer type variable for state management, we need to write at least 4 files

A Page in the drag-and-drop tool will have hundreds of subcomponents. If they are all written in the state management, the amount of code will be very large, and the state management will be more difficult to maintain and understand.

[0036] However, dragging the large screen itself is a complex system with strong interactivity. Data changes are often reflected on the page quickly. Independent data processing often does more harm than good in such a scenario.

Images