CN109558553B - Method and device for determining style - Google Patents

Abstract

The present disclosure relates to a pattern determination method and apparatus. The method comprises the following steps: after a target node of a view model instance is created, determining a target style information object on which the target node depends; the target style information object includes: the CSS-based selector comprises a style rule corresponding to a CSS basic selector, a style rule corresponding to a CSS descendant selector, a priority score of the style rule and index information of each CSS descendant selector; determining a style rule matched with the target node according to the index information of each CSS descendant selector; and combining the various formula rules matched with the target node according to the priority scores of the various formula rules to determine the style of the target node. The method and the device can help developers to improve development efficiency by supporting the offspring selectors, are simple to implement, and low in development and maintenance cost, and can improve pattern rule matching efficiency, application performance and user experience by storing the index information of each CSS offspring selector in the pattern information object.

Description

Style determination method and device

Technical Field

The present disclosure relates to the field of terminal technology, and in particular to a style determination method and device.

Background Art

With the development of smart terminal technology, many development platforms and operating systems based on mobile terminals and personal computers (PCs) have emerged. In order to promote the same application to different platforms and operating systems, developers need to develop different versions for different platforms and operating systems, resulting in high development costs and excessive maintenance workload. In view of this, equipment manufacturers have launched unified platforms such as the Quick Application Platform that can provide the function of opening applications in seconds, providing users with services that allow them to use applications immediately without downloading and installing; Quick Application is a new application form based on the terminal hardware platform. It is a framework for application development based on the front-end development technology stack. It adopts the popular front-end development model and greatly improves application performance. It provides a large number of system capabilities that cannot be used in the front-end environment and the ability to connect to many third-party services; based on the Quick Application Platform, developers only need to write a set of codes, and Quick Application can run on different development platforms and operating systems such as Android, IOS, Webview, etc., and developers can write Quick Applications in a language similar to traditional HTML, which can reduce developers' code development costs and maintenance workload.

In the related art, current mainstream browsers all support Cascading Style Sheets (CSS) descendant selectors, and support many selectors and functions, such as wildcards, style inheritance, and the like.

Summary of the invention

In order to overcome the problems existing in the related art, the present disclosure provides a method and device for determining a style. The technical solution is as follows:

According to a first aspect of an embodiment of the present disclosure, a style determination method is provided, the method comprising:

After creating a target node of the view model instance, determining a target style information object on which the target node depends; the target style information object includes: style rules corresponding to a CSS base selector, style rules corresponding to a CSS descendant selector, priority scores of each of the style rules, and index information of each of the CSS descendant selectors; the index information of each of the CSS descendant selectors is used to record a classification result obtained by classifying each of the CSS descendant selectors according to the name of the last base selector in the name of the CSS descendant selector;

Determining the style rule matched by the target node according to the index information of each of the CSS descendant selectors in the target style information object;

According to the priority scores of the style rules matched by the target node, the style rules matched by the target node are merged to determine the style of the target node.

The technical solution provided by the embodiments of the present disclosure may include the following beneficial effects: the technical solution can help developers improve development efficiency by supporting descendant selectors, is simple to implement, and has low development and maintenance costs; and can improve style rule matching efficiency, application performance, and user experience by saving index information of each CSS descendant selector in a style information object.

In one embodiment, the method further comprises:

When creating the root node of the view model instance, compile the style code and generate a style information object to be registered;

Registering the style information object to be registered on the document of the page;

The identifier of the style information object to be registered is bound to the root node of the view model instance.

In one embodiment, determining the target style information object on which the target node depends includes:

Obtain a collection of style information objects registered on the document to which the target node belongs;

Obtaining the identifier of the style information object bound to the root node of the view model instance to which the target node belongs;

The target style information object on which the target node depends is determined according to the acquired set of style information objects and the identifiers of the acquired style information objects.

In one embodiment, determining the style rule matched by the target node according to the index information of each CSS descendant selector in the target style information object includes:

Searching for a first CSS base selector matching the target node in the style rules corresponding to each CSS base selector included in the target style information object;

Searching for a second CSS base selector matching the target node and a first CSS descendant selector with the name of the second CSS base selector as an index in the index information of each CSS descendant selector included in the target style information object;

Get all parent nodes of the target node;

Searching for a second CSS descendant selector matching the target node in each of the first CSS descendant selectors according to each of the parent nodes;

A style rule that matches the target node is determined according to the first CSS base selector and the second CSS descendant selector.

In one embodiment, the method further comprises:

The determined style rules matching the target node are cached in the target node according to different categories of style rules.

In one embodiment, merging the style rules matched by the target node according to the priority scores of the style rules matched by the target node to determine the style of the target node includes:

Sort the style rules matched by the target node in ascending order of priority scores;

The style rules with larger priority scores are used to cover the style rules with smaller priority scores, and the sorted style rules are merged to obtain the style of the target node.

According to a second aspect of an embodiment of the present disclosure, a pattern determination device is provided, including:

A target style information object determination module is used to determine the target style information object that the target node depends on after creating the target node of the view model instance; the target style information object includes: style rules corresponding to the CSS base selector of the cascading style sheet, style rules corresponding to the CSS descendant selector, priority scores of each style rule, and index information of each CSS descendant selector; the index information of each CSS descendant selector is used to record the classification result obtained after classifying each CSS descendant selector according to the name of the last base selector in the name of the CSS descendant selector;

A style rule determination module, used to determine the style rule matched by the target node according to the index information of each CSS descendant selector in the target style information object;

The style determination module is used to merge the style rules matched by the target node according to the priority scores of the style rules matched by the target node, so as to determine the style of the target node.

In one embodiment, the apparatus further comprises:

A generation module, used for compiling the style code and generating a style information object to be registered when creating the root node of the view model instance;

A registration module, used to register the style information object to be registered on the document of the page;

A binding module is used to bind the identifier of the style information object to be registered to the root node of the view model instance.

In one embodiment, the target style information object determination module includes:

A first acquisition submodule is used to acquire a set of style information objects registered on the document to which the target node belongs;

A second acquisition submodule is used to acquire the identifier of the style information object bound to the root node of the view model instance to which the target node belongs;

The first determination submodule is used to determine the target style information object on which the target node depends according to the acquired set of style information objects and the acquired identifiers of the style information objects.

In one embodiment, the style rule determination module includes:

A first search submodule, configured to search for a first CSS basic selector matching the target node in style rules corresponding to each CSS basic selector included in the target style information object;

A second search submodule is configured to search, in the index information of each of the CSS descendant selectors included in the target style information object, a second CSS base selector matching the target node and a first CSS descendant selector with the name of the second CSS base selector as an index;

A third acquisition submodule is used to acquire all parent nodes of the target node;

A matching submodule, used for searching, according to each of the parent nodes, for a second CSS descendant selector in each of the first CSS descendant selectors that matches the target node;

The second determination submodule is used to determine the style rule matched by the target node according to the first CSS base selector and the second CSS descendant selector.

In one embodiment, the apparatus further comprises:

The cache module is used to cache the determined style rules matched by the target node into the target node according to different categories of style rules.

In one embodiment, the style determination module includes:

A sorting submodule, used to sort the style rules matched by the target node in ascending order of priority scores of the style rules;

The merging submodule is used to cover the style rules with smaller priority scores with the style rules with larger priority scores, and merge the sorted style rules to obtain the style of the target node.

According to a third aspect of an embodiment of the present disclosure, a pattern determination device is provided, including:

processor;

a memory for storing processor-executable instructions;

Wherein, the processor is configured to:

After creating a target node of the view model instance, determining a target style information object on which the target node depends; the target style information object includes: style rules corresponding to a CSS base selector, style rules corresponding to a CSS descendant selector, priority scores of each of the style rules, and index information of each of the CSS descendant selectors; the index information of each of the CSS descendant selectors is used to record a classification result obtained by classifying each of the CSS descendant selectors according to the name of the last base selector in the name of the CSS descendant selector;

Determining the style rule matched by the target node according to the index information of each of the CSS descendant selectors in the target style information object;

According to the priority scores of the style rules matched by the target node, the style rules matched by the target node are merged to determine the style of the target node.

According to a fourth aspect of an embodiment of the present disclosure, there is provided a computer-readable storage medium on which computer instructions are stored, and when the instructions are executed by a processor, the steps of the method described in the first aspect are implemented.

It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present disclosure.

BRIEF DESCRIPTION OF THE DRAWINGS

The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present disclosure and, together with the description, serve to explain the principles of the present disclosure.

Fig. 1 is a flowchart of a method for determining a style according to an exemplary embodiment.

Fig. 2 is a flowchart of a method for determining a style according to an exemplary embodiment.

Fig. 3 is a block diagram of a pattern determination device according to an exemplary embodiment.

Fig. 4 is a block diagram of a pattern determination device according to an exemplary embodiment.

Fig. 5 is a block diagram of a pattern determination device according to an exemplary embodiment.

Fig. 6 is a block diagram of a pattern determination device according to an exemplary embodiment.

Fig. 7 is a block diagram of a pattern determination device according to an exemplary embodiment.

Fig. 8 is a block diagram of a pattern determination device according to an exemplary embodiment.

Fig. 9 is a block diagram of a pattern determination device according to an exemplary embodiment.

Fig. 10 is a block diagram of a pattern determination device according to an exemplary embodiment.

Fig. 11 is a block diagram of a pattern determination device according to an exemplary embodiment.

DETAILED DESCRIPTION

Exemplary embodiments will be described in detail herein, examples of which are shown in the accompanying drawings. When the following description refers to the drawings, the same numbers in different drawings represent the same or similar elements unless otherwise indicated. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present disclosure. Instead, they are merely examples of devices and methods consistent with some aspects of the present disclosure as detailed in the appended claims.

In the related technology, current mainstream browsers all support CSS descendant selectors, and support many selectors and functions, such as wildcards and style inheritance. However, this also brings challenges to developers. If developers are not aware of performance optimization, it is likely to cause performance problems and affect user experience. In addition, due to the complexity of browser implementation, the development and maintenance costs of the browser are high.

In order to solve the above problems, the embodiment of the present disclosure provides a style determination method, the method comprising: after creating a target node of a view model (VM, View Model) instance, determining a target style information object on which the target node depends; the target style information object comprises: style rules corresponding to CSS base selectors, style rules corresponding to CSS descendant selectors, priority scores of each style rule, and index information of each CSS descendant selector; the index information of each CSS descendant selector is used to record the classification result obtained after classifying each CSS descendant selector according to the name of the last base selector in the name of the CSS descendant selector; according to the index information of each CSS descendant selector in the target style information object, determining the style rule matched by the target node; according to the priority score of each style rule matched by the target node, merging each style rule matched by the target node to determine the style of the target node. The style determination method provided by the embodiment of the present disclosure can help developers improve development efficiency by supporting descendant selectors, is simple to implement, and has low development and maintenance costs. By saving the index information of each CSS descendant selector in the style information object, the style rule matching efficiency can be improved, the application performance can be improved, and the user experience can be improved.

The application (app) involved in the embodiments of the present disclosure is, for example, a hybrid application (Hyvrid app), but the present disclosure is not limited thereto. To better illustrate the embodiments of the present disclosure, the following description is made: Applications can generally include: native applications (Native app), web applications (Web app) and hybrid applications (Hyvrid app); wherein, native applications are local applications developed separately for different smartphone operating systems, which need to be downloaded to the terminal and installed before use. The most common way to download Native apps is to visit application stores, such as Apple's App Store, Android Market, Google Play, etc. A web application is a touch-screen website. Web applications are completely developed using Web technologies such as Html, JavaScript (JS) and CSS, and are accessed through the browser of the terminal. The disadvantage is that these browser-based applications cannot call the system application programming interface (API, Application Programming Interface) to implement some advanced functions, and are not suitable for occasions with high performance requirements. A hybrid app is an app between a Native app and a Web app. Although a hybrid app looks like a Native app, it is just a UI WebView that accesses a Web app. The essence of a hybrid app is to forge an apk/ipa native program of a browser and run a Web app. A Hybrid app has both the "advantages of a good user interaction experience of a Native app" and the "advantages of cross-platform development of a Web app". It allows web developers to transform into mobile application developers at almost zero cost, and the same code can be distributed on multiple platforms by simply compiling. Compared with a Web app, developers can call most of the commonly used system APIs through packaged interfaces. Among them, the application platform provides users with services that allow them to use hybrid applications immediately without downloading and installing. Based on the application platform, developers only need to write one set of code. Hybrid applications can run on different development platforms and operating systems such as Android, IOS, and Webview, which can reduce developers' code development costs and maintenance workload.

It should be noted that the style determination method provided in the embodiments of the present disclosure can be applied to a unified platform such as a quick application platform that can provide an application opening function in seconds.

Based on the above analysis, the following specific embodiments are proposed.

FIG. 1 is a flow chart of a method for determining a style according to an exemplary embodiment. The method may be performed by a terminal, such as a smart phone, a notebook, or an electronic device such as a smart wearable device. As shown in FIG. 1 , the method includes the following steps 101-103:

In step 101, after creating the target node of the view model instance, determine the target style information object that the target node depends on; the target style information object includes: style rules corresponding to the CSS base selector, style rules corresponding to the CSS descendant selector, priority scores of each style rule, and index information of each CSS descendant selector; the index information of each CSS descendant selector is used to record the classification result obtained after classifying each CSS descendant selector according to the name of the last base selector in the name of the CSS descendant selector.

For example, when creating a view model instance, a DOM node will be compiled and created. When the DOM node is successfully created, it is necessary to insert the DOM node into the DOM tree. During this process, it is necessary to first calculate the multiple style rules (CSSRule) that the node actually matches. The target node is the target DOM node.

For example, after the target node is created, obtain a collection of style information objects registered on the document to which the target node belongs; obtain the identifier of the style information object bound to the root node of the view model instance to which the target node belongs; and determine the target style information object on which the target node depends based on the obtained collection of style information objects and the obtained identifier of the style information object.

It should be noted that the style information object refers to a kind of intermediate data generated when processing a style, and the information required for style calculation is stored in the style information object.

For example, when creating the root node of the view model instance, the style information object to be registered is generated by compiling the style code; the style information object to be registered is registered on the document of the page; and the identifier of the style information object to be registered is bound to the root node of the view model instance.

In step 102, the style rule matched by the target node is determined according to the index information of each CSS descendant selector in the target style information object.

For example, style rules can be divided into different categories, such as inline, tag, class, and id. When calculating the style rules matched by the target point, they are calculated according to different style rule categories. Among tag, class, and id, they are divided into two style rule categories: base and descendant.

In the style rules corresponding to each CSS base selector included in the target style information object, search for the first CSS base selector that matches the target node; if the second CSS base selector that matches the target node and the first CSS descendant selector indexed by the name of the second CSS base selector are found in the index information of each CSS descendant selector included in the target style information object, then obtain all parent nodes of the target node, and then search for the second CSS descendant selector that matches the target node in each first CSS descendant selector according to each parent node; determine the style rule that matches the target node according to the first CSS base selector and the second CSS descendant selector. It can be seen that by using the index information of each CSS descendant selector included in the target style information object, all possible descendant selectors can be found according to the base selector, narrowing the matching range and improving the efficiency of style rule matching.

For example, after determining the style rules that match the target node, the style rules that match the target node are cached in the target node according to different categories of style rules; when some categories are subsequently updated, only the CSS Rules that match the corresponding categories need to be recalculated, and other categories do not need to be recalculated and can be directly used with the cache, which can improve the style rule matching performance.

In step 103, the style rules matched by the target node are merged according to the priority scores of the style rules matched by the target node to determine the style of the target node.

For example, the style rules are sorted in ascending order according to the priority scores of the style rules matched by the target node; the style rules with large priority scores cover the style rules with small priority scores, and the sorted style rules are merged to obtain the style of the target node.

The technical solution provided by the embodiments of the present disclosure can help developers improve development efficiency by supporting descendant selectors, and is simple to implement with low development and maintenance costs. By saving the index information of each CSS descendant selector in the style information object, the style rule matching efficiency can be improved, the application performance can be improved, and the user experience can be improved.

FIG2 is a flow chart of a method for determining a style according to an exemplary embodiment. As shown in FIG2 , based on the embodiment shown in FIG1 , the method for determining a style involved in the present disclosure may include the following steps 201-208:

In step 201, when creating the root node of the view model instance, compile the style code to generate the style information object to be registered; register the style information object to be registered on the document of the page; and bind the identifier of the style information object to be registered on the root node of the view model instance.

In step 202, after creating the target node of the view model instance, obtain the collection of style information objects registered on the document to which the target node belongs; obtain the identifier of the style information object bound to the root node of the view model instance to which the target node belongs.

In step 203, the target style information object on which the target node depends is determined according to the set of style information objects obtained and the identifiers of the style information objects obtained; the target style information object includes: style rules corresponding to the CSS base selector, style rules corresponding to the CSS descendant selector, priority scores of each style rule, and index information of each CSS descendant selector; the index information of each CSS descendant selector is used to record the classification result obtained after classifying each CSS descendant selector according to the name of the last base selector in the name of the CSS descendant selector.

In step 204, the first CSS base selector matching the target node is searched in the style rules corresponding to the CSS base selectors included in the target style information object.

In step 205, the second CSS base selector matching the target node and the first CSS descendant selector with the name of the second CSS base selector as the index are searched in the index information of each CSS descendant selector included in the target style information object.

In step 206, all parent nodes of the target node are obtained; the second CSS descendant selector that matches the target node in each first CSS descendant selector is searched according to each parent node of the target node; and the style rule that matches the target node is determined according to the first CSS base selector and the second CSS descendant selector.

In step 207, the style rules matched by the determined target node are classified and cached in the target node according to different categories of the style rules.

In step 208, the style rules matched by the target node are sorted in ascending order according to their priority scores; style rules with smaller priority scores are covered by style rules with larger priority scores, and the sorted style rules are merged to obtain the style of the target node.

The technical solution provided by the embodiments of the present disclosure can help developers improve development efficiency by supporting descendant selectors. By using the index information of each CSS descendant selector included in the target style information object, all possible descendant selectors can be found according to the basic selector, thereby narrowing the matching range and improving the efficiency of style rule matching. By caching style rules into target nodes according to different categories, the style rule matching performance can be improved.

As a possible embodiment, a method for determining a style that supports a descendant selector is provided here, which supports descendant selectors in a framework such as a quick application that mainly uses a front-end development technology stack for application development; the complete content of the technical solution is described using the following source code as an example:

Phase 1: Generate and register style information objects

When creating a view model instance, the DOM node will be compiled and created. When compiling and creating a DOM node, it will detect whether the root node of the VM already exists on the current VM instance. If there is no root node on the VM, a style information object will be generated and registered.

The specific steps and instructions are as follows:

1>Generate style information object

Compile the style code (i.e. the code within the <style> and </style> tags in the above example) to generate a style information object. This style information object stores all the information required for subsequent style calculations; two key attributes are: 1) the priority score of the CSS Rule; 2) the list of descendant selectors ending with a certain base selector (i.e. the index information of each CSS descendant selector involved in this disclosure). An example of a style information object is as follows:

2>Register style information object

Register the above style information object on the Document of the page; bind the identifier (Id) of the style information object to the root node of the VM, so as to obtain the style information object that the node depends on when calculating the style matching the DOM node later.

Phase 2: Calculate the list of CSS rules that match the node

After the DOM node is created successfully, it needs to be inserted into the DOM tree. During this process, it is necessary to first calculate the multiple CSS Rules that the node actually matches. The specific steps and instructions are as follows:

1>Get the style information object that the DOM node depends on

Through the information stored in the DOM node, find the corresponding Document and obtain the collection of style information objects registered on the Document; then start searching from this DOM node to the parent node, and continue to find the root node of the VM to which the DOM node belongs, and obtain the ID of the style information object bound to the root node. Finally, combine the collection of style information objects and the ID of a specific style information object to obtain the style information object that the node depends on.

2> Calculate the CSS Rule list that matches the DOM node

The style rules matched by DOM nodes are divided into four categories: inline, tag, class, and id. When calculating the CSS Rule list matched by the DOM node, calculate according to these four categories. In tag, class, and id, they are divided into two categories: base and descendant. If the corresponding base selector can be found in "nameHash", add it to the CSS Rule list matched by the DOM node; if the corresponding base selector can be found in "descLast", get the parent node array of the current DOM node, and then determine whether the CSS Selector matches the current node based on the parent node array. Finally, get a list of all matching CSS Rules.

When the calculations are divided into four categories, the calculation results will be cached in the node according to the category; when some categories are updated later, only the matching CSS Rule of their own category needs to be recalculated, and the cache can be used for other categories, which optimizes performance.

Phase 3: Merge the CSS Rule list that matches the node

Before JS converts the node into a message and sends it to Native, the matching CSS Rules in the DOM node are merged. The specific steps and instructions are as follows:

1>CSS Rule sorting

Sort CSS Rules in ascending order according to their priority.

2>CSS Rule Merge

Merge the styles of DOM nodes according to the rule that the latter overrides the former.

So far, the style including CSS descendant selectors has been successfully calculated, and CSS descendant selectors are supported.

The technical solution provided by the embodiments of the present disclosure adds a descLast attribute to the style information object, and improves the efficiency of subsequent calculations by saving a list of descendant selectors that end with a certain basic selector; when calculating the CSS Rule matching the nodes according to the four categories of inline, tag, class, and id, cache is performed according to category; when only some categories are updated, other categories do not need to be recalculated, and only the cache needs to be used, which improves efficiency, can support CSS descendant selectors, and help developers improve development efficiency.

The following are embodiments of the apparatus of the present disclosure, which can be used to execute embodiments of the method of the present disclosure.

FIG3 is a block diagram of a style determination device according to an exemplary embodiment; the device may be implemented in various ways, such as implementing all components of the device in a terminal, or implementing components in the device in a coupled manner on the terminal side; the device may implement the method involved in the present disclosure through software, hardware, or a combination of both. As shown in FIG3 , the style determination device includes: a target style information object determination module 301, a style rule determination module 302, and a style determination module 303, wherein:

The target style information object determination module 301 is configured to determine the target style information object that the target node depends on after creating the target node of the view model instance; the target style information object includes: style rules corresponding to the CSS base selector, style rules corresponding to the CSS descendant selector, priority scores of each style rule, and index information of each CSS descendant selector; the index information of each CSS descendant selector is used to record the classification result obtained after classifying each CSS descendant selector according to the name of the last base selector in the name of the CSS descendant selector;

The style rule determination module 302 is configured to determine the style rule matched by the target node according to the index information of each CSS descendant selector in the target style information object;

The style determination module 303 is configured to merge the style rules matched by the target node according to the priority scores of the style rules matched by the target node, and determine the style of the target node.

The device provided in the embodiment of the present disclosure can be used to execute the technical solution of the embodiment shown in Figure 1, and its execution method and beneficial effects are similar, which will not be repeated here.

In a possible implementation, as shown in FIG. 4 , the style determination device shown in FIG. 3 may further include: a generation module 401 , a registration module 402 and a binding module 403 , wherein:

The generation module 401 is configured to compile the style code and generate a style information object to be registered when creating the root node of the view model instance;

The registration module 402 is configured to register the style information object to be registered on the document of the page;

The binding module 403 is configured to bind the identifier of the style information object to be registered to the root node of the view model instance.

In a possible implementation, as shown in FIG. 5 , the style determination apparatus shown in FIG. 3 may further include configuring the target style information object determination module 301 to include: a first acquisition submodule 501, a second acquisition submodule 502, and a first determination submodule 503, wherein:

The first acquisition submodule 501 is configured to acquire a set of style information objects registered on the document to which the target node belongs;

The second acquisition submodule 502 is configured to acquire the identifier of the style information object bound to the root node of the view model instance to which the target node belongs;

The first determining submodule 503 is configured to determine the target style information object on which the target node depends according to the acquired set of style information objects and the acquired identifiers of the style information objects.

In a possible implementation, as shown in FIG. 6 , the style determination apparatus shown in FIG. 3 may further include configuring the style rule determination module 302 to include: a first search submodule 601, a second search submodule 602, a third acquisition submodule 603, a matching submodule 604, and a second determination submodule 605, wherein:

The first search submodule 601 is configured to search for a first CSS basic selector matching the target node in the style rules corresponding to each CSS basic selector included in the target style information object;

The second search submodule 602 is configured to search for the second CSS base selector that matches the target node and the first CSS descendant selector that uses the name of the second CSS base selector as an index in the index information of each CSS descendant selector included in the target style information object;

The third acquisition submodule 603 is configured to acquire all parent nodes of the target node;

The matching submodule 604 is configured to search for a second CSS descendant selector matching the target node in each first CSS descendant selector according to each parent node;

The second determination submodule 605 is configured to determine the style rule matched by the target node according to the first CSS base selector and the second CSS descendant selector.

In a possible implementation, as shown in FIG. 7 , the style determination apparatus shown in FIG. 3 may further include a cache module 701 configured to cache the style rules matched by the determined target node into the target node according to different categories of the style rules.

In a possible implementation, as shown in FIG8 , the style determination apparatus shown in FIG3 may further include configuring the style determination module 303 to include: a sorting submodule 801 and a merging submodule 802, wherein:

The sorting submodule 801 is configured to sort the style rules matched by the target node in ascending order of priority scores of the style rules;

The merging submodule 802 is configured to cover the style rules with smaller priority scores with the style rules with larger priority scores, merge the sorted style rules, and obtain the style of the target node.

FIG9 is a block diagram of a style determination device 900 according to an exemplary embodiment. The style determination device 900 includes:

Processor 901;

Memory 902 for storing processor executable instructions;

The processor 901 is configured as follows:

After creating the target node of the view model instance, determining the target style information object that the target node depends on; the target style information object includes: style rules corresponding to the CSS base selector, style rules corresponding to the CSS descendant selector, priority scores of each style rule, and index information of each CSS descendant selector; the index information of each CSS descendant selector is used to record the classification result obtained by classifying each CSS descendant selector according to the name of the last base selector in the name of the CSS descendant selector;

Determine the style rule that the target node matches according to the index information of each CSS descendant selector in the target style information object;

According to the priority scores of the style rules matched by the target node, the style rules matched by the target node are merged to determine the style of the target node.

In one embodiment, the processor 901 may also be configured to:

When creating the root node of the view model instance, compile the style code and generate the style information object to be registered;

Register the style information object to be registered on the document of the page;

Bind the identifier of the style information object to be registered to the root node of the view model instance.

In one embodiment, the processor 901 may also be configured to:

Get the collection of style information objects registered on the document to which the target node belongs;

Get the ID of the style information object bound to the root node of the view model instance to which the target node belongs;

The target style information object on which the target node depends is determined according to the acquired set of style information objects and the identifiers of the acquired style information objects.

In one embodiment, the processor 901 may also be configured to:

Searching for the first CSS base selector that matches the target node in the style rules corresponding to the CSS base selectors included in the target style information object;

In the index information of each CSS descendant selector included in the target style information object, search for the second CSS base selector that matches the target node and the first CSS descendant selector with the name of the second CSS base selector as the index;

Get all parent nodes of the target node;

Search each first CSS descendant selector for a second CSS descendant selector that matches the target node according to each parent node;

Determine the style rule that matches the target node according to the first CSS base selector and the second CSS descendant selector.

In one embodiment, the processor 901 may be further configured to: cache the determined style rules matching the target node into the target node according to different categories of style rules.

In one embodiment, the processor 901 may also be configured to:

Sort the style rules matched by the target node in ascending order of priority scores;

The style rules with larger priority scores are used to overwrite the style rules with smaller priority scores, and the sorted style rules are merged to obtain the style of the target node.

Regarding the device in the above embodiment, the specific manner in which each module performs operations has been described in detail in the embodiment of the method, and will not be elaborated here.

Figure 10 is a block diagram of a style determination device according to an exemplary embodiment; the style determination device 1000 is suitable for a terminal; the style determination device 1000 may include one or more of the following components: a processing component 1002, a memory 1004, a power supply component 1006, a multimedia component 1008, an audio component 1010, an input/output (I/O) interface 1012, a sensor component 1014, and a communication component 1016.

The processing component 1002 generally controls the overall operation of the style determination device 1000, such as operations associated with display, phone calls, data communications, camera operations, and recording operations. The processing component 1002 may include one or more processors 1020 to execute instructions to complete all or part of the steps of the above-mentioned method. In addition, the processing component 1002 may include one or more modules to facilitate the interaction between the processing component 1002 and other components. For example, the processing component 1002 may include a multimedia module to facilitate the interaction between the multimedia component 1008 and the processing component 1002.

The memory 1004 is configured to store various types of data to support the operation of the style determination device 1000. Examples of such data include instructions for any application or method operating on the style determination device 1000, contact data, phone book data, messages, pictures, videos, etc. The memory 1004 can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic disk or optical disk.

The power supply component 1006 provides power to various components of the style determination device 1000. The power supply component 1006 may include a power management system, one or more power supplies, and other components associated with generating, managing, and distributing power for the style determination device 1000.

The multimedia component 1008 includes a screen that provides an output interface between the style determination device 1000 and the user. In some embodiments, the screen may include a liquid crystal display (LCD) and a touch panel (TP). If the screen includes a touch panel, the screen may be implemented as a touch screen to receive input signals from the user. The touch panel includes one or more touch sensors to sense touch, slide, and gestures on the touch panel. The touch sensor may not only sense the boundaries of the touch or slide action, but also detect the duration and pressure associated with the touch or slide operation. In some embodiments, the multimedia component 1008 includes a front camera and/or a rear camera. When the style determination device 1000 is in an operating mode, such as a shooting mode or a video mode, the front camera and/or the rear camera may receive external multimedia data. Each front camera and the rear camera may be a fixed optical lens system or have a focal length and optical zoom capability.

The audio component 1010 is configured to output and/or input audio signals. For example, the audio component 1010 includes a microphone (MIC), and when the style determination device 1000 is in an operation mode, such as a call mode, a recording mode, and a speech recognition mode, the microphone is configured to receive an external audio signal. The received audio signal can be further stored in the memory 1004 or sent via the communication component 1016. In some embodiments, the audio component 1010 also includes a speaker for outputting audio signals.

I/O interface 1012 provides an interface between processing component 1002 and peripheral interface modules, such as keyboards, click wheels, buttons, etc. These buttons may include but are not limited to: a home button, a volume button, a start button, and a lock button.

The sensor assembly 1014 includes one or more sensors for providing various aspects of status assessment for the style determination device 1000. For example, the sensor assembly 1014 can detect the open/closed state of the style determination device 1000, the relative positioning of components, such as the display and keypad of the style determination device 1000, the sensor assembly 1014 can also detect the position change of the style determination device 1000 or a component of the style determination device 1000, the presence or absence of user contact with the style determination device 1000, the orientation or acceleration/deceleration of the style determination device 1000, and the temperature change of the style determination device 1000. The sensor assembly 1014 can include a proximity sensor configured to detect the presence of a nearby object without any physical contact. The sensor assembly 1014 can also include an optical sensor, such as a CMOS or CCD image sensor, for use in imaging applications. In some embodiments, the sensor assembly 1014 can also include an acceleration sensor, a gyroscope sensor, a magnetic sensor, a pressure sensor, or a temperature sensor.

Communication component 1016 is configured to facilitate wired or wireless communication between style determination device 1000 and other devices. Style determination device 1000 can access a wireless network based on a communication standard, such as WiFi, 2G, 3G, 4G, 5G or a combination thereof, or an intercom network. In an exemplary embodiment, communication component 1016 receives a broadcast signal or broadcast-related information from an external broadcast management system via a broadcast channel. In an exemplary embodiment, communication component 1016 also includes a near field communication (NFC) module to facilitate short-range communication. For example, the NFC module can be implemented based on radio frequency identification (RFID) technology, infrared data association (IrDA) technology, ultra-wideband (UWB) technology, Bluetooth (BT) technology and other technologies.

In an exemplary embodiment, the style determination device 1000 can be implemented by one or more application-specific integrated circuits (ASICs), digital signal processors (DSPs), digital signal processing devices (DSPDs), programmable logic devices (PLDs), field programmable gate arrays (FPGAs), controllers, microcontrollers, microprocessors or other electronic components to perform the above method.

In an exemplary embodiment, a non-transitory computer-readable storage medium including instructions is also provided, such as a memory 1004 including instructions, and the instructions can be executed by the processor 1020 of the pattern determination device 1000 to complete the above method. For example, the non-transitory computer-readable storage medium can be a ROM, a random access memory (RAM), a CD-ROM, a magnetic tape, a floppy disk, an optical data storage device, etc.

FIG11 is a block diagram of a style determination device according to an exemplary embodiment. For example, the style determination device 1100 can be provided as a server. The style determination device 1100 includes a processing component 1102, which further includes one or more processors, and a memory resource represented by a memory 1103, which is used to store instructions that can be executed by the processing component 1102, such as an application. The application stored in the memory 1103 can include one or more modules, each of which corresponds to a set of instructions. In addition, the processing component 1102 is configured to execute instructions to perform the above method.

The style determination device 1100 may also include a power supply component 1106 configured to perform power management of the style determination device 1100, a wired or wireless network interface 1105 configured to connect the style determination device 1100 to a network, and an input/output (I/O) interface 1108. The style determination device 1100 may operate based on an operating system stored in the memory 1103, such as Windows Server™, Mac OS X™, Unix™, Linux™, FreeBSD™, or the like.

A non-transitory computer-readable storage medium, when instructions in the storage medium are executed by a processor of a style determination apparatus 1000 or a style determination apparatus 1100, enables the style determination apparatus 1000 or the style determination apparatus 1100 to perform the following method:

After creating the target node of the view model instance, determining the target style information object that the target node depends on; the target style information object includes: style rules corresponding to the CSS base selector, style rules corresponding to the CSS descendant selector, priority scores of each style rule, and index information of each CSS descendant selector; the index information of each CSS descendant selector is used to record the classification result obtained by classifying each CSS descendant selector according to the name of the last base selector in the name of the CSS descendant selector;

Determine the style rule that the target node matches according to the index information of each CSS descendant selector in the target style information object;

According to the priority scores of the style rules matched by the target node, the style rules matched by the target node are merged to determine the style of the target node.

In one embodiment, the method further comprises:

When creating the root node of the view model instance, compile the style code and generate the style information object to be registered;

Register the style information object to be registered on the document of the page;

Bind the identifier of the style information object to be registered to the root node of the view model instance.

In one embodiment, determining the target style information object that the target node depends on includes:

Get the collection of style information objects registered on the document to which the target node belongs;

Get the ID of the style information object bound to the root node of the view model instance to which the target node belongs;

The target style information object on which the target node depends is determined according to the acquired set of style information objects and the identifiers of the acquired style information objects.

In one embodiment, determining the style rule matched by the target node according to the index information of each CSS descendant selector in the target style information object includes:

Searching for the first CSS base selector that matches the target node in the style rules corresponding to the CSS base selectors included in the target style information object;

In the index information of each CSS descendant selector included in the target style information object, search for the second CSS base selector that matches the target node and the first CSS descendant selector with the name of the second CSS base selector as the index;

Get all parent nodes of the target node;

Search each first CSS descendant selector for a second CSS descendant selector that matches the target node according to each parent node;

Determine the style rule that matches the target node according to the first CSS base selector and the second CSS descendant selector.

In one embodiment, the method further comprises:

The style rules that match the determined target node are classified and cached in the target node according to different categories of the style rules.

In one embodiment, according to the priority scores of the style rules matched by the target node, the style rules matched by the target node are merged to determine the style of the target node, including:

Sort the style rules matched by the target node in ascending order of priority scores;

The style rules with larger priority scores are used to overwrite the style rules with smaller priority scores, and the sorted style rules are merged to obtain the style of the target node.

Those skilled in the art will readily appreciate other embodiments of the present disclosure after considering the specification and practicing the disclosure disclosed herein. This application is intended to cover any variations, uses, or adaptations of the present disclosure that follow the general principles of the present disclosure and include common knowledge or customary techniques in the art that are not disclosed in the present disclosure. The specification and examples are intended to be exemplary only, and the true scope and spirit of the present disclosure are indicated by the following claims.

It should be understood that the present disclosure is not limited to the exact structures that have been described above and shown in the drawings, and that various modifications and changes may be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.

Claims (10)

1. A method for determining a style, comprising: After creating a target node of the view model instance, determining a target style information object on which the target node depends; the target style information object includes: style rules corresponding to a CSS base selector, style rules corresponding to a CSS descendant selector, priority scores of each of the style rules, and index information of each of the CSS descendant selectors; the index information of each of the CSS descendant selectors is used to record a classification result obtained by classifying each of the CSS descendant selectors according to the name of the last base selector in the name of the CSS descendant selector; Determining the style rule matched by the target node according to the index information of each of the CSS descendant selectors in the target style information object; According to the priority scores of the style rules matched by the target node, the style rules matched by the target node are merged to determine the style of the target node; The step of determining the style rule matched by the target node according to the index information of each of the CSS descendant selectors in the target style information object includes: Searching for a first CSS base selector matching the target node in the style rules corresponding to each CSS base selector included in the target style information object; Searching for a second CSS base selector matching the target node and a first CSS descendant selector with the name of the second CSS base selector as an index in the index information of each CSS descendant selector included in the target style information object; Get all parent nodes of the target node; Searching for a second CSS descendant selector matching the target node in each of the first CSS descendant selectors according to each of the parent nodes; Determine, according to the first CSS base selector and the second CSS descendant selector, a style rule matched by the target node; The step of merging the style rules matched by the target node according to the priority scores of the style rules matched by the target node to determine the style of the target node includes: Sort the style rules matched by the target node in ascending order of priority scores; The style rules with larger priority scores are used to cover the style rules with smaller priority scores, and the sorted style rules are merged to obtain the style of the target node. 2. The method according to claim 1, characterized in that the method further comprises: When creating the root node of the view model instance, compile the style code and generate a style information object to be registered; Registering the style information object to be registered on the document of the page; The identifier of the style information object to be registered is bound to the root node of the view model instance. 3. The method according to claim 1, characterized in that the step of determining the target style information object on which the target node depends comprises: Obtain a collection of style information objects registered on the document to which the target node belongs; Obtaining the identifier of the style information object bound to the root node of the view model instance to which the target node belongs; The target style information object on which the target node depends is determined according to the acquired set of style information objects and the identifiers of the acquired style information objects. 4. The method according to claim 1, characterized in that the method further comprises: The determined style rules matching the target node are cached in the target node according to different categories of style rules. 5. A pattern determination device, comprising: A target style information object determination module is used to determine the target style information object that the target node depends on after creating the target node of the view model instance; the target style information object includes: style rules corresponding to the CSS base selector of the cascading style sheet, style rules corresponding to the CSS descendant selector, priority scores of each style rule, and index information of each CSS descendant selector; the index information of each CSS descendant selector is used to record the classification result obtained after classifying each CSS descendant selector according to the name of the last base selector in the name of the CSS descendant selector; A style rule determination module, used to determine the style rule matched by the target node according to the index information of each CSS descendant selector in the target style information object; A style determination module, configured to combine the style rules matched by the target node according to the priority scores of the style rules matched by the target node, and determine the style of the target node; The style rule determination module includes: A first search submodule, configured to search for a first CSS basic selector matching the target node in style rules corresponding to each CSS basic selector included in the target style information object; A second search submodule is configured to search, in the index information of each of the CSS descendant selectors included in the target style information object, a second CSS base selector matching the target node and a first CSS descendant selector with the name of the second CSS base selector as an index; A third acquisition submodule is used to acquire all parent nodes of the target node; A matching submodule, used for searching, according to each of the parent nodes, for a second CSS descendant selector in each of the first CSS descendant selectors that matches the target node; A second determination submodule, configured to determine a style rule matched by the target node according to the first CSS base selector and the second CSS descendant selector; The style determination module includes: A sorting submodule, used to sort the style rules matched by the target node in ascending order of priority scores of the style rules; The merging submodule is used to cover the style rules with smaller priority scores with the style rules with larger priority scores, and merge the sorted style rules to obtain the style of the target node. 6. The device according to claim 5, characterized in that the device further comprises: A generation module, used for compiling the style code and generating a style information object to be registered when creating the root node of the view model instance; A registration module, used to register the style information object to be registered on the document of the page; A binding module is used to bind the identifier of the style information object to be registered to the root node of the view model instance. 7. The device according to claim 5, characterized in that the target style information object determination module comprises: A first acquisition submodule is used to acquire a set of style information objects registered on the document to which the target node belongs; A second acquisition submodule is used to acquire the identifier of the style information object bound to the root node of the view model instance to which the target node belongs; The first determination submodule is used to determine the target style information object on which the target node depends according to the acquired set of style information objects and the acquired identifiers of the style information objects. 8. The device according to claim 5, characterized in that the device further comprises: The cache module is used to cache the determined style rules matched by the target node into the target node according to different categories of style rules. 9. A pattern determination device, comprising: processor; a memory for storing processor-executable instructions; Wherein, the processor is configured to: After creating a target node of the view model instance, determining a target style information object on which the target node depends; the target style information object includes: style rules corresponding to a CSS base selector, style rules corresponding to a CSS descendant selector, priority scores of each of the style rules, and index information of each of the CSS descendant selectors; the index information of each of the CSS descendant selectors is used to record a classification result obtained by classifying each of the CSS descendant selectors according to the name of the last base selector in the name of the CSS descendant selector; Determining the style rule matched by the target node according to the index information of each of the CSS descendant selectors in the target style information object; According to the priority scores of the style rules matched by the target node, the style rules matched by the target node are merged to determine the style of the target node; The step of determining the style rule matched by the target node according to the index information of each of the CSS descendant selectors in the target style information object includes: Searching for a first CSS base selector matching the target node in the style rules corresponding to each CSS base selector included in the target style information object; Searching for a second CSS base selector matching the target node and a first CSS descendant selector with the name of the second CSS base selector as an index in the index information of each CSS descendant selector included in the target style information object; Get all parent nodes of the target node; Searching for a second CSS descendant selector matching the target node in each of the first CSS descendant selectors according to each of the parent nodes; Determine, according to the first CSS base selector and the second CSS descendant selector, a style rule matched by the target node; The step of merging the style rules matched by the target node according to the priority scores of the style rules matched by the target node to determine the style of the target node includes: Sort the style rules matched by the target node in ascending order of priority scores; The style rules with larger priority scores are used to cover the style rules with smaller priority scores, and the sorted style rules are merged to obtain the style of the target node. 10. A computer-readable storage medium having computer instructions stored thereon, characterized in that when the instructions are executed by a processor, the steps of the method described in any one of claims 1 to 4 are implemented.

Images