CN107015839B - Method and device for realizing front-end event agent - Google Patents
Method and device for realizing front-end event agent Download PDFInfo
- Publication number
- CN107015839B CN107015839B CN201610857497.8A CN201610857497A CN107015839B CN 107015839 B CN107015839 B CN 107015839B CN 201610857497 A CN201610857497 A CN 201610857497A CN 107015839 B CN107015839 B CN 107015839B
- Authority
- CN
- China
- Prior art keywords
- selector
- compiling
- determining
- character string
- event
- 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.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/42—Syntactic analysis
- G06F8/427—Parsing
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/42—Syntactic analysis
- G06F8/423—Preprocessors
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/43—Checking; Contextual analysis
- G06F8/433—Dependency analysis; Data or control flow analysis
Abstract
The application discloses a method and a device for realizing front-end event proxy, wherein the method comprises the following steps: after an event occurring in a webpage is monitored, determining each level node related to the event, acquiring node data of each level node, and comparing and matching the acquired node data with an object in a preset format pre-compiled in a webpage script according to each level node; the precompiled objects with set formats can reflect objects corresponding to node data of different levels, and when the node data are determined to be matched with the objects, the event is responded. Through the pre-compiling, when the event is triggered, the JS library can analyze the selector without calling an additional analysis method, but analyzes the precompiled object, so that the analysis speed can be effectively improved, and the JS library does not need to call an additional analysis method, so that the effect of reducing the code amount in the JS library can be achieved.
Description
Technical Field
The present application relates to the field of computer technologies, and in particular, to a method and an apparatus for implementing front-end event brokering.
Background
The webpage is essentially a HyperText Markup L anguage (HTM L) file, wherein codes of the webpage can adopt JavaScript (hereinafter referred to as JS) scripting language, and corresponding JS libraries (such as jQuery libraries) provide functions required by the JS scripting language so as to realize different functions.
At present, after an event occurs, the webpage responds to the event through a processing function provided in a JS library, and particularly, objects in the webpage are generally divided into different hierarchies such as html, body, p and the like, according to the language characteristics of HTM L and JS, when the event occurs, the webpage determines the hierarchy corresponding to the event, and accordingly, in background code, the hierarchy responds to the event through the processing function belonging to the hierarchy.
In the prior art, in order to reduce the setting of processing functions for each hierarchy, an event proxy method provided in the JS library (e.g., an event proxy method implemented by a delete function) is generally used. Specifically, by the event proxy method, a corresponding processing function can be added only at a parent layer in the code, when an event occurs, the corresponding layer of the event will pass the event to an upper layer (i.e., the parent layer) until the event passes to the layer with the processing function, and the processing function of the layer realizes the response to the event. The mode is convenient for the condition of frequently increasing and decreasing the hierarchy.
It should be noted that, in the prior art, in the process of responding to an event by a processing function, one of the parameters used is: the selector (selector), JS library, parses the selector using a correlation method (e.g., a Sizzle engine) to determine the element represented by the selector's expression for which the event is to be responded to using the handling function.
However, in the prior art, the above processes are all implemented in the JS library, and the JS library can be implemented only under the support of the corresponding code in the related method used in the process of analyzing the expression of the selector, which obviously increases the code amount in the JS library, and may also involve the process of traversing the total element set, which causes a long time to be consumed in the analyzing process of the selector, and further causes the time for responding to the event in the web page.
Disclosure of Invention
The embodiment of the application provides a method and a device for realizing front-end event proxy, which are used for solving the problem of low response efficiency to a proxy event in the prior art.
The method for realizing the front-end event agent provided by the embodiment of the application comprises the following steps:
after an event occurring in a webpage is monitored, determining each level node related to the event;
acquiring node data of the nodes of each hierarchy;
for each level node, according to the acquired node data, comparing and matching the node data with an object in a preset format pre-compiled in a webpage script; the object with the set format can reflect the object structure of the node data;
responding to the event when it is determined that the node data matches the object.
Another embodiment of the present application provides an apparatus for implementing front-end event proxy, including:
the determining module monitors an event occurring in a webpage and determines each level node related to the event;
the acquisition module acquires node data of the nodes of each hierarchy;
the matching module is used for comparing and matching the acquired node data with a pre-compiled object with a set format in a webpage script aiming at each level node; the object with the set format can reflect the object structure of the node data;
a response module to respond to the event when it is determined that the node data matches the object.
The embodiment of the application adopts at least one technical scheme which can achieve the following beneficial effects:
the method has the advantages that the selector in the webpage script can be compiled into the object with the specific format, so that the analysis process of the selector character string in the event proxy statement in the JS library can be converted into the matching process of the object with the specific format after the event is triggered.
Drawings
The accompanying drawings, which are included to provide a further understanding of the application and are incorporated in and constitute a part of this application, illustrate embodiment(s) of the application and together with the description serve to explain the application and not to limit the application. In the drawings:
fig. 1a is a schematic process diagram for implementing front-end event brokering according to an embodiment of the present application;
fig. 1b is a schematic view of a scenario for implementing front-end event brokering according to an embodiment of the present application;
fig. 2a to 2h are schematic diagrams of various JSON objects generated by pre-compilation according to an embodiment of the present disclosure;
fig. 3 is a schematic structural diagram of an apparatus for implementing front-end event brokering according to an embodiment of the present application.
Detailed Description
In order to make the objects, technical solutions and advantages of the present application more apparent, the technical solutions of the present application will be described in detail and completely with reference to the following specific embodiments of the present application and the accompanying drawings. It should be apparent that the described embodiments are only some of the embodiments of the present application, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.
As mentioned above, when a front-end event in a web page occurs, the event is delivered to an upper layer in a "bubbling" manner, and after the event is delivered to a hierarchy with processing functions, a response to the event can be implemented through the processing functions of the hierarchy, and one of the parameters used by the processing functions in responding to the event is: selector (selector), in the prior art approach, the JS library parses the selector using a correlation method (e.g., Sizzle) to determine the element represented by the selector's expression for which the event is to be responded to using the processing function.
However, the above processes in the prior art are all implemented in the JS library, and the JS library can be implemented only under the support of the corresponding code in the related method used in the process of analyzing the expression of the selector, which obviously increases the code amount in the JS library, and once the expression of the selector adopts the custom selector, the process of traversing the total element set may be involved, which causes a long time to be consumed in the analyzing process of the selector, and further causes the time for responding to the event in the web page.
Based on the above, the application provides a method for realizing front-end event proxy, by pre-compiling the analysis process of the selector, the time for analyzing the expression of the selector in the JS library can be effectively reduced, and the code amount in the JS library is also reduced.
In the embodiment of the present application, a web page is usually displayed through a browser or a client such as a corresponding application, and a corresponding JS library runs in the client, that is, the JS library can be used as an execution subject of a method for implementing a front-end event proxy, which does not constitute a limitation of the present application.
In general, a statement ". on (event, selector, proxy function)" of a JS library is a proxy statement of an event, in which "selector" and "event" are both expressed in the form of character strings, such as: at the position of the selector, the characters can be a, p and the like, and respectively represent two elements of a link and a paragraph in the webpage; at the location of the event, the string may be a click, which represents a click event. Of course, the statements in this example are not so limited, and are merely examples for illustration.
Based on the above, the following will specifically describe the method for implementing the front-end event broker provided in the embodiment of the present application:
as shown in fig. 1a, to implement the process of front-end event brokering (the application scenario of which is shown in fig. 1 b), the method specifically includes the following steps:
s101: when an event occurring in a webpage is monitored, determining each level node related to the event.
The process of listening may be implemented by a listening function provided in the JS library, which in the above example is essentially listening for a string at the selector location to determine if an event has triggered. In practical applications, the listening function may be only located at the top layer because: since the event triggered will "bubble" to the upper layer, the event will be monitored after the event is transmitted to the top layer provided with the monitoring function, and this does not constitute a limitation of the present application.
The hierarchical node is substantially a Document Object Model (DOM) node (hereinafter, simply referred to as a node for convenience of description) in a DOM. In other words, the DOM can express the JS source code of the web page background, such as in a tree structure, where each level of the tree structure matches a level in the JS source code of the web page, and each node represents an element.
In the event agent method, after an event is triggered, the event is passed to nodes at an upper layer in a bubbling manner until the event is passed to a hierarchy with processing functions, and the processing functions corresponding to the hierarchy respond to the event. Therefore, in the embodiment of the present application, it can be considered that the nodes of each level related to the event include: the node triggering the event and a plurality of ancestor nodes on the uploading path of the node.
It should be noted that, in some scenarios, the processing function is disposed at the top level, and then, the nodes at each level related to the event may include: the node that triggered the event, and to each of the top nodes.
S102: and acquiring the node data of the nodes of each level.
The DOM defines objects and attributes of elements in a web page, and the node data can be regarded as attribute data of the objects contained in the nodes. As a manner in this embodiment of the present application, the node data may include: the objects comprise elements (tag), classes (class), element identifiers (id), relationships (such as parent and child, brother and adjacent) of various nodes and the like.
It should be noted that the selector is expressed as an element, and therefore, in the embodiment of the present application, the node data may be regarded as the selector.
S103: and aiming at each level node, comparing and matching the acquired node data with a pre-compiled object in a set format in the webpage script.
The precompiled objects with set formats can reflect objects corresponding to node data of different levels.
In consideration of the fact that the selector needs to be analyzed by the JS library in the prior art, and the JS library may use a related method to analyze the selector in the process, so that time consumption is increased, in the application, the selector in the webpage script is pre-compiled, and the selector is converted into a simple language to express (for example, the selector can be compiled into an object in a JSON format), so that for the acquired node data of each node, the JS library uses the node data to compare and match with the JSON object, and an additional analysis method is not called any more.
Obviously, through the process of precompilation, when an event is triggered, the JS library can analyze the object after precompilation without calling an additional analysis method, and the analysis speed can be effectively increased in such a way, and the JS library does not need to call an additional analysis method, so that the effect of reducing the code amount in the JS library can be achieved.
S104: responding to the event when it is determined that the node data matches the object.
If the node data is matched with the object, the node is the node to be monitored, and the event can be responded.
In the embodiments of the present application, the matching may be considered as: and the object of the node data hits the JSON object.
Through the steps, the selector in the webpage script can be compiled into the object with the specific format in a precompiled mode, so that the analysis process of the selector character string in the event proxy statement in the JS library can be converted into the matching process of the object with the specific format after the event is triggered.
In the embodiment of the application, the JSON format is taken as a convenient and simple expression language, and the analysis speed of the JSON library can be increased, so that a selector in a webpage script can be pre-compiled into an object in the JSON format. Then, in the embodiment of the present application, in an actual application scenario, two parts of content implementation are mainly relied on: a precompilation process and a parsing of the precompiled object. These two parts will be described in detail below.
Firstly, pre-compiling:
in the embodiment of the application, the JSON format is taken as a convenient and simple expression language, and the analysis speed of the JSON library can be increased, so that the precompiled target format is the JSON format.
Based on this, specifically, the object in the pre-compiled setting format includes: and determining a selector contained in the webpage script corresponding to the webpage, performing pre-compiling on the selector to generate a JSON object, replacing the selector in the webpage script with the JSON object, and determining the replaced JSON object as an object with a set format.
In the embodiment of the present application, a selector that needs to be precompiled is first determined in the web script. The process can be as follows: determining an abstract syntax tree (ast) corresponding to the webpage script, searching for a node containing a preset character mark in the ast according to the preset character mark, and determining the content corresponding to the searched node as a selector.
It should be noted here that, determining the ast corresponding to the webpage script is substantially determining the ast of the JS source code in the webpage, and in actual application, the determining may be implemented by using a corresponding parsing tool, for example: the homunculus tool, which is not intended to be limiting of the present application, is provided herein.
The method in the JS source code can be expressed in a tree structure by ast, and the selector can be determined conveniently by ast. Considering that the aforementioned on () function is usually used in the event agent method, so that the tree structure for the on () function can be obtained by ast (for distinguishing from the aforementioned DOM node, the node in the tree structure of ast is subsequently referred to as the ast node), as shown in fig. 2a, the statements used in the event agent method are node.
After the selector is determined, the selector may be further analyzed, and it is considered that the analysis of the selector can determine data such as the type, attribute, and structure of the selector, so as to precompile the selector. Specifically, the pre-compiling each selector to generate a character string in JSON format includes: determining the ast corresponding to the selector, determining the type of the selector according to the ast corresponding to the selector, and performing precompilation on the selector according to the type to generate the JSON object.
Following the example shown in fig. 2a, in practical applications, after the selector is determined, a { } may be added after the character of the selector, so that the character of the selector becomes a CSS selector string, and on this basis, the above-mentioned homunculus tool may still be used to implement parsing of the CSS selector string, and generate an ast of the selector. Further, the selector is compiled into a JSON object on the basis of the ast of the selector.
In the embodiment of the present application, different types of selectors can be pre-compiled into different JOSN objects, specifically:
when the selectors are parallel selectors, determining character strings corresponding to each parallel selector, compiling the character strings corresponding to each selector into keys of the selectors, and generating JSON objects comprising the keys of each selector and preset identification key value pairs according to the sequence of the parallel structure.
In this case, the juxtaposed selector is typically at least one of a class selector, an element selector, an id selector. In the expression of characters, the above-mentioned selectors are expressed in the form of lower case letters,. characters, # characters, respectively.
For example: the parallel selector includes: class, div, # id { }. It can be seen that there are three selectors (parallel) at this time, and then, when pre-compiling is performed, the parallel three selectors can be compiled into the format shown in fig. 2 b. Wherein "_ v: true "is a preset identification key value pair that indicates the presence of the corresponding selector.
Of course, the three selectors are also referred to as basic selectors, and in practical applications, a JSON object as shown in fig. 2b can be used to pre-compile any one of the basic selectors. And are not to be construed as limiting the application herein.
It should be noted that, if the device is a wildcard selector (represented by an "-" symbol), it is pre-compiled using the same rule as the element selector, and will not be described in detail herein.
In addition, in practical application, the selector may also be a combined structure formed by basic selectors, and then the type of the selector is the combined structure; according to the structure, pre-compiling the selector to generate a JSON object, wherein the step of pre-compiling the selector comprises the following steps: and determining a character string corresponding to the selector, compiling the character string corresponding to the selector into keys of the selector, sequencing the keys of the selector according to a set combination sequence, and generating a JSON object comprising the sequenced keys of the selector and a preset identification key value pair.
Specifically, assume that the combination selectors are: class # id { } and div2# id2.class2{ }, when performing pre-compilation, they are compiled into a unified format according to a set order, and the result is shown in fig. 2 c. Of course, the order in this example does not constitute a limitation of this application.
When the type of the selector is a relational selector, according to the type, precompiling the selector to generate a JSON object, wherein the method comprises the following steps: and determining the character string corresponding to the selector, compiling the character string corresponding to the selector into keys of the selector, and sequencing the keys according to a reverse order to generate the JSON object containing the keys of the selector and the preset identification key value pair.
In an embodiment of the present application, the relational selector may include: inclusion relation (space is used for character expression), child selector (connector is used for character expression), adjacent selector (connector is +), brother selector (connector is-).
Specifically, if the inclusion selector is: div a { }, precompilation is performed in a reverse ordering manner, and the result is shown in fig. 2 c.
If the relation connector (>, +,. and-), the relation connector is compiled during pre-compiling, in other words, when the relation connector is included in the relation structure, the character string corresponding to the selector is compiled into the key of the selector, and the method further comprises the following steps: and compiling the relation connectors in the character strings corresponding to the selectors into relation keys in a preset format.
In the embodiment of the present application, the relational connectors are compiled as keys that are connected with "_" as shown in FIG. 2 d.
When the selector is an attribute selector, according to the type, pre-compiling the selector to generate a JSON object, wherein the steps of: determining a character string corresponding to the selector; wherein the character string comprises a key name character string, an attribute identifier and an attribute character string; compiling the key name character string into a key of a selector, compiling the attribute identifier into an identification key in a preset format, compiling the attribute character string into a multi-dimensional array, and generating a JSON object comprising the key of the selector, the identification key in the preset format and the multi-dimensional array comprising the preset key and a key value.
The attribute selector comprises an identifier of [ ] ", and characters in the identifier are attribute character strings, such as: div [ attr ]. When compiled, the identifier is compiled into an identification key in the form of "_[".
Of course, in practical applications, the attribute selector may be: div [ attr ], div [ attr2] { } or div [ attr ] [ attr2] { } etc., so the value corresponding to the identification key "_[" is a multidimensional array, i.e., at compile time, the [ ] structure is adopted, for example: for the attribute selectors div [ attr ], div [ attr2] { }, the compilation result is shown in fig. 2e, and as can be seen from the figure, the value corresponding to "_[" includes an array of two items of "[ attr ], {" v ": true }" and "[ attr2], {" v ": true }".
If the selector is div [ attr ] [ attr2] { }, the compilation result is shown in FIG. 2f, and as can be seen from the figure, the values for "_[" are "[ attr ], [ attr2], {" v ": true }", in other words, [ attr ], [ attr2] constitute the first term of the array.
As an extension of this, if the attribute selector includes a comparison operator (e.g.: result, >, < etc.), the first term in the multidimensional array includes the comparison operator, and the compiled result is shown in fig. 2g, taking the selector div [ attr ═ v ] as an example.
Of course, if the selector includes the relationship structure and the attribute structure, the pre-compiling is performed by combining the compiling rules of the relationship structure and the attribute structure, which is not described in detail herein.
When the type of the selector is the pseudo class selector, according to the type, pre-compiling the selector to generate a JSON object, wherein the method comprises the following steps: determining a character string corresponding to the selector; the character string comprises a key name character string and a pseudo character string; and compiling the key name character string into a key of a selector, compiling the pseudo character string into a multi-dimensional array, and generating a JSON object comprising the key of the selector, the pseudo character string and the multi-dimensional array comprising a preset key and a key value.
Such as: the selector div: the product of the method is shown in FIG. 2 h. If multiple pseudo classes are included, the multiple pseudo classes are formed into a multi-dimensional array.
The above is the precompilation process, after the JSON object is generated by precompilation, the JSON object is analyzed by the JSON library when an event is triggered, and the analysis process is as follows:
and acquiring attribute data (such as tag, class, id and the like) of the node according to an interface provided by the DOM. And further checking whether the key corresponding to the attribute data appears in the JSON object, if so, indicating that the matching is hit and responding to the event call-back if the JSON object corresponding to the key contains the identification key value pair.
Such as: < node > < div > </div > </node >
node.on(‘click’，‘div’，callback)
This indicates that the node includes an object "div". Meanwhile, if it is assumed that, for div { }, the JSON object is as shown in fig. 2a, then when the node is clicked, it is determined that the match is hit after performing the alignment match, and the response is ready.
The wildcard symbol is arbitrary, so whether the match occurs or not is not checked, and the match is successful as long as the content exists. Of course, in practical applications, if there is no corresponding key (# _ is nothing), the matching fails, and the process exits directly.
But if there is content and no _ v: true identifies that a key-value pair is present, then a further match is required:
and in the first mode, acquiring parent node parent of the current node by using a browser interface, and performing the matching process by taking the parent as the current node.
In the second method, if one of the keys _ >, _ plus _ is included in the current JSON object, it is described that the relevant system selector exists in the selector, and the analysis flows for all the relevant system selectors are consistent, so only one of the methods is taken as an example: and when the current node is _ +, indicating that an adjacent relation selector appears, acquiring a node prev which is immediately before the current node by using a DOM standard interface, if the current node is not existed, jumping out, and if the current node is existed, taking the node prev as the current node, and performing the matching process.
And thirdly, if the JSON object contains a key, the attribute exists in the selector, and when the key appears, the attribute value needs to be checked, which is a multidimensional array, and the multidimensional array is traversed dimension by dimension and item by item.
And if the JSON object contains a key, the selector is indicated to have a pseudo class, and all the pseudo classes are processed in the same way, so that the method is the same as the method in the following by way of example only. When the node is matched with the pseudo class, whether the matching result is successful or not is detected. When all the pseudo class groups are successful, item 2 is used as a new JSON object to perform the matching process.
The detection mode is a standard DOM interface, and the corresponding meanings of each pseudo class are as follows:
whether the root current node is a root node or not is a body node or no parent;
whether the current node of first-child is the first node of the same level, namely, no prev;
whether the last-child current node is the last node of the same level, namely no next;
whether the only-child current node is the only node, namely no prev and no next;
nth-child (n) whether the current node is the nth node;
nth-last-child (n) whether the current node is the nth node from last;
whether the current node of the first-of-type is the first node of the same level and the same type, namely all prevs do not have the same type;
whether the last-of-type current node is the last node of the same level and the same type, that is, all the next nodes do not have the same type;
whether the current node of only-of-type is the same level and only one node of the same type, namely all prev and next have no same type;
nth-of-type (n) whether the current node is the nth node of the same type;
nth-last-of-type (n) whether the current node is the nth last node of the same type;
whether the empty current node has no child node;
whether the checked current node is in a selected state;
whether an enabled current node is in an available state;
whether disabled current node is in a disabled state;
whether the target current node matches the current anchor point.
By combining the above, obviously, after the event is triggered, the analysis process for the selector character string in the event proxy statement in the JSON library can be converted into the matching process for the JSON object, so that the JSON library can not call an additional analysis method, and the efficiency of responding to the event is effectively improved.
Based on the same idea, the method for implementing front-end event proxy provided in the embodiments of the present application further provides a device for implementing front-end event proxy. As shown in fig. 3, the apparatus for implementing front-end event proxy includes:
the determining module 301, after monitoring an event occurring in a web page, determines each level node related to the event.
An obtaining module 302, configured to obtain node data of the nodes in each hierarchy.
And the matching module 303 is configured to compare and match the obtained node data with a pre-compiled object in a set format in the web script for each level node. The precompiled objects with set formats can reflect objects corresponding to node data of different levels.
A response module 304 that responds to the event when it is determined that the node data matches the object.
Wherein, the setting format comprises: the JSON format.
On this basis, the device further comprises: and a precompiling module 305 that determines a selector included in the web script corresponding to the web page, precompiles the selector to generate a JSON object, replaces the selector in the web script with the JSON object string, and determines the replaced JSON object as an object in a set format.
Further, the pre-compiling module 305 determines an abstract syntax tree ast corresponding to the web page script, searches for a node including a preset character mark in the ast according to the preset character mark, and determines the content corresponding to the searched node as a selector.
And the precompiling module 305 determines the ast corresponding to the selector, determines the type of the selector according to the ast corresponding to the selector, and precompiles the selector according to the type to generate the JSON object.
When the type of the selector is parallel, the pre-compiling module 305 determines a character string corresponding to each parallel selector, compiles the character string corresponding to each selector into a key of the selector, and generates a JSON object including the key of each selector and a preset identification key value pair according to the sequence of the parallel structure.
Wherein the selector comprises: at least one of a class selector, an element selector, and an id selector.
When the type of the selector is a combined structure, the pre-compiling module 305 determines the character string corresponding to the selector, compiles the character string corresponding to the selector into keys of the selector, sorts the keys of the selector according to a set combination sequence, and generates a JSON object including the sorted keys of the selector and a preset identification key value pair.
When the structure of the selector is a relational structure, the pre-compiling module 305 determines the character string corresponding to the selector, compiles the character string corresponding to the selector into keys of the selector, and sorts the keys in a reverse order to generate a JSON object including the keys of the selector and a preset identification key value pair.
When the relationship structure includes a relationship connector, the pre-compiling module 305 compiles the relationship connector in the character string corresponding to the selector into a relationship key in a preset format.
When the type of the selector is an attribute structure, the pre-compiling module 305 determines a character string corresponding to the selector; the character string comprises a key name character string, an attribute identifier and an attribute character string, the key name character string is compiled into a key of a selector, the attribute identifier is compiled into an identification key in a preset format, the attribute character string is compiled into a multidimensional array, and a JSON object comprising the key of the selector, the identification key in the preset format and the multidimensional array comprising the preset key and a key value is generated.
When the type of the selector is a pseudo-type structure, the pre-compiling module 305 determines a character string corresponding to the selector; the character string comprises a key name character string and a pseudo character string, the key name character string is compiled into a key of a selector, the pseudo character string is compiled into a multi-dimensional array, and a JSON object comprising the key of the selector, the pseudo character string and the multi-dimensional array comprising a preset key and a key value is generated.
The matching module 303 determines an object corresponding to the acquired node data, determines a key name and an identification key value pair of the JSON object, and performs comparison and matching according to the object corresponding to the node data and the key name and the identification key value pair of the JSON object precompiled in the webpage script.
In a typical configuration, a computing device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory.
The memory may include forms of volatile memory in a computer readable medium, Random Access Memory (RAM) and/or non-volatile memory, such as Read Only Memory (ROM) or flash memory (flash RAM). Memory is an example of a computer-readable medium.
Computer-readable media, including both non-transitory and non-transitory, removable and non-removable media, may implement information storage by any method or technology. The information may be computer readable instructions, data structures, modules of a program, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), Static Random Access Memory (SRAM), Dynamic Random Access Memory (DRAM), other types of Random Access Memory (RAM), Read Only Memory (ROM), Electrically Erasable Programmable Read Only Memory (EEPROM), flash memory or other memory technology, compact disc read only memory (CD-ROM), Digital Versatile Discs (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices, or any other non-transmission medium that can be used to store information that can be accessed by a computing device. As defined herein, a computer readable medium does not include a transitory computer readable medium such as a modulated data signal and a carrier wave.
It should also be noted that the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.
As will be appreciated by one skilled in the art, embodiments of the present application may be provided as a method, system, or computer program product. Accordingly, the present application may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present application may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
The above description is only an example of the present application and is not intended to limit the present application. Various modifications and changes may occur to those skilled in the art. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included in the scope of the claims of the present application.
Claims (11)
1. A method of implementing a front-end event broker, the method comprising:
after an event occurring in a webpage is monitored, determining each level node related to the event;
acquiring node data of the nodes of each hierarchy;
for each level node, according to the acquired node data, comparing and matching the node data with an object in a preset format pre-compiled in a webpage script; the precompiled objects with set formats can reflect objects corresponding to node data of different levels;
responding to the event when it is determined that the node data matches the object;
wherein, the setting format comprises: the JSON format is compared and matched with a pre-compiled object with a set format in a webpage script according to the acquired node data, and specifically comprises the following steps:
determining an object corresponding to the acquired node data;
determining a key name and an identification key value pair of the JSON object;
and comparing and matching the object corresponding to the node data, and the key name and the identification key value pair of the JSON object pre-compiled in the webpage script.
2. The method of claim 1, wherein pre-compiling the object in the set format specifically comprises:
determining a selector contained in a webpage script in the webpage script corresponding to the webpage;
pre-compiling the selector to generate a JSON object;
and replacing the selector in the webpage script by the JSON object string, and determining the replaced JSON object as an object with a set format.
3. The method of claim 2, wherein determining the selector included in the web page script specifically comprises:
determining an abstract syntax tree ast corresponding to the webpage script;
in the ast, searching a node containing a preset character mark according to the preset character mark;
and determining the content corresponding to the searched node as a selector.
4. The method of claim 3, wherein pre-compiling the selectors to generate JSON objects comprises:
determining the ast corresponding to the selector;
determining the type of the selector according to the ast corresponding to the selector;
and according to the type, pre-compiling the selector to generate a JSON object.
5. The method of claim 4, wherein the type of selector is a parallel configuration;
according to the type, pre-compiling the selector to generate a JSON object, which specifically comprises the following steps:
determining a character string corresponding to each selector in parallel;
compiling the character string corresponding to each selector into the key of the selector, and generating a JSON object comprising the key of each selector and a preset identification key value pair according to the sequence of the parallel structure;
wherein the selector comprises: at least one of a class selector, an element selector, and an id selector.
6. The method of claim 5, wherein the type of the selector is a composite structure; according to the type, pre-compiling the selector to generate a JSON object, which specifically comprises the following steps:
determining a character string corresponding to the selector;
and compiling the character strings corresponding to the selectors into keys of the selectors, sequencing the keys of the selectors according to a set combination sequence, and generating a JSON object comprising the sequenced keys of the selectors and a preset identification key value pair.
7. The method of claim 4, wherein the structure of the selector is a relational structure; according to the type, pre-compiling the selector to generate a JSON object, which specifically comprises the following steps:
determining a character string corresponding to the selector;
and compiling the character strings corresponding to the selectors into keys of the selectors, and sequencing the keys according to the reverse order to generate JSON objects containing the keys of the selectors and preset identification key value pairs.
8. The method of claim 7, wherein when a relationship connector is included in the relationship structure, compiling the string corresponding to the selector as a key for the selector, further comprises:
and compiling the relation connectors in the character strings corresponding to the selectors into relation keys in a preset format.
9. The method of claim 4, wherein the type of the selector is an attribute structure; according to the type, pre-compiling the selector to generate a JSON object, which specifically comprises the following steps:
determining a character string corresponding to the selector; wherein the character string comprises a key name character string, an attribute identifier and an attribute character string;
compiling the key name character string into a key of a selector, compiling the attribute identifier into an identification key in a preset format, compiling the attribute character string into a multi-dimensional array, and generating a JSON object comprising the key of the selector, the identification key in the preset format and the multi-dimensional array comprising the preset key and a key value.
10. The method of claim 4, wherein the type of the selector is a pseudo class structure; according to the type, pre-compiling the selector to generate a JSON object, which specifically comprises the following steps:
determining a character string corresponding to the selector; the character string comprises a key name character string and a pseudo character string;
and compiling the key name character string into a key of a selector, compiling the pseudo character string into a multi-dimensional array, and generating a JSON object comprising the key of the selector, the pseudo character string and the multi-dimensional array comprising a preset key and a key value.
11. An apparatus for implementing front-end event brokering, the apparatus comprising:
the determining module is used for determining each level node related to the event after monitoring the event in the webpage;
the acquisition module acquires node data of the nodes of each hierarchy;
the matching module is used for comparing and matching the acquired node data with a pre-compiled object with a set format in a webpage script aiming at each level node; the precompiled objects with set formats can reflect objects corresponding to node data of different levels;
a response module that responds to the event when it is determined that the node data matches the object;
wherein, the setting format comprises: the JSON format is compared and matched with a pre-compiled object with a set format in a webpage script according to the acquired node data, and specifically comprises the following steps:
determining an object corresponding to the acquired node data;
determining a key name and an identification key value pair of the JSON object;
and comparing and matching the object corresponding to the node data, and the key name and the identification key value pair of the JSON object pre-compiled in the webpage script.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610857497.8A CN107015839B (en) | 2016-09-27 | 2016-09-27 | Method and device for realizing front-end event agent |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610857497.8A CN107015839B (en) | 2016-09-27 | 2016-09-27 | Method and device for realizing front-end event agent |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN107015839A CN107015839A (en) | 2017-08-04 |
| CN107015839B true CN107015839B (en) | 2020-07-17 |
Family
ID=59439343
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201610857497.8A Active CN107015839B (en) | 2016-09-27 | 2016-09-27 | Method and device for realizing front-end event agent |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN107015839B (en) |
Families Citing this family (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109508181A (en) * | 2017-09-14 | 2019-03-22 | 韩真 | A kind of method of efficient semantization front end selection subscheme |
| CN109558138A (en) * | 2018-11-20 | 2019-04-02 | 北京小米移动软件有限公司 | Progeny selection device processing method and processing device |
| CN109683958A (en) * | 2018-12-26 | 2019-04-26 | 深圳市越疆科技有限公司 | Json structure function management method |
| CN110119336A (en) * | 2019-04-04 | 2019-08-13 | 微民保险代理有限公司 | Data processing method, device, computer readable storage medium and computer equipment |
| CN111045685A (en) * | 2019-11-05 | 2020-04-21 | 贝壳技术有限公司 | Code conversion method, device, storage medium and electronic equipment |
| CN111752563A (en) * | 2020-05-18 | 2020-10-09 | 深圳市东微智能科技股份有限公司 | Method, device, terminal and computer readable storage medium for dynamically modifying interface |
| CN112527311A (en) * | 2020-12-15 | 2021-03-19 | 湖南戈人自动化科技有限公司 | Multi-dimensional array variable compiling method |
Family Cites Families (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103176807A (en) * | 2011-12-22 | 2013-06-26 | 盛乐信息技术（上海）有限公司 | Method and system for acceleration of Webpage application execution |
| WO2014120128A1 (en) * | 2013-01-29 | 2014-08-07 | Hewlett-Packard Development Company, L.P. | Analyzing structure of web application |
| CN103226599B (en) * | 2013-04-23 | 2018-09-28 | 翁杰 | A kind of method and system of accurate extraction web page contents |
| US10984175B2 (en) * | 2013-08-09 | 2021-04-20 | Yottaa Inc. | Systems and methods for dynamically modifying a requested web page from a server for presentation at a client |
| CN103412754A (en) * | 2013-08-15 | 2013-11-27 | 优视科技有限公司 | Dynamic language code execution method and device |
| CN105786465A (en) * | 2014-12-23 | 2016-07-20 | 远光软件股份有限公司 | Scripting language execution method and device |
| CN104615748B (en) * | 2015-02-12 | 2018-02-27 | 华北电力大学（保定） | Internet of Things Web event-handling methods based on Watir |
-
2016
- 2016-09-27 CN CN201610857497.8A patent/CN107015839B/en active Active
Also Published As
| Publication number | Publication date |
|---|---|
| CN107015839A (en) | 2017-08-04 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107015839B (en) | Method and device for realizing front-end event agent | |
| US9483260B1 (en) | Documentation generation for web APIs based on byte code analysis | |
| US9507590B2 (en) | Transitive source code violation matching and attribution | |
| US9009664B2 (en) | Structural search of source code | |
| Scheller et al. | Automated measurement of API usability: The API concepts framework | |
| US9021442B2 (en) | Dynamic scenario testing of web application | |
| US8914370B2 (en) | Generating rules for classifying structured documents | |
| US20120191840A1 (en) | Managing Application State Information By Means Of A Uniform Resource Identifier (URI) | |
| US20140282031A1 (en) | Dynamic Field Extraction of Log Data | |
| CN110688307B (en) | JavaScript code detection method, device, equipment and storage medium | |
| US11580001B2 (en) | Dynamic generation of instrumentation locators from a document object model | |
| CN111045678A (en) | Method, device and equipment for executing dynamic code on page and storage medium | |
| EP3846089A1 (en) | Generating a knowledge graph of multiple application programming interfaces | |
| CN104320312A (en) | Network application safety test tool and fuzz test case generation method and system | |
| US10789154B2 (en) | Client server computer code mapping and visualization | |
| US10489024B2 (en) | UI rendering based on adaptive label text infrastructure | |
| US9645816B2 (en) | Multi-language code search index | |
| US8341212B2 (en) | Service description refinement based on actual service use | |
| CN115599386A (en) | Code generation method, device, equipment and storage medium | |
| US20130325907A1 (en) | Xml file conversion to flat file | |
| US9984051B2 (en) | Hierarchical identifiers for HTML elements | |
| US20160321280A2 (en) | System for automatically generating wrapper for entire websites | |
| Grigorev et al. | String-embedded language support in integrated development environment | |
| US11960560B1 (en) | Methods for analyzing recurring accessibility issues with dynamic web site behavior and devices thereof | |
| CN116680444B (en) | Data processing method, device, equipment and storage medium |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20201015 Address after: Cayman Enterprise Centre, 27 Hospital Road, George Town, Grand Cayman Islands Patentee after: Innovative advanced technology Co.,Ltd. Address before: Cayman Enterprise Centre, 27 Hospital Road, George Town, Grand Cayman Islands Patentee before: Advanced innovation technology Co.,Ltd. Effective date of registration: 20201015 Address after: Cayman Enterprise Centre, 27 Hospital Road, George Town, Grand Cayman Islands Patentee after: Advanced innovation technology Co.,Ltd. Address before: A four-storey 847 mailbox in Grand Cayman Capital Building, British Cayman Islands Patentee before: Alibaba Group Holding Ltd. |
|
| TR01 | Transfer of patent right |