CN109634660A - Program structure method for visualizing, equipment, storage medium and device - Google Patents
Program structure method for visualizing, equipment, storage medium and device Download PDFInfo
- Publication number
- CN109634660A CN109634660A CN201811206498.1A CN201811206498A CN109634660A CN 109634660 A CN109634660 A CN 109634660A CN 201811206498 A CN201811206498 A CN 201811206498A CN 109634660 A CN109634660 A CN 109634660A
- Authority
- CN
- China
- Prior art keywords
- page
- node
- page elements
- visualization
- description data
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 94
- 238000012800 visualization Methods 0.000 claims abstract description 74
- 238000007794 visualization technique Methods 0.000 claims description 16
- 238000004458 analytical method Methods 0.000 claims description 8
- 238000012545 processing Methods 0.000 claims description 8
- 241000239290 Araneae Species 0.000 claims description 5
- 238000000605 extraction Methods 0.000 claims description 5
- 230000000007 visual effect Effects 0.000 claims description 5
- 241000406668 Loxodonta cyclotis Species 0.000 claims description 2
- 238000010276 construction Methods 0.000 abstract description 5
- 230000008569 process Effects 0.000 description 47
- 238000005457 optimization Methods 0.000 description 12
- 238000010586 diagram Methods 0.000 description 8
- 230000008859 change Effects 0.000 description 6
- 238000004891 communication Methods 0.000 description 5
- 238000013507 mapping Methods 0.000 description 5
- 238000013079 data visualisation Methods 0.000 description 4
- 239000003086 colorant Substances 0.000 description 3
- 230000006870 function Effects 0.000 description 3
- 238000013515 script Methods 0.000 description 3
- 230000006835 compression Effects 0.000 description 2
- 238000007906 compression Methods 0.000 description 2
- 238000011161 development Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 230000009191 jumping Effects 0.000 description 2
- 239000000155 melt Substances 0.000 description 2
- 230000009467 reduction Effects 0.000 description 2
- 230000009471 action Effects 0.000 description 1
- 230000006399 behavior Effects 0.000 description 1
- 238000001035 drying Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/75—Structural analysis for program understanding
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
The invention discloses a kind of program structure method for visualizing, equipment, storage medium and devices, this method comprises: traversal page object list, using the page object traversed as current page object, the relationship description data between the page elements in the current page object are recorded；Instance object is established by default visualization tool；All page elements are extracted from the relationship description data, using all page elements as the node of the instance object；The line between the node is established according to the relationship description data, the line between the node and the node constitutes the relational network between the page elements；The relational network is shown by the default visualization tool.It is analyzed based on page data, is shown the relational network between the page elements by the default visualization tool, be intuitively shown the logicality that front end is developed, so that the logical construction of system should be readily appreciated that.
Description
Technical field
The present invention relates to computer information technology field more particularly to a kind of program structure method for visualizing, equipment, storage
Medium and device.
Background technique
Most of exploitation documents state the logical construction of system using the mode of text, although logic is rigorously easy to prove,
It is understood that property is poor, the complexity and logical relation of Front End structure are various, lead to the maintenance of system and improve to need
The arrangement of many times progress logical relations is expended, therefore, it is urgently to be resolved for how allowing Front End structure should be readily appreciated that
Technical problem.
Above content is only used to facilitate the understanding of the technical scheme, and is not represented and is recognized that above content is existing skill
Art.
Summary of the invention
The main purpose of the present invention is to provide a kind of program structure method for visualizing, equipment, storage medium and device, purports
In solution, structure is complicated for Front End in the prior art, it is difficult to the technical issues of understanding.
To achieve the above object, the present invention provides a kind of program structure method for visualizing, described program structures visualization side
Method the following steps are included:
It traverses page object list and records the current page using the page object traversed as current page object
Relationship description data between page elements in object；
Instance object is established by default visualization tool；
All page elements are extracted from the relationship description data, using all page elements as the example
Change the node of object；
The line between the node is established according to the relationship description data, the company between the node and the node
Line constitutes the relational network between the page elements；
The relational network is shown by the default visualization tool.
Preferably, described to establish the line between the node according to the relationship description data, the node and described
Line between node constitutes the relational network between the page elements, comprising:
All page elements are traversed, using the page elements traversed as the first element, the current page
Object includes a plurality of types of page elements；
Type identification is carried out to first element, obtains the first kind of first element；
Search the first calling rule corresponding with the first kind；
Content analysis is carried out to first element according to first calling rule, obtains first element and second
Relationship between element；
According to the relationship between first element and the second element establish the corresponding node of first element with
Line between the corresponding node of the second element；
Line between the node and the node constitutes the relational network between the page elements.
Preferably, it is described the relational network is shown by the default visualization tool after, described program
Structures visualization method further include:
The usage frequency of each page elements is calculated according to the relational network；
It is more than to preset the page elements of frequency threshold as target pages element, to the page object using the usage frequency
Surface element optimizes.
Preferably, the traversal page object list records institute using the page object traversed as current page object
After stating the relationship description data between the page elements in current page object, described program structures visualization method is also wrapped
It includes:
The relationship description data are sent to server by the server interface and deposited by invoking server interface
Storage.
Preferably, the relationship description data are sent to by the invoking server interface by the server interface
After server is stored, described program structures visualization method further include:
Inquiry instruction is received, page object to be checked is extracted from the inquiry instruction；
The corresponding relationship description data of the page object to be checked are inquired from the server.
Preferably, the traversal page object list records institute using the page object traversed as current page object
State the relationship description data between the page elements in current page object, comprising:
It traverses page object list and judges the current page using the page object traversed as current page object
Whether object handles completion；
If it is not, then recording the relationship description data between the page elements in the current page object.
Preferably, the default visualization tool includes: data-driven document.
In addition, to achieve the above object, the present invention also proposes a kind of program structure visualization device, and described program structure can
Include memory, processor and be stored in the program structure that can be run on the memory and on the processor depending on changing equipment
Visualization procedure, described program structures visualization program are arranged for carrying out the step of program structure method for visualizing as described above
Suddenly.
In addition, to achieve the above object, the present invention also proposes a kind of storage medium, program is stored on the storage medium
Structures visualization program, described program structures visualization program realize that program structure as described above can when being executed by processor
The step of depending on change method.
In addition, to achieve the above object, the present invention also proposes a kind of program structure visualization device, and described program structure can
Setting depending on makeup includes: spider module, for traversing page object list, using the page object traversed as current page pair
As recording the relationship description data between the page elements in the current page object；
Module is established, for establishing instance object by default visualization tool；
Extraction module, for extracting all page elements from the relationship description data, by all page members
Node of the element as the instance object；
Module is established, for establishing the line between the node, the node and institute according to the relationship description data
It states the line between node and constitutes relational network between the page elements；
Display module, for being shown the relational network by the default visualization tool.
In the present invention, page object list is traversed, using the page object traversed as current page object, described in record
Relationship description data between page elements in current page object establish instance object by default visualization tool,
The relationship description data between page elements are visualized in conjunction with the default visualization tool, improve data visualization effect
Rate；All page elements are extracted from the relationship description data, using all page elements as the instantiation pair
The node of elephant establishes the line between the node according to the relationship description data, between the node and the node
Line constitutes the relational network between the page elements, is opened up the relational network by the default visualization tool
Show, is intuitively shown the logicality that front end is developed, so that the logical construction of system for system optimization it can be readily appreciated that provide
Basic data improves system optimization efficiency.
Detailed description of the invention
Fig. 1 is the structural representation of the program structure visualization device for the hardware running environment that the embodiment of the present invention is related to
Figure；
Fig. 2 is the flow diagram of present procedure structures visualization method first embodiment；
Fig. 3 is the flow diagram of present procedure structures visualization method second embodiment；
Fig. 4 is the flow diagram of present procedure structures visualization method 3rd embodiment；
Fig. 5 is the structural block diagram of present procedure structures visualization device first embodiment.
The embodiments will be further described with reference to the accompanying drawings for the realization, the function and the advantages of the object of the present invention.
Specific embodiment
It should be appreciated that the specific embodiments described herein are merely illustrative of the present invention, it is not intended to limit the present invention.
Referring to Fig.1, Fig. 1 is the program structure visualization device knot for the hardware running environment that the embodiment of the present invention is related to
Structure schematic diagram.
As shown in Figure 1, the program structure visualization device may include: processor 1001, such as central processing unit
(Central Processing Unit, CPU), communication bus 1002, user interface 1003, network interface 1004, memory
1005.Wherein, communication bus 1002 is for realizing the connection communication between these components.User interface 1003 may include display
Shield (Display), optional user interface 1003 can also include standard wireline interface and wireless interface, for user interface
1003 wireline interface can be USB interface in the present invention.Network interface 1004 optionally may include standard wireline interface,
Wireless interface (such as Wireless Fidelity (WIreless-FIdelity, WI-FI) interface).Memory 1005 can be the random of high speed
Memory (Random Access Memory, RAM) memory is accessed, stable memory (Non-volatile is also possible to
Memory, NVM), such as magnetic disk storage.Memory 1005 optionally can also be the storage independently of aforementioned processor 1001
Device.
It will be understood by those skilled in the art that structure shown in Fig. 1 is not constituted to program structure visualization device
It limits, may include perhaps combining certain components or different component layouts than illustrating more or fewer components.
As shown in Figure 1, regarding as in the memory 1005 of computer storage medium a kind of may include operating system, network
Communication module, Subscriber Interface Module SIM and program structure visualization procedure.
In program structure visualization device shown in Fig. 1, network interface 1004 is mainly used for connecting background server, with
The background server carries out data communication；User interface 1003 is mainly used for connecting user equipment；Described program structure is visual
Change equipment and the program structure visualization procedure stored in memory 1005 is called by processor 1001, and executes implementation of the present invention
The program structure method for visualizing that example provides.
Based on above-mentioned hardware configuration, the embodiment of present procedure structures visualization method is proposed.
Referring to Fig. 2, Fig. 2 is the flow diagram of present procedure structures visualization method first embodiment, proposes this hair
Bright program structure method for visualizing first embodiment.
In the first embodiment, described program structures visualization method the following steps are included:
Step S10: traversal page object list, using the page object traversed as current page object, described in record
Relationship description data between page elements in current page object.
It should be understood that the executing subject of the present embodiment is described program structures visualization equipment, wherein described program knot
Structure visualization device can be the electronic equipments such as PC or server.The page listings include: event, the page, process and
The page object of four seed type of variable；The event includes: to click label (tab) page, shows order detail and jumps face label page
Face etc.；The page includes: Shipping Options Page, order detail page and face core page etc.；The process includes: that acquisition face core is lost order and obtained
Take face core false data etc.；The variable includes: that label (tab) has chosen pattern, order of having made loans, not by order, in processing
Order, whole orders and order to be processed etc..
It will be appreciated that in order to construct the relational network in all page objects between each page elements, then to all
Page object is traversed, in the page object list include all page objects, using the page object traversed as
Current page object.The state of the current page object need to be judged, if the current page object handles are completed,
There is no the relationship description data between the page elements in the current page object, without record；If the current page
The untreated completion of object then needs to record the relationship description data between the page elements in the current page object, the pass
System's description data include: the event saved in a manner of object-attribute and variable, the event and mistake saved in a manner of key-value
Mapping relations between journey.In the present embodiment, the step S10, comprising: traversal page object list, the page that will be traversed
Object judges whether the current page object handles completion as current page object；If it is not, then recording the current page
Relationship description data between page elements in object.
Step S20: instance object is established by default visualization tool.
It should be understood that the default visualization tool include data-driven document (Data-Driven Documents,
Abbreviation D3), D3 is the visual library JavaScript of a data, and D3 is suitble to do the visualization of big data processing, by described
D3 constitution and implementation example object then only need to add relationship between points to the corresponding addition node of the embodimentization, will be real
It applies example object to be shown, then realizes data visualization.
Step S30: extracting all page elements from the relationship description data, using all page elements as
The node of the instance object.
It should be understood that in order to which the relationship between all page elements of all pages is intuitively carried out visualization exhibition
Show, all page elements can be extracted from the relationship description data, is established further according to the relationship description data all
Page elements between relational network.The type of all page elements includes: the page, event and process.Building section first
Point obtains all page elements, converts the page elements to the node (nodes) of d3, while being arranged for each nodes
Corresponding subscript ix.
Step S40: the line between the node, the node and the node are established according to the relationship description data
Between line constitute the relational network between the page elements.
It should be noted that in order to show the relational network between each page elements by the default visualization tool,
Firstly, adding the node of the embodiment object；Secondly, constructing the side (lines) in the relational network, that is, two
Relationship between nodes can clearly show source (source) and purpose (target), establish all nodes it
Afterwards, then to all page elements it traverses, to clear the relationship between Chu's page, variable, process and event.One page
Variable and event may be contained in face, process and the page (such as pop-up page) may be contained in event, may be contained in the process
Other process and the page, the public function that the process of the page is namely called, the event are the touchings of page assembly element
Hair, page level contains event, but will be free from event inside process.
Step S50: the relational network is shown by the default visualization tool.
In the concrete realization, it after the relationship between each node and each node is all put in order, then can call described default
Visualization tool constructs the relational network, and the relational network of building is shown, then can intuitively pass through displaying
The relational network understands that complicated Front End structure, reduction understands difficulty, so that the efficiency of optimization system is improved,
So as to subsequent carry out Development of Modular.When being shown, can different types of page elements be arranged with different colors and carried out
It shows, so that different types is very clear.In the present embodiment, the default visualization tool includes: data-driven document；Institute
State step S20, comprising: instance object is established by the data-driven document；The step S50, comprising: pass through the number
The relational network is shown according to driving document.
In the first embodiment, page object list is traversed, using the page object traversed as current page object, note
The relationship description data between the page elements in the current page object are recorded, instantiation is established by default visualization tool
Object visualizes the relationship description data between page elements in conjunction with the default visualization tool, and improving data can
Depending on changing efficiency；All page elements are extracted from the relationship description data, using all page elements as the reality
The node of exampleization object establishes the line between the node, the node and the node according to the relationship description data
Between line constitute the relational network between the page elements, by the default visualization tool by the relational network
It is shown, is intuitively shown the logicality that front end is developed, so that the logical construction of system is it can be readily appreciated that excellent for system
Change and basic data is provided, improves system optimization efficiency.
It is the flow diagram of present procedure structures visualization method second embodiment referring to Fig. 3, Fig. 3, based on above-mentioned
First embodiment shown in Fig. 2 proposes the second embodiment of present procedure structures visualization method.
In a second embodiment, the step S40, comprising:
Step S401: traversing all page elements, described using the page elements traversed as the first element
Current page object includes a plurality of types of page elements.
It will be appreciated that in order to which the relationship between all page elements of all pages is intuitively carried out visualization exhibition
Show, all page elements can be extracted from the relationship description data, states data further according to the relationship face and establish and own
Page elements between relational network.The type of all page elements includes: the page, variable, event and process.Different
Type has corresponding call relation, can analyze out each page according to corresponding call relation according to the type of each page elements
The other kinds of page elements that surface element may include, so that it is determined that the call relation between each page elements out.To all
Page elements all need to be analyzed, the relationship between each page elements is found out, in order to all analyze all page elements
It arrives, all page elements can be traversed, using the page elements traversed as first element, then to described first
Element is analyzed, and the relationship between first element and all types of page elements is obtained.
Step S402: type identification is carried out to first element, obtains the first kind of first element.
It should be understood that can first be analyzed described to clear the relationship between first element and other page elements
The type of first element, the first kind is any one of the page, variable, event or process, if the first kind is
The page, the page may contain variable, and containing keyword (params), this page and this are established if encountering so
The connection of variable, that is, side, due to having had built up all nodes and subscript before, then it is known that source
And target, to establish the connection between the page and corresponding variable.
Step S403: the first calling rule corresponding with the first kind is searched.
It will be appreciated that different types corresponds to different calling rules, for example, the first kind is the page, then with
Corresponding first calling rule of the page is to judge whether the page includes variable and/or event；The first kind be event, then with
Corresponding first calling rule of event is to judge whether event includes process and/or the page；The first kind be process, then with
Whether it includes the page and/or other processes that corresponding first calling rule of process is in deterministic process.Inhomogeneity can be pre-established
Mapping table between type and corresponding calling rule is searched corresponding with the first kind from the mapping table
First calling rule.
Step S404: content analysis is carried out to first element according to first calling rule, obtains described first
Relationship between element and second element.
It should be noted that can be directed to according to the first calling rule of lookup to the first element for belonging to the first kind
Property analysis, according to the first kind of first element to searching between first element and other page elements
Relationship.For example, corresponding first calling rule is to judge whether event includes process or page if the first kind is the page
Face, that is to say, that first element may include the page elements that type is variable or event, then can be to first element
It is analyzed, judges whether first element includes type for event and/or the second element of variable, thus described in establishing
Relationship between first element and the second element.If the first kind is process, corresponding first calling rule is
It whether include the page and/or other processes in deterministic process, that is to say, that it is the page that first element, which may include type,
And/or the page elements of process, then first element can be analyzed, judge first element whether including type be
The second element of the page and/or process, but inside process will not include event, then without being carried out to first element
Judge whether comprising event.Described second that first element includes can be quickly analyzed according to first calling rule
Element, to quickly establish the relationship between first element and the second element.
In the concrete realization, when the first kind be event (event), according to Rule Extraction and establish event and mistake
Relationship between journey, variable or the page.For event, usually establish connection therewith is process and the page, is judged according to rule
Out, the relationship between event, process and the page is established, that is, the connection between node and node, that is, side.For mistake
Journey, what is usually contacted with process foundation is event and the page, is judged according to rule, establishment process, event and the page
Between relationship.
Step S405: it is corresponding that first element is established according to the relationship between first element and the second element
Node node corresponding with the second element between line.
It should be understood that the relationship between each page elements can be built into the line between each node, each page elements
A corresponding node obtains the relationship between first element and the second element, can be obtained corresponding each node it
Between line.
Step S406: the line between the node and the node constitutes the relational network between the page elements.
It will be appreciated that sorting out the line between the node and the node, that is, obtain between each page elements
Complicated system is clearly shown by the relational network, melts hair conducive to subsequent module by relational network.Can will not
The page object of same type is arranged different colors and is shown, so that different types is very clear.Such as: light green color indicates
Page pages, orange indicate event events, blue expression process procedure, and pink colour indicates variable；It can also be to initialization
The default option of system is arranged corresponding color and is shown, for example the default option of initialization system is indicated with black.
For example, can show on the effect picture shown: item menu includes several service agreements of green, order list
Trigger event is associated with Deng, order list and shows order detail, shows that this event of order detail be associated with the process acquisition of calling again
Face core order, at the same obtain face this process of core order be initialised again system default option view (veiw) switching after adjust
With.
In a second embodiment, all page elements are traversed, using the page elements traversed as first yuan
Element, the current page object include a plurality of types of page elements, type identification are carried out to first element, described in acquisition
The first kind of first element, searches the first calling rule corresponding with the first kind, and first calling rule includes
Call relation between the first kind and other types carries out content point to first element according to first calling rule
Analysis obtains the relationship between first element and second element, according between first element and the second element
Relationship establishes the line between the corresponding node of first element node corresponding with the second element, the node and institute
It states the line between node and constitutes relational network between the page elements, by the type according to each page elements, according to
Call relation corresponding with type analyzes page elements, so that the relational network between each page elements is quickly established,
Complicated system is clearly shown by the relational network, melts hair conducive to subsequent module.
It is the flow diagram of present procedure structures visualization method 3rd embodiment referring to Fig. 4, Fig. 4, based on above-mentioned
Second embodiment shown in Fig. 3 proposes the 3rd embodiment of present procedure structures visualization method.
In the third embodiment, after the step S50, further includes:
Step S60: the usage frequency of each page elements is calculated according to the relational network.
It will be appreciated that the relationship between each page elements is intuitively shown by the relational network, system can be passed through
The quantity on side existing for each page elements is counted, i.e., it is corresponding to calculate each page elements for the quantity of the line between each page elements
Usage frequency.For example, jumping the line between the face label corresponding node of the page and other nodes in the relational network
Quantity is 2, then the usage frequency for jumping the face label page is 2.
Step S70: being more than to preset the page elements of frequency threshold as target pages element, to institute using the usage frequency
Target pages element is stated to optimize.
It should be understood that the page elements that usage frequency is higher, more need to safeguard, once it goes wrong, it is associated with it
Page elements can all be affected.It can be analyzed according to historical data, the default frequency threshold is set, by the use
Frequency is more than the page elements of default frequency threshold as target pages element, the associated page member of target pages element
Element is more, in order to enable the page, event, variable and process are more smooth in the process of implementation, it can institute higher to usage frequency
It states target pages element and carries out emphasis optimization.
In the concrete realization, to the optimization of the target pages element, analysis behaviour can be carried out to the target pages element
Make, optimizes operation from many aspects, comprising: judge whether the target pages element includes picture, in the target pages
When element includes picture, picture load instruction is received, the first screen of picture is shown.For example, in the page object face element
When element includes picture, the target pages element only loads the first screen in load, when user continues roll screen backward
Subsequent pictures are loaded, in this way, that remaining picture request is just saved when user is to demand is had in first screen
?.The optimization operation further include: judging whether there is multiple scripts or pattern according to default merging rule can merge,
If it exists, multiple script or pattern are merged.For example, external script or pattern are merged, it is multiple to be merged into
It one, when that can be compressed, is compressed by tool of compression, many spaces can be saved after compression.It can also be its other party
The optimization in face, the present embodiment are without restriction to this.
In the third embodiment, after the step S10, further includes:
The relationship description data are sent to server by the server interface and deposited by invoking server interface
Storage.
It should be noted that calling the relationship description data for the ease of subsequent facilitate, can be incited somebody to action by server interface
Data are uploaded to the server to the relationship seemingly, and the relationship description data are stored in the database of the server
In.The relationship description data include: the event saved in a manner of object-attribute and variable, are saved in a manner of key-value
Mapping relations between event and process.
In the third embodiment, the invoking server interface, by the server interface by the relationship description number
According to being sent to after server stored, further includes:
Inquiry instruction is received, page object to be checked is extracted from the inquiry instruction；
The corresponding relationship description data of the page object to be checked are inquired from the server.
In the concrete realization, the relationship description data are stored in the database of the server, it can be at any time to institute
It states relationship description data to be inquired, the inquiry instruction may specify the page elements and page for inquiring any one page object
Relationship between surface element, the page to be checked can be any one page object, inquire for convenience, the server
It is middle that each page object is established into corresponding relationship with corresponding relationship description data and is stored.It then can be from the described right of the server
The corresponding relationship description data of the page object to be checked are inquired in should being related to.It is extracted from the inquiry instruction to be checked
Page object is ask, judges whether the page object to be checked handles completion, if processing is completed, relationship description number is not present
According to can always find pass corresponding with the page object to be checked from the database of the server if untreated completion
System's description data.It, can also be from the network of personal connections for the corresponding relationship description data of the page object to be checked inquired
The position that the corresponding relationship description data of the page object to be checked are found in network is carried out highlighted displaying, in order to open
Hair personnel preferably grasp the relationship between the corresponding page elements of the page object to be checked.
In the third embodiment, the usage frequency that each page elements are calculated according to the relational network uses frequency for described
Degree is more than the page elements of default frequency threshold as target pages element, is optimized to the target pages element, so that
The page, event, variable and process are more smooth in the process of implementation.
In addition, the embodiment of the present invention also proposes a kind of storage medium, it is visual to be stored with program structure on the storage medium
Change program, described program structures visualization program realizes program structure method for visualizing as described above when being executed by processor
The step of.
In addition, the embodiment of the present invention also proposes a kind of program structure visualization device, and described program structure can referring to Fig. 5
Setting depending on makeup includes: spider module 10, for traversing page object list, using the page object traversed as current page pair
As recording the relationship description data between the page elements in the current page object；
Module 20 is established, for establishing instance object by default visualization tool；
Extraction module 30, for extracting all page elements from the relationship description data, by all pages
Node of the element as the instance object；
Module 20 is established, the line established between the node according to the relationship description data, the node are also used to
Line between the node constitutes the relational network between the page elements；
Display module 40, for being shown the relational network by the default visualization tool.
It should be understood that the page listings include: the page object of event, the page, process and variable three types；Institute
The event of stating includes: to click label (tab) page, show order detail and jump the face label page etc.；The page includes: Shipping Options Page,
Order detail page and face core page etc.；The process includes: that acquisition face core loses order and acquisition face core false data etc.；The variable packet
Include: label (tab) has chosen pattern, order of having made loans, and does not pass through order, order, whole orders and order to be processed in processing
Deng.
It will be appreciated that in order to construct the relational network in all page objects between each page elements, then to all
Page object is traversed, in the page object list include all page objects, using the page object traversed as
Current page object.The state of the current page object need to be judged, if the current page object handles are completed,
There is no the relationship description data between the page elements in the current page object, without record；If the current page
The untreated completion of object then needs to record the relationship description data between the page elements in the current page object, the pass
System's description data include: the event saved in a manner of object-attribute and variable, the event and mistake saved in a manner of key-value
Mapping relations between journey.In the present embodiment, the step S10, comprising: traversal page object list, the page that will be traversed
Object judges whether the current page object handles completion as current page object；If it is not, then recording the current page
Relationship description data between page elements in object.
It should be understood that the default visualization tool include data-driven document (Data-Driven Documents,
Abbreviation D3), D3 is the visual library JavaScript of a data, and D3 is suitble to do the visualization of big data processing, by described
D3 constitution and implementation example object then only need to add relationship between points to the corresponding addition node of the embodimentization, will be real
It applies example object to be shown, then realizes data visualization.
It should be understood that in order to which the relationship between all page elements of all pages is intuitively carried out visualization exhibition
Show, all page elements can be extracted from the relationship description data, is established further according to the relationship description data all
Page elements between relational network.The type of all page elements includes: the page, event and process.Building section first
Point obtains all page elements, converts the page elements to the node (nodes) of d3, while being arranged for each nodes
Corresponding subscript ix.
It should be noted that in order to show the relational network between each page elements by the default visualization tool,
Firstly, adding the node of the embodiment object；Secondly, constructing the side (lines) in the relational network, that is, two
Relationship between nodes can clearly show source (source) and purpose (target), establish all nodes it
Afterwards, then to all page elements it traverses, to clear the relationship between Chu's page, variable, process and event.One page
Variable and event may be contained in face, process and the page (such as pop-up page) may be contained in event, may be contained in the process
Other process and the page, the public function that the process of the page is namely called, the event are the touchings of page assembly element
Hair, page level contains event, but will be free from event inside process.
In the concrete realization, it after the relationship between each node and each node is all put in order, then can call described default
Visualization tool constructs the relational network, and the relational network of building is shown, then can intuitively pass through displaying
The relational network understands that complicated Front End structure, reduction understands difficulty, so that the efficiency of optimization system is improved,
So as to subsequent carry out Development of Modular.When being shown, can different types of page elements be arranged with different colors and carried out
It shows, so that different types is very clear.In the present embodiment, the default visualization tool includes: data-driven document；Institute
It states and instance object is established by default visualization tool, comprising: instance object is established by the data-driven document；Institute
It states and is shown the relational network by the default visualization tool, comprising: by the data-driven document by institute
Relational network is stated to be shown.
In the present embodiment, page object list is traversed, using the page object traversed as current page object, record
The relationship description data between page elements in the current page object establish instantiation pair by default visualization tool
As the relationship description data between page elements are visualized in conjunction with the default visualization tool, improve data visualization
Change efficiency；All page elements are extracted from the relationship description data, using all page elements as the example
The node for changing object establishes the line between the node according to the relationship description data, the node and the node it
Between line constitute the relational network between the page elements, by the default visualization tool by the relational network into
Row is shown, is intuitively shown the logicality that front end is developed, so that the logical construction of system is it can be readily appreciated that be system optimization
Basic data is provided, system optimization efficiency is improved.
In one embodiment, the spider module 10 is also used to traverse all page elements, by what is traversed
Page elements include a plurality of types of page elements as the first element, the current page object；
Described program structures visualization device further include: identification module, for carrying out type identification to first element,
Obtain the first kind of first element；
Searching module, for searching the first calling rule corresponding with the first kind；
Analysis module, for carrying out content analysis to first element according to first calling rule, described in acquisition
Relationship between first element and second element；
It is described to establish module 20, it is also used to according to the relationship foundation between first element and the second element
Line between the corresponding node of first element node corresponding with the second element；
It is described to establish module 20, it is also used to the line between the node and the node and constitutes between the page elements
Relational network.
In one embodiment, described program structures visualization device further include: computing module, for according to the network of personal connections
Network calculates the usage frequency of each page elements；
Optimization module, for being more than the page elements of default frequency threshold using the usage frequency as page object face element
Element optimizes the target pages element.
In one embodiment, described program structures visualization device further include: calling module connects for invoking server
Mouthful, the relationship description data are sent to by server by the server interface and are stored.
In one embodiment, extraction module 30 are also used to receive inquiry instruction, extract from the inquiry instruction to be checked
Ask page object；
Described program structures visualization device further include: enquiry module, it is described to be checked for being inquired from the server
Ask the corresponding relationship description data of page object.
In one embodiment, the spider module 10, is also used to traverse page object list, the page object that will be traversed
As current page object, judge whether the current page object handles completion；
Described program structures visualization device further include: logging modle, for if it is not, then recording the current page object
In page elements between relationship description data.
In one embodiment, the default visualization tool includes: data-driven document.
The other embodiments or specific implementation of program structure visualization device of the present invention can refer to above-mentioned each side
Method embodiment, details are not described herein again.
It should be noted that, in this document, the terms "include", "comprise" or its any other variant are intended to non-row
His property includes, so that the process, method, article or the system that include a series of elements not only include those elements, and
And further include other elements that are not explicitly listed, or further include for this process, method, article or system institute it is intrinsic
Element.In the absence of more restrictions, the element limited by sentence "including a ...", it is not excluded that including being somebody's turn to do
There is also other identical elements in the process, method of element, article or system.
The serial number of the above embodiments of the invention is only for description, does not represent the advantages or disadvantages of the embodiments.If listing equipment for drying
Unit claim in, several in these devices, which can be, to be embodied by the same item of hardware.Word first,
Second and the use of third etc. do not indicate any sequence, can be title by these word explanations.
Through the above description of the embodiments, those skilled in the art can be understood that above-described embodiment side
Method can be realized by means of software and necessary general hardware platform, naturally it is also possible to by hardware, but in many cases
The former is more preferably embodiment.Based on this understanding, technical solution of the present invention substantially in other words does the prior art
The part contributed out can be embodied in the form of software products, which is stored in a storage medium
(such as read-only memory mirror image (Read Only Memory image, ROM)/random access memory (Random Access
Memory, RAM), magnetic disk, CD) in, including some instructions are used so that terminal device (can be mobile phone, computer,
Server, air conditioner or network equipment etc.) execute method described in each embodiment of the present invention.
The above is only a preferred embodiment of the present invention, is not intended to limit the scope of the invention, all to utilize this hair
Equivalent structure or equivalent flow shift made by bright specification and accompanying drawing content is applied directly or indirectly in other relevant skills
Art field, is included within the scope of the present invention.
Claims (10)
1. a kind of program structure method for visualizing, which is characterized in that described program structures visualization method the following steps are included:
It traverses page object list and records the current page object using the page object traversed as current page object
In page elements between relationship description data；
Instance object is established by default visualization tool；
All page elements are extracted from the relationship description data, using all page elements as the instantiation pair
The node of elephant；
The line between the node is established according to the relationship description data, the line structure between the node and the node
At the relational network between the page elements；
The relational network is shown by the default visualization tool.
2. program structure method for visualizing as described in claim 1, which is characterized in that described according to the relationship description data
The line between the node is established, the line between the node and the node constitutes the relationship between the page elements
Network, comprising:
All page elements are traversed, using the page elements traversed as the first element, the current page object
Including a plurality of types of page elements；
Type identification is carried out to first element, obtains the first kind of first element；
Search the first calling rule corresponding with the first kind；
Content analysis is carried out to first element according to first calling rule, obtains first element and second element
Between relationship；
According to the relationship between first element and the second element establish the corresponding node of first element with it is described
Line between the corresponding node of second element；
Line between the node and the node constitutes the relational network between the page elements.
3. program structure method for visualizing as claimed in claim 2, which is characterized in that described to preset visual chemical industry by described
After the relational network is shown by tool, described program structures visualization method further include:
The usage frequency of each page elements is calculated according to the relational network；
It is more than to preset the page elements of frequency threshold as target pages element, to the page object face element using the usage frequency
Element optimizes.
4. program structure method for visualizing as claimed in claim 3, which is characterized in that the traversal page object list, it will
The page object traversed as current page object, retouch by the relationship recorded between the page elements in the current page object
After stating data, described program structures visualization method further include:
The relationship description data are sent to server by the server interface and stored by invoking server interface.
5. program structure method for visualizing as claimed in claim 4, which is characterized in that the invoking server interface passes through
The relationship description data are sent to after server stored by the server interface, described program structures visualization side
Method further include:
Inquiry instruction is received, page object to be checked is extracted from the inquiry instruction；
The corresponding relationship description data of the page object to be checked are inquired from the server.
6. the program structure method for visualizing as described in any one of claims 1 to 5, which is characterized in that the traversal page
List object records the page elements in the current page object using the page object traversed as current page object
Between relationship description data, comprising:
It traverses page object list and judges the current page object using the page object traversed as current page object
Whether processing is completed；
If it is not, then recording the relationship description data between the page elements in the current page object.
7. program structure method for visualizing as claimed in claim 6, which is characterized in that the default visualization tool includes:
Data-driven document.
8. a kind of program structure visualization device, which is characterized in that described program structures visualization equipment includes: memory, place
It manages device and is stored in the program structure visualization procedure that can be run on the memory and on the processor, described program knot
The program structure visualization as described in any one of claims 1 to 7 is realized when structure visualization procedure is executed by the processor
The step of method.
9. a kind of storage medium, which is characterized in that be stored with program structure visualization procedure, described program on the storage medium
The program structure visualization side as described in any one of claims 1 to 7 is realized when structures visualization program is executed by processor
The step of method.
10. a kind of program structure visualization device, which is characterized in that described program structures visualization device includes: spider module,
For traversing page object list, using the page object traversed as current page object, the current page object is recorded
In page elements between relationship description data；
Module is established, for establishing instance object by default visualization tool；
Extraction module makees all page elements for extracting all page elements from the relationship description data
For the node of the instance object；
Module is established, for establishing the line between the node, the node and the section according to the relationship description data
Line between point constitutes the relational network between the page elements；
Display module, for being shown the relational network by the default visualization tool.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811206498.1A CN109634660A (en) | 2018-10-16 | 2018-10-16 | Program structure method for visualizing, equipment, storage medium and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811206498.1A CN109634660A (en) | 2018-10-16 | 2018-10-16 | Program structure method for visualizing, equipment, storage medium and device |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109634660A true CN109634660A (en) | 2019-04-16 |
Family
ID=66066387
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811206498.1A Pending CN109634660A (en) | 2018-10-16 | 2018-10-16 | Program structure method for visualizing, equipment, storage medium and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109634660A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112784133A (en) * | 2021-01-22 | 2021-05-11 | 中信银行股份有限公司 | Link visualization method, device, equipment and storage medium |
| CN116009849A (en) * | 2023-03-20 | 2023-04-25 | 网易（杭州）网络有限公司 | Graphic interface display method and device based on visual programming platform |
Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20080139191A1 (en) * | 2006-12-08 | 2008-06-12 | Miguel Melnyk | Content adaptation |
| CN101576891A (en) * | 2008-05-05 | 2009-11-11 | 北京瑞佳晨科技有限公司 | Method for analyzing web page form object nodes |
| CN101639840A (en) * | 2008-07-29 | 2010-02-03 | 华天清 | Method and device for identifying semantic structure of network information |
| JP2015162022A (en) * | 2014-02-26 | 2015-09-07 | インターナショナル・ビジネス・マシーンズ・コーポレーションＩｎｔｅｒｎａｔｉｏｎａｌ Ｂｕｓｉｎｅｓｓ Ｍａｃｈｉｎｅｓ Ｃｏｒｐｏｒａｔｉｏｎ | Device and method for supporting visualization of connection relation |
| CN105224632A (en) * | 2015-09-24 | 2016-01-06 | 四川长虹电器股份有限公司 | In XBRL technological frame, engine model is converted to the method for page model |
| CN105279089A (en) * | 2015-10-30 | 2016-01-27 | 中国人民财产保险股份有限公司 | Method and device for obtaining page element |
| CN106528068A (en) * | 2015-09-15 | 2017-03-22 | 中国电信股份有限公司 | Webpage content reconstruction method and system |
| CN107609175A (en) * | 2017-09-28 | 2018-01-19 | 华为技术有限公司 | Dom tree generation method and relevant device |
| CN107678943A (en) * | 2017-09-01 | 2018-02-09 | 千寻位置网络有限公司 | The page automated testing method of abstract page object |
| CN108363587A (en) * | 2018-03-07 | 2018-08-03 | 平安普惠企业管理有限公司 | Application program operation and monitoring method, device, computer equipment and storage medium |
-
2018
- 2018-10-16 CN CN201811206498.1A patent/CN109634660A/en active Pending
Patent Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20080139191A1 (en) * | 2006-12-08 | 2008-06-12 | Miguel Melnyk | Content adaptation |
| CN101576891A (en) * | 2008-05-05 | 2009-11-11 | 北京瑞佳晨科技有限公司 | Method for analyzing web page form object nodes |
| CN101639840A (en) * | 2008-07-29 | 2010-02-03 | 华天清 | Method and device for identifying semantic structure of network information |
| JP2015162022A (en) * | 2014-02-26 | 2015-09-07 | インターナショナル・ビジネス・マシーンズ・コーポレーションＩｎｔｅｒｎａｔｉｏｎａｌ Ｂｕｓｉｎｅｓｓ Ｍａｃｈｉｎｅｓ Ｃｏｒｐｏｒａｔｉｏｎ | Device and method for supporting visualization of connection relation |
| CN106528068A (en) * | 2015-09-15 | 2017-03-22 | 中国电信股份有限公司 | Webpage content reconstruction method and system |
| CN105224632A (en) * | 2015-09-24 | 2016-01-06 | 四川长虹电器股份有限公司 | In XBRL technological frame, engine model is converted to the method for page model |
| CN105279089A (en) * | 2015-10-30 | 2016-01-27 | 中国人民财产保险股份有限公司 | Method and device for obtaining page element |
| CN107678943A (en) * | 2017-09-01 | 2018-02-09 | 千寻位置网络有限公司 | The page automated testing method of abstract page object |
| CN107609175A (en) * | 2017-09-28 | 2018-01-19 | 华为技术有限公司 | Dom tree generation method and relevant device |
| CN108363587A (en) * | 2018-03-07 | 2018-08-03 | 平安普惠企业管理有限公司 | Application program operation and monitoring method, device, computer equipment and storage medium |
Non-Patent Citations (1)
| Title |
|---|
| 周俊、吴军华、刘继红: "一种改进的Web应用结构抽取方法", 现代计算机, no. 8, 25 April 2011 (2011-04-25), pages 53 - 57 * |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112784133A (en) * | 2021-01-22 | 2021-05-11 | 中信银行股份有限公司 | Link visualization method, device, equipment and storage medium |
| CN112784133B (en) * | 2021-01-22 | 2024-05-17 | 中信银行股份有限公司 | Link visualization method, device, equipment and storage medium |
| CN116009849A (en) * | 2023-03-20 | 2023-04-25 | 网易（杭州）网络有限公司 | Graphic interface display method and device based on visual programming platform |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9467344B2 (en) | Mechanism to display graphical IT infrastructure using configurable smart navigation | |
| Ghani et al. | Visual analytics for multimodal social network analysis: A design study with social scientists | |
| US8195443B2 (en) | Application level interface to network analysis tools | |
| CN109669688A (en) | Based on visual software development methodology, device, terminal device and storage medium | |
| US7885204B1 (en) | Method and system for testing network topology | |
| WO2017034917A1 (en) | Object-relation user interface for viewing security configurations of network security devices | |
| CN101770423A (en) | Test data generation method and test system | |
| CN111694615B (en) | Method, device, equipment and storage medium for data configuration | |
| CN112214210A (en) | Logistics business rule engine and configuration method, device, equipment and storage medium thereof | |
| CN109902251A (en) | Scheme Choice method, apparatus, terminal and readable storage medium storing program for executing based on decision tree | |
| CN109815154A (en) | A kind of test method, device, system and medium | |
| CN109828920A (en) | A kind of log analysis method, device and computer readable storage medium | |
| CN109634660A (en) | Program structure method for visualizing, equipment, storage medium and device | |
| US10719482B2 (en) | Data comparison | |
| CN113449444B (en) | Simulation method, computer device and storage medium for domain engineering | |
| CN112015382B (en) | Processor architecture analysis method, device, equipment and storage medium | |
| CN110110153A (en) | A kind of method and apparatus of node searching | |
| CN116048517A (en) | API (application program interface) generating method, system and device based on B/S (browser/Server) architecture application system | |
| CN108834202A (en) | Information displaying method and equipment | |
| Wong et al. | Visual matrix clustering of social networks | |
| CN113094610A (en) | Thematic map configuration method based on attribute configuration | |
| CN113382075A (en) | Enterprise information management platform, management method, electronic device and storage medium | |
| CN113157281A (en) | Development environment creation method and device, electronic equipment and storage medium | |
| CN104243201A (en) | Method and system for storing topological graph corresponding to network equipment test case | |
| CN113703747B (en) | Visual dynamic configuration system, configuration method and computer readable medium based on Unity chess and card game |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |