Embodiment
To make the purpose, technical scheme and advantage of the application clearer, below in conjunction with the application specific embodiment andTechnical scheme is clearly and completely described corresponding accompanying drawing.Obviously, described embodiment is only the application oneSection Example, rather than whole embodiments.Based on the embodiment in the application, those of ordinary skill in the art are not doingGo out the every other embodiment obtained under the premise of creative work, belong to the scope of the application protection.
Just it has been observed that after the front end event in webpage occurs, event can work as thing in the way of " bubbling " to upper layer transfersPart is delivered to after the level with processing function, and the response to event can be realized by the processing function of the level, and handles letterIt is several event is responded during, one of used parameter is：Selector (selector), in the mode of prior artIn, JS storehouses can be to the method using correlation (such as：Sizzle) selector is parsed, the expression formula to determine selectorRepresentative element, to be responded for the element using processing function pair event.
But said process of the prior art, is to be realized in JS storehouses, JS storehouses are solved in the expression formula to selectorCorrelation technique used in the process of analysis, will can be realized under the support of respective code, it is clear that this is by increase JS storehousesSize of code, once also, the expression formula of selector uses self-defined selector, then, it is also possible to it is related to the total element set of traversalProcess, causes that the resolving of selector is needed to expend longer time, will further cause to carry out event in webpageThe time of response.
Based on this, this application provides a kind of method for realizing front end event agent, by will be parsed to selectorCheng Jinhang precompiles, can effectively reduce the time parsed in JS storehouses to the expression formula of selector, and decrease JSSize of code in storehouse.
In the embodiment of the present application, webpage is generally shown by the client such as browser or corresponding application, accordinglyJS storehouses operation in the client, that is to say, that can be by executive agent of the JS storehouses as the method for realizing front end event agent, thisIn do not constitute restriction to the application.
Generally, the sentence " .on (event, selector, proxy function) " in JS storehouses is that a kind of event acts on behalf of sentence, wherein," selector " and " event " is expressed in the form of character string, such as：In the position of selector, character can be a, p etc., difference tableShow link in webpage, two elements of paragraph；In the position of event, character string can be click, and it represents click event.WhenSo, the sentence in the example is not limited to this, is only to illustrate to be illustrated here.
Based on above content, the method for realizing front end event agent provided for the embodiment of the present application is carried out belowIllustrate：
As shown in Figure 1a, to realize the process (its application scenarios is as shown in Figure 1 b) of front end event agent, specifically include withLower step：
S101：After the event occurred in webpage is listened to, it is determined that each hierarchy node related to the event.
The process of monitoring can be realized by the monitor function provided in JS storehouses, in upper example, be substantially to selector positionThe character string put is monitored, to determine whether event triggers.In actual applications, monitor function can only be arranged at top layer,Because：, can be to upper strata " bubbling ", after event is delivered to the top layer for being provided with monitor function, then after event triggeringThe event will be monitored, and the restriction to the application is not constituted here.
DOM in described hierarchy node, substantially DOM Document Object Model (Document Object Model, DOM)Node is (follow-up to be referred to as the ease of description：Node).In other words, the JS source codes on webpage backstage can be used and such as set by DOMThe mode of shape structure is expressed, in the tree structure that DOM is generated, in each level and webpage JS source codes of tree structureLevel match, also, each node characterizes a kind of element.
In the mode using event agent, after event is triggered, meeting is transmitted in the way of bubbling to the node on upper strata, directlyTo being transferred to after the level with processing function, the event will be responded in the processing function corresponding to the level.CauseThis, in the embodiment of the present application, it is believed that, each hierarchy node related to the event, including：The node of trigger event, withAnd the node uploads some ancestors' nodes on path.
It should be noted that in some scenarios, processing function setup is in top layer, then, related to the event is eachHierarchy node, it is possible to including：The node of trigger event, and each node into top mode.
S102：Obtain the node data of each hierarchy node.
DOM defines the object and attribute of each element in webpage, described node data, it is believed that included in nodeThe attribute data of object.As a kind of mode in the embodiment of the present application, node data may include：Element (tag), class(class), the relation of component identification (id) and all kinds of nodes is (such as：It is father and son, brother, adjacent) etc. object.
It is another it should be noted that expressed by selector be exactly element, so, in the embodiment of the present application, node data is justIt is regarded as selector.
S103：For each hierarchy node, according to the node data got, set with precompile in page scriptMatching is compared in the object for the formula that fixes.
Wherein, the object of the setting form of precompile, can reflect the object corresponding to different levels node data.
Need to parse selector in view of mode JS storehouses of the prior art, JS storehouses may be used during itRelated method realizes the parsing to selector, thus add it is time-consuming, therefore in this application, to the selector in page scriptPrecompile is carried out, selector is converted into a kind of easy language and expressed (such as：Selector can be compiled as to JSON formsObject), then, for the node data of each node got, JS storehouses will use node data to enter with JSON objectsRow compares matching, and is no longer to call extra analytic method.
Obviously, by the process of precompile so that when event is triggered, JS storehouses can need not recall extra parsing sideMethod is parsed to selector, but is parsed to have passed through the object after precompile, and such mode can be carried effectivelyThe speed of parsing is risen, also, because JS storehouses are not required to recall extra analytic method, also can just play code in reduction JS storehousesThe effect of amount.
S104：When it is determined that the node data is with the match objects, the event is responded.
Node data and match objects, then it is exactly the node monitored to show the node, and then can be to thingPart responds.
In the embodiment of the present application, described matching, it is believed that be：The object hit JSON objects of node data.
By above-mentioned steps, by the way of the selector in page script to be carried out to precompile, spy can be compiled it asThe object for the formula that fixes, so, after event is triggered, is directed to the parsing of selector character string in event agent's sentence in JS storehousesProcess, it is possible to be converted to the matching process to the object of specific format, it is clear that such mode allows JS storehouses no longer to adjustWith extra analytic method, compared to existing technologies, the response speed to event can be lifted, simultaneously as JS storehouses can notExtra analytic method need to be recalled, size of code in reduction JS storehouses also can be just played so that JS realizes in storehouse lightweight, and volume is moreIt is small.
In the embodiment of the present application, it is contemplated that JSON forms can lift JS as convenient, the easy representation language of one kindThe speed of storehouse parsing, therefore, it can by the selector in page script be pre-compiled as the object of JSON forms.So, existIn the embodiment of the present application, under practical application scene, the realization of two parts content is depended on：Precompile process and to prelistingThe parsing of object after translating.This two parts content is described more detail below.
First, precompile：
In the embodiment of the present application, it is contemplated that JSON forms can lift JS as convenient, the easy representation language of one kindThe speed of storehouse parsing, therefore, the object format of precompile is exactly JSON forms.
Based on this, specifically, precompile sets the object of form, including：In the corresponding page script of the webpage,The selector included in the page script is determined, precompile is carried out to the selector, JSON objects is generated, JSON objects is replacedThe selector changed in the page script, and by the JSON objects after replacement be defined as set form object.
Wherein, the object of precompile is the selector in page script, therefore in the embodiment of the present application, will be first in webpageIn script, the selector for needing to carry out precompile is determined.Its process can be：Determine the corresponding abstract language of the page scriptMethod tree (abstract syntax tree, ast), in the ast, according to default character marking, lookup includes the wordThe node of mark is accorded with, the content corresponding to the node found is defined as selector.
Explanation is needed exist for, the ast corresponding to page script is determined, is substantially just to determine JS source codes in webpageAst, in actual applications, can using corresponding analytical tool realize, such as：Homunculus instruments, are not constituted hereRestriction to the application.
Ast can be expressed the method in JS source codes with tree structure, more can easily be determined by astSelector.In view of in the method for event agent, usually using foregoing .on () function, so, pin can be obtained by astTo the tree structure of .on () function (in order to be distinguished with foregoing DOM node, subsequently by the section in ast tree structurePoint is referred to as ast nodes), as shown in Figure 2 a, sentence used in event agent's method for node.on ' click ',' .name ', ' function ' }, wherein ' .name ' is exactly selector, then, just it can determine that with ' .name ' word by astThe ast nodes of symbol, so that the corresponding content of ast nodes is defined as into selector.
After selector is determined, further it can be parsed again for selector, it is believed that to selector instituteThe parsing of progress, is capable of determining that the data such as type, attribute, the structure of selector, to carry out precompile to selector.SpecificallyFor, precompile is carried out to each selector, the character string of JSON forms is generated, including：Determine that the selector is correspondingAst, according to the corresponding ast of the selector, determines the type of the selector, and according to the type, the selector is enteredRow precompile, generates JSON objects.
Example as shown in Figure 2 a is continued to use, in actual applications, is defined after selector, can be added after its character" { } " so that the character of the selector is changed into CSS selector character string, on this basis, can still use above-mentionedHomunculus instruments realize the parsing to CSS selector character string, generate the ast of the selector.And then, in the selectorOn the basis of ast, selector is compiled as JSON objects.
In the embodiment of the present application, different types of selector can be pre-compiled as different JOSN objects, specifically：
When selector is simultaneously column selector, it is determined that the corresponding character string of each selector arranged side by side, by each selectorCorresponding character string is compiled as the key of the selector, and according to the order of parallel construction, generation includes the key of each selector, withAnd the JSON objects of default mark key-value pair.
In the case, selector arranged side by side is usually at least one in class selector, element selector, id selectorsKind.In character list up to upper, above-mentioned selector is expressed with lowercase, characters, # character styles respectively.
For example：Selector arranged side by side includes：.class, div, #id { }.It can be seen that, now there are three selectors (arranged side by side), that, when carrying out precompile, three selectors arranged side by side can be compiled as to form as shown in Figure 2 b.Wherein, " _ v：True " is justIt is default mark key-value pair, it represents that corresponding selector occurs.
Certainly, three kinds of above-mentioned selectors are also referred to as basic selector, in actual applications, to appointing in basic selectorA kind of one JSON objects for carrying out precompile, can using as shown in Figure 2 b.Here the restriction to the application is not constituted.
It should be noted that if asterisk wildcard selector (selector represented with " * " symbol), it is used selects with elementSelect device identical rule and carry out precompile, no longer excessively repeat here.
In addition, in actual applications, selector is also possible to the combining structure being made up of basic selector, then, the choosingThe type for selecting device is combining structure；According to the structure, precompile is carried out to the selector, JSON objects are generated, including：ReallyDetermine the corresponding character string of the selector, the corresponding character string of the selector is compiled as to the key of selector, and according to settingBuilt-up sequence, to the key row sequence of selector, generation includes the key of the selector after sequence, and default mark key-value pairJSON objects.
Specifically, it is assumed that combining selector is respectively：Div.class#id { } and div2#id2.class2 { },When carrying out precompile, meeting is compiled as unified form, its result is as shown in Figure 2 c according to the order of setting.Certainly, in this exampleOrder do not constitute restriction to the application.
When the type of selector is relationship type selector, according to the type, precompile is carried out to the selector, it is rawInto JSON objects, including：The corresponding character string of the selector is determined, the corresponding character string of the selector is compiled as selectionThe key of device, and according to Bit-reversed, generation includes the key of selector, and the default JSON objects for identifying key-value pair.
In the embodiment of the present application, the selector of relationship type, it may include：Inclusion relation (character list uses space up to upper), son(character list uses connector to selector up to upper>), neighboring selectors (connector for+), fraternal selector (connector for~).
Specifically, if comprising selector, such as：Div a { }, then in the way of Bit-reversed, carry out precompile,As a result as shown in Figure 2 c.
And if wherein inclusion relation connector (>,+,~), then, during precompile, relation connector can also be compiledTranslate, in other words, when inclusion relation connector in the relational structure, the corresponding character string of the selector is compiled as selectionThe key of device, in addition to：By the relation connector in the corresponding character string of the selector, the relation key of preset format is compiled as.
In the embodiment of the present application, relation connector can be compiled as to the key connected with " _ ", specifically as shown in Figure 2 d.
When selector is attribute selector, according to the type, precompile is carried out to the selector, JSON pairs is generatedAs, including：Determine the corresponding character string of the selector；Wherein, key name character string, attribute-identifier are included in the character stringAnd propertystring；Key name character string is compiled as to the key of selector, attribute-identifier is compiled as to the mark of preset formatKey, and propertystring is compiled as Multidimensional numerical, generation includes the key of the selector, the mark key of preset format and bagThe JSON objects of Multidimensional numerical containing preset key and key assignments.
It is propertystring that the character in " [] " identifier, the identifier is included in attribute selector, such as：div[attr].When being compiled, identifier is compiled as " the mark key of the form of _ [".
Certainly, in actual applications, attribute selector may be：Div [attr], div [attr2] { } or div [attr][attr2] { } etc., so, " value corresponding to _ [" is Multidimensional numerical to mark key, i.e. in compiling, using [] structure, for example：For attribute selector div [attr], div [attr2] { }, it compiles result as shown in Figure 2 e, it can be seen that " _ [" institute is rightThe value answered includes " [attr], { " _ v ":True } " and " [attr2], { " _ v ":True } " two arrays for constituting.
If selector is div [attr] [attr2] { }, result is compiled as shown in figure 2f, it can be seen that " _ [" instituteCorresponding value is " [attr], [attr2], { " _ v ":True } ", in other words, [attr], [attr2] constitutes the of the arrayOne.
As the extension of this mode, if in attribute selector comprising comparison operator (such as：=,>、<Deng), then many dimensionsJust comprising the comparison operator in Section 1 in group, by taking selector div [attr=v] as an example, it compiles result such as Fig. 2 g institutesShow.
Certainly, if inclusion relation structure and attribute structure in selector, the volume of marriage relation structure and attribute structureTranslate rule and carry out precompile, no longer excessively repeat here.
When the type of selector is pseudo- class selector, according to the type, precompile, generation are carried out to the selectorJSON objects, including：Determine the corresponding character string of the selector；Wherein, in the character string comprising key name character string andPseudo- class character string；Key name character string is compiled as to the key of selector, pseudo- class character string Multidimensional numerical is compiled as, generation includesThe JSON objects of the key of the selector, pseudo- class character string and the Multidimensional numerical for including preset key and key assignments.
Such as：Selector div：Hover { }, it compiles result as shown in fig. 2h.If comprising multiple pseudo- classes, by multiple puppetsClass constitutes a Multidimensional numerical.
Above is the process of precompile, after precompile generation JSON objects have been carried out, JS storehouses will when event is triggered,JSON objects are parsed, its resolving is as follows：
The interface provided according to DOM, obtains the attribute data (such as tag, class, id) of node.Further check categoryProperty the corresponding key of data whether appear in JSON objects, if so, and JSON objects corresponding to the key include mark key assignmentsIt is right, then illustrate match hit, can be adjusted back with response events.
Such as：<node><div></div></node>
Node.on (' click ', ' div ', callback)
It is represented, includes object " div " in node.Simultaneously it is assumed that for div { }, institute in its JSON object such as Fig. 2 aShow, then, when clicking on the node, it is compared after matching, it may be determined that match hit, you can response.
Asterisk wildcard represents any, therefore without checking whether occur, as long as there is content to be that the match is successful.Certainly, in realityIn the application of border, if without corresponding keys (* is not have content), it fails to match, directly exits.
But if there is content, without _ v:True mark key-value pairs occur, then need further to be matched：
Mode one, the father node parent using browser interface acquisition present node, using parent as present node,Carry out above-mentioned matching process.
If included in mode two, current JSON objects _>One kind in, _+, _~key, illustrates there is relation choosing in selectorSymbol is selected to exist, it is consistent to the process of analysis of all relation selectors, therefore only illustrated with one of which：When occur _+when, explanation hasNeighbouring relations selector occur, with DOM standard interfaces obtain present node before close to node prev, if nothing, jump out,If so, then using node prev as present node, carrying out above-mentioned matching process.
If in mode three, current JSON objects comprising _ [key, illustrate in selector with the presence of attribute, when there is _ [key appearanceWhen, illustrate to need to check property value, it is a Multidimensional numerical, carry out by dimension, travel through item by item.
If included in mode four, current JSON objects _:Key, illustrates with the presence of pseudo- class in selector, all pseudo- class processingMode is identical, therefore is only illustrated with one of which, similarly hereinafter.When occur _:When, its corresponding property value is checked, it is a multidimensionalArray, first travels through first and ties up, and each single item is the array that a length is 2, the 1st several pseudo- class groups to exist, the pseudo- class of traversalGroup, each of pseudo- class group is pseudo- class, and whether detection present node and pseudo- class match, and return to whether matching result succeeds.When pseudo- classWhen group is all successful, the 2nd is used as new JSON objects, carries out above-mentioned matching process.
Detection mode is standard DOM interface, and every kind of pseudo- class correspondence meaning is as follows：
:Whether root present nodes are root node, as body nodes or without parent；
:Whether first-child present nodes are first node at the same level, i.e., without prev；
:Whether last-child present nodes are last node at the same level, i.e., without next；
:Whether only-child present nodes are only one node, i.e., without prev and next；
:Whether nth-child (n) present nodes are n-th of nodes；
:Whether nth-last-child (n) present nodes are n-th of nodes reciprocal；
:Whether first-of-type present nodes are at the same level and first node of same type, i.e., all prev do not haveThere is same type；
:Whether last-of-type present nodes are at the same level and last node of same type, i.e., all nextThere is no same type；
:Whether only-of-type present nodes are at the same level and the only one node of same type, i.e., all prevThere is no same type with next；
:Nth-of-type (n) present nodes whether be same type n-th of node；
:Nth-last-of-type (n) present nodes whether be same type n-th of node reciprocal；
:Whether empty present nodes are without child node；
:Whether checked present nodes are in selected state；
:Whether enabled present nodes are in upstate；
:Whether disabled present nodes are in disabled status；
:Whether target present nodes match current anchor.
Selector character string in event agent's sentence is directed to reference to the above, it is clear that after event is triggered, in JS storehousesResolving, it is possible to be converted to the matching process to JSON objects, such mode allows JS storehouses not recall additionallyAnalytic method, so as to effectively improve the efficiency to event response.
The method for realizing front end event agent provided above for the embodiment of the present application, based on same thinking, the applicationEmbodiment also provides a kind of device for realizing front end event agent.As shown in figure 3, realizing the device of front end event agent includes：
Determining module 301, after the event occurred in webpage is listened to, it is determined that each level section related to the eventPoint.
Acquisition module 302, obtains the node data of each hierarchy node.
Matching module 303, it is and pre- in page script according to the node data got for each hierarchy nodeMatching is compared in the object of the setting form of compiling.Wherein, the object of the setting form of precompile, can reflect different levelsObject corresponding to node data.
Respond module 304, when it is determined that the node data is with the match objects, is responded to the event.
Wherein, the setting form, including：JSON forms.
On this basis, described device also includes：Precompile module 305, in the corresponding page script of the webpage, reallyThe selector included in the fixed page script, precompile is carried out to the selector, generates JSON objects, JSON object strings are replacedThe selector changed in the page script, and by the JSON objects after replacement be defined as set form object.
Further, precompile module 305, determines the corresponding abstract syntax tree ast of the page script, in the astIn, according to default character marking, the node for including the character marking is searched, in corresponding to the node foundAppearance is defined as selector.
Precompile module 305, determines the corresponding ast of the selector, according to the corresponding ast of the selector, determines instituteThe type of selector is stated, according to the type, precompile is carried out to the selector, JSON objects are generated.
When the type of the selector is structure arranged side by side, precompile module 305, it is determined that the corresponding word of each selector arranged side by sideSymbol string, the corresponding character string of each selector is compiled as the key of the selector, and according to the order of parallel construction, generation is includedThe key of each selector, and the default JSON objects for identifying key-value pair.
Wherein, the selector includes：At least one of class selector, element selector and id selectors.
When the type of the selector is combining structure, precompile module 305 determines the corresponding character of the selectorString, the corresponding character string of the selector is compiled as the key of selector, and according to the built-up sequence of setting, to the key of selectorSequence, generation includes the key of the selector after sequence, and the default JSON objects for identifying key-value pair.
When the structure of the selector is relational structure, precompile module 305 determines the corresponding character of the selectorString, the corresponding character string of the selector is compiled as the key of selector, and according to Bit-reversed, generation includes selectorKey, and the default JSON objects for identifying key-value pair.
When inclusion relation connector in the relational structure, precompile module 305, by the corresponding character of the selectorRelation connector in string, is compiled as the relation key of preset format.
When the type of the selector is attribute structure, precompile module 305 determines the corresponding character of the selectorString；Wherein, key name character string, attribute-identifier and propertystring are included in the character string, key name character string is compiledFor the key of selector, attribute-identifier is compiled as to the mark key of preset format, and propertystring is compiled as Multidimensional numerical,Generation includes the key of the selector, the mark key of preset format and includes the JSON of the Multidimensional numerical of preset key and key assignmentsObject.
When the type of the selector is pseudo- class formation, precompile module 305 determines the corresponding character of the selectorString；Wherein, key name character string is compiled as selector comprising key name character string and pseudo- class character string in the character stringKey, Multidimensional numerical is compiled as by pseudo- class character string, is generated the key for including the selector, pseudo- class character string and is included defaultThe JSON objects of the Multidimensional numerical of key and key assignments.
Matching module 303, it is determined that the corresponding object of the node data got, determines the key name of the JSON objectsAnd mark key-value pair, according to the corresponding object of the node data, and in page script precompile JSON object key namesAnd mark key-value pair, matching is compared.
In a typical configuration, computing device includes one or more processors (CPU), input/output interface, netNetwork interface and internal memory.
Internal memory potentially includes the volatile memory in computer-readable medium, random access memory (RAM) and/orThe forms such as Nonvolatile memory, such as read-only storage (ROM) or flash memory (flash RAM).Internal memory is computer-readable mediumExample.
Computer-readable medium includes permanent and non-permanent, removable and non-removable media can be by any methodOr technology come realize information store.Information can be computer-readable instruction, data structure, the module of program or other data.The example of the storage medium of computer includes, but are not limited to phase transition internal memory (PRAM), static RAM (SRAM), movedState random access memory (DRAM), other kinds of random access memory (RAM), read-only storage (ROM), electric erasableProgrammable read only memory (EEPROM), fast flash memory bank or other memory techniques, read-only optical disc read-only storage (CD-ROM),Digital versatile disc (DVD) or other optical storages, magnetic cassette tape, the storage of tape magnetic rigid disk or other magnetic storage apparatusOr any other non-transmission medium, the information that can be accessed by a computing device available for storage.Define, calculate according to hereinMachine computer-readable recording medium does not include temporary computer readable media (transitory media), such as data-signal and carrier wave of modulation.
It should also be noted that, term " comprising ", "comprising" or its any other variant are intended to nonexcludabilityComprising so that process, method, commodity or equipment including a series of key elements are not only including those key elements, but also wrapInclude other key elements being not expressly set out, or also include for this process, method, commodity or equipment intrinsic wantElement.In the absence of more restrictions, the key element limited by sentence "including a ...", it is not excluded that wanted including describedAlso there is other identical element in process, method, commodity or the equipment of element.
It will be understood by those skilled in the art that embodiments herein can be provided as method, system or computer program product.Therefore, the application can be using the embodiment in terms of complete hardware embodiment, complete software embodiment or combination software and hardwareForm.Deposited moreover, the application can use to can use in one or more computers for wherein including computer usable program codeThe shape for the computer program product that storage media is implemented on (including but is not limited to magnetic disk storage, CD-ROM, optical memory etc.)Formula.
Embodiments herein is the foregoing is only, the application is not limited to.For those skilled in the artFor, the application can have various modifications and variations.It is all any modifications made within spirit herein and principle, equivalentReplace, improve etc., it should be included within the scope of claims hereof.