Main application style isolation method and system based on plug-in mode

Abstract

The invention provides a main application style isolation method and system based on a plug-in mode, and relates to the technical field of micro-front-end frameworks, and the method comprises the steps: creating a temporary folder storage processing file, scanning and constructing a style index table, initializing a rule stack record nesting hierarchy, processing a style file according to lines, and dynamically inserting a selector expression when a style declaration block is detected. And finally, replacing the original packaged file with the processed style file. According to the method, the mutual pollution of the main application style and the micro application style can be effectively prevented, the accuracy and the automation degree of style processing are improved, and the maintenance cost is reduced.

Description

Technical Field

[0001] The present invention relates to the technical field of micro-frontend frameworks, and in particular to a main application style isolation method and system based on a plug-in mode. Background Art

[0002] With the rise of micro-frontend architecture, Qiankun has become widely adopted as a mainstream micro-frontend framework. It provides resource isolation and independent deployment capabilities between applications. In a micro-frontend architecture, the main application and sub-applications coexist on the same page. Their styles may affect each other, leading to style pollution. The main application serves as the entry point and framework carrier of the entire micro-frontend system. Its style rules often have a global scope, which can easily have unpredictable effects on sub-applications.

[0003] Currently, the Qiankun framework primarily focuses on style isolation for sub-applications, achieving this through technologies like Shadow DOM or CSS prefixes. However, support for style isolation within the main application is insufficient. In real-world projects, developers often manually add specific prefixes or style scopes to prevent the main application's styles from affecting sub-applications. This approach is labor-intensive and error-prone. Furthermore, existing automated style isolation tools are primarily targeted at single frameworks like Vue and React, lacking a unified solution for isolating the main application's style in cross-framework micro-frontend scenarios. Summary of the Invention

[0004] The embodiments of the present invention provide a main application style isolation method and system based on a plug-in mode, which can solve the problems in the prior art.

[0005] A first aspect of an embodiment of the present invention provides a main application style isolation method based on a plug-in mode, including:

[0006] Receive the package build command of the main application and call the style isolation script plug-in to create a temporary folder to store the processed files;

[0007] Scan the main application file structure to build a style file index table, which records the path, type and dependency relationship of the style files, groups and sorts the style files according to the dependency relationship, and generates a style file processing queue;

[0008] Initialize a rule stack for each file in the style file processing queue, wherein the rule stack is used to record the nested hierarchical relationship of the style declaration block;

[0009] Read the content of the style file line by line. When a comment line or a line with a target identifier is detected, the line is marked as ignored and stored in the processing result cache, retaining the original comment information.

[0010] When a style declaration block start tag is detected, a level identifier is pushed into the rule stack. If the rule stack is empty, the top-level style rule processing is started, a selector expression is dynamically inserted before the rule, and the insertion position is recorded in the processing result cache.

[0011] When the end marker of the style declaration block is detected, the level identifier is removed from the rule stack. If the length of the rule stack after the removal is 1, a target expression corresponding to the aforementioned selector expression is appended to the end of the style rule;

[0012] The processed style file content is written into the corresponding file in the temporary folder. The style file in the temporary folder replaces the original packaged style file as a whole, completing the isolation processing of the main application style.

[0013] Scan the main application file structure to build a dependency graph, group and sort the style files according to the dependency graph, and generate a style file processing queue, including:

[0014] Counting the number of times the style file is directly referenced by other files to obtain a reference count value, dividing the reference count value by the total number of style files to obtain a reference weight, and calculating the temporal correlation between the reference weight and the file modification time to obtain a dependency weight;

[0015] Generate a dependency graph based on the dependency weights of the style files. Calculate a dependency strength value by multiplying the product of the style file's dependency weight and its reference weight by the square root of the sum of the squares of the dependency weights. Determine the style file's dependency transitive strength by multiplying the dependency strength value with the attenuation coefficient and transitive probability of each layer's dependency.

[0016] Calculate the similarity values ​​between files and generate a similarity matrix. Based on the similarity matrix and the dependency transfer strength, divide the style files into multiple groups. Determine the optimal grouping scheme by calculating the sum of the squares of the distances between the style files in the group and the group center.

[0017] The dependency priority, complexity score and timing impact in the style file grouping results are multiplied by their corresponding weight coefficients and summed to obtain a comprehensive priority score. The priority value of the style file is dynamically updated using the product of the comprehensive priority score and the preset learning rate; based on the priority value of the style file, a style file processing queue is generated.

[0018] A rule stack is initialized for each file in the style file processing queue. The rule stack is used to record the nested hierarchical relationship of the style declaration blocks, including:

[0019] For each style file in the style file processing queue, a rule stack using a last-in-first-out data structure is constructed, wherein each stack frame in the rule stack includes a level depth, selector information, and a scope identifier, wherein the level depth represents the nesting depth of the style rules;

[0020] Initializing the operating environment of the rule stack, setting the initial capacity and expansion factor, and establishing a selector mapping table, wherein the selector mapping table records the use frequency and complexity of the selector;

[0021] Detecting the start tag of a style rule, calculating a new level depth based on the current level depth and the selector complexity, pushing a stack frame containing the new level depth onto the rule stack, and updating the usage frequency of the corresponding selector in the selector mapping table;

[0022] When the end tag of the style rule is detected, the top element of the rule stack is obtained, the product of the feature weight and the matching degree is calculated as a validity verification value, and whether the current end tag matches the top element of the stack is determined according to the validity verification value;

[0023] Based on the timestamp, random factor and application prefix, a scope identifier is generated through a hash function, and the scope identifier is injected into the top-level selector to form an isolation expression; a selector specificity value is obtained through a weighted calculation of the number of ID selectors, the number of class selectors and the number of element selectors, and the selector priority is determined based on the specificity value. The processed selector information is updated to the stack frame corresponding to the rule stack;

[0024] When the style rule processing is completed, the stack frame is popped from the rule stack, and the processed style rule is written into the style file.

[0025] When a style declaration block start tag is detected, a level identifier is pushed into the rule stack. If the rule stack is empty, the top-level style rule processing is started. A selector expression is dynamically inserted before the rule, and the insertion position is recorded in the processing result cache, including:

[0026] When a style declaration block start tag is detected, the level depth, selector information, and scope identifier of the current style declaration block are obtained to generate a level identifier; the level identifier is pushed into the rule stack, and the stack depth value of the rule stack is read. When the stack depth value is zero, the current style rule is marked as a top-level style rule;

[0027] Traversing each level identifier in the rule stack, extracting a depth coefficient corresponding to each level identifier, using the depth coefficient as a weight coefficient, performing a weighted calculation on each level identifier and the corresponding weight coefficient to obtain a weighted result, and accumulating the weighted results to generate a selector expression;

[0028] Obtaining valid scope information of the current processing context, performing a matching operation on the selector expression and the valid scope information to obtain a matching set, determining whether the matching set is empty, and determining that the selector expression has passed verification when the matching set is not empty;

[0029] In response to the selector expression passing verification, determining the starting position of the rule corresponding to the style declaration block, inserting the selector expression before the starting position, and obtaining an updated style rule;

[0030] A retrieval hash value of the selector expression is calculated, and the retrieval hash value and insertion position information are written into a processing result cache, where the processing result cache is used to record a historical insertion position of the selector expression.

[0031] When the end tag of the style declaration block is detected, the level identifier is removed from the rule stack. If the length of the rule stack after the removal is 1, a target expression corresponding to the aforementioned selector expression is appended to the end of the style rule, including:

[0032] When the end tag of the style declaration block is detected, obtaining the top level identifier of the rule stack;

[0033] Removing the top level identifier of the stack from the rule stack, obtaining the remaining level identifiers in the rule stack, and counting the remaining level identifiers to obtain the rule stack length;

[0034] In response to the rule stack length being one, reading the selector expression from the processing result cache, performing a conversion and mapping operation on the selector expression and current context information to generate a target expression;

[0035] Acquire the end position information of the current style rule, combine the end position information with the length information of the target expression to form an additional position parameter; append the target expression to the end of the style rule based on the additional position parameter to obtain an updated style rule;

[0036] Performing a semantic mapping operation on the target expression and the aforementioned selector expression to determine whether the semantic mapping results are consistent, and confirming that the corresponding relationship verification has passed in response to the semantic mapping results being consistent; performing an integrity check on the updated style rule to determine the structural integrity of the updated style rule and the validity of the target expression;

[0037] In response to the integrity check passing, the updated style rule is written into the style rule output, completing the termination processing of the style declaration block.

[0038] In response to the rule stack length being one, reading the selector expression from the processing result cache, performing a conversion and mapping operation on the selector expression and the current context information to generate a target expression, including:

[0039] Reading a retrieval hash value from a processing result cache, locating a storage location of the selector expression in the processing result cache based on the retrieval hash value, and reading the selector expression;

[0040] Obtaining context attribute identifiers in the current processing environment, extracting attribute values ​​corresponding to each of the context attribute identifiers, and forming a context information structure in the form of key-value pairs with the context attribute identifiers and the attribute values;

[0041] Scan the attribute values ​​in the context information structure, calculate the influence factor of each attribute value, and generate context features based on the influence factors; perform a matching operation on the aforementioned selector expression and the context information structure, identify matching points, extract associated features of the matching points, and generate an interactive feature set; identify semantic units in the aforementioned selector expression, extract feature parameters of the semantic units, and generate a selector feature set based on the feature parameters;

[0042] The selector feature set, the context feature set, and the interaction feature set are organized into a feature vector according to preset dimensions; based on the feature vector, the aforementioned selector expression and the context information structure are input into an interaction integration function to generate a target expression.

[0043] A second aspect of an embodiment of the present invention provides a main application style isolation system based on a plug-in mode, including:

[0044] The first unit is used to receive the package build command of the main application and call the style isolation script plug-in to create a temporary folder to store the processed files;

[0045] The second unit is used to scan the main application file structure to build a style file index table. The style file index table records the path, type and dependency relationship of the style files, groups and sorts the style files according to the dependency relationship, and generates a style file processing queue;

[0046] The third unit is used to initialize a rule stack for each file in the style file processing queue, wherein the rule stack is used to record the nested hierarchical relationship of the style declaration block;

[0047] The fourth unit is used to read the content of the style file line by line. When a comment line or a line with a target identifier is detected, the line is marked as ignored and stored in the processing result cache, retaining the original comment information;

[0048] The fifth unit is configured to, upon detecting a style declaration block start tag, push a level identifier into the rule stack, and if the rule stack is empty, proceed to the top-level style rule processing, dynamically insert a selector expression before the rule, and record the insertion position in the processing result cache;

[0049] The sixth unit is configured to, when detecting the end marker of the style declaration block, remove the level identifier from the rule stack, and if the length of the rule stack after the removal is 1, append a target expression corresponding to the selector expression at the end of the style rule;

[0050] The seventh unit is used to write the processed style file content into the corresponding file in the temporary folder, and the style file in the temporary folder completely replaces the original packaged style file to complete the isolation processing of the main application style.

[0051] According to a third aspect of the embodiments of the present invention,

[0052] An electronic device is provided, comprising:

[0053] processor;

[0054] a memory for storing processor-executable instructions;

[0055] The processor is configured to call the instructions stored in the memory to execute the aforementioned method.

[0056] According to a fourth aspect of the embodiments of the present invention,

[0057] A computer-readable storage medium is provided, on which computer program instructions are stored. When the computer program instructions are executed by a processor, the method described above is implemented.

[0058] The beneficial effects of this application are as follows:

[0059] By integrating the style isolation script plug-in, the main application style is automatically isolated and processed, eliminating the need for developers to manually modify the style code. This greatly reduces the cost of handling style conflicts in micro-frontend framework applications and improves development efficiency.

[0060] It uses a rule stack structure and dynamic selector insertion technology to accurately identify and process style nesting hierarchical relationships, ensuring the accuracy and integrity of style isolation, and effectively solving rendering anomalies caused by inconsistent style selector weights in traditional methods.

[0061] By building a style file index table and grouping and sorting them according to dependencies, we can achieve orderly processing of complex style file structures while retaining the original annotation information and specific identification content, ensuring the traceability and maintainability of style processing and improving the overall stability of micro-frontend applications. BRIEF DESCRIPTION OF THE DRAWINGS

[0062] Figure 1 This is a flow chart of a method for isolating main application styles based on a plug-in mode according to an embodiment of the present invention;

[0063] Figure 2 Generate an architecture diagram for style file dependency analysis and processing queues. DETAILED DESCRIPTION

[0064] To make the objectives, technical solutions, and advantages of the embodiments of the present invention more clear, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative efforts shall fall within the scope of protection of the present invention.

[0065] The following specific embodiments are used to describe the technical solution of the present invention in detail. The following specific embodiments can be combined with each other, and the same or similar concepts or processes may not be described in detail in some embodiments.

[0066] Figure 1 FIG. 1 is a flow chart of a main application style isolation method based on a plug-in mode according to an embodiment of the present invention. Figure 1 As shown, the method includes:

[0067] Receive the package build command of the main application and call the style isolation script plug-in to create a temporary folder to store the processed files;

[0068] Scan the main application file structure to build a style file index table, which records the path, type and dependency relationship of the style files, groups and sorts the style files according to the dependency relationship, and generates a style file processing queue;

[0069] Initialize a rule stack for each file in the style file processing queue, wherein the rule stack is used to record the nested hierarchical relationship of the style declaration block;

[0070] Read the content of the style file line by line. When a comment line or a line with a target identifier is detected, the line is marked as ignored and stored in the processing result cache, retaining the original comment information.

[0071] When a style declaration block start tag is detected, a level identifier is pushed into the rule stack. If the rule stack is empty, the top-level style rule processing is started, a selector expression is dynamically inserted before the rule, and the insertion position is recorded in the processing result cache.

[0072] When the end marker of the style declaration block is detected, the level identifier is removed from the rule stack. If the length of the rule stack after the removal is 1, a target expression corresponding to the aforementioned selector expression is appended to the end of the style rule;

[0073] The processed style file content is written into the corresponding file in the temporary folder. The style file in the temporary folder replaces the original packaged style file as a whole, completing the isolation processing of the main application style.

[0074] Figure 2 Generate an architecture diagram for style file dependency analysis and processing queue. In an optional implementation, scan the main application file structure to build a dependency graph, group and sort the style files according to the dependency graph, and generate a style file processing queue, including:

[0075] Counting the number of times the style file is directly referenced by other files to obtain a reference count value, dividing the reference count value by the total number of style files to obtain a reference weight, and calculating the temporal correlation between the reference weight and the file modification time to obtain a dependency weight;

[0076] Generate a dependency graph based on the dependency weights of the style files. Calculate a dependency strength value by multiplying the product of the style file's dependency weight and its reference weight by the square root of the sum of the squares of the dependency weights. Determine the style file's dependency transitive strength by multiplying the dependency strength value with the attenuation coefficient and transitive probability of each layer's dependency.

[0077] Calculate the similarity values ​​between files and generate a similarity matrix. Based on the similarity matrix and the dependency transfer strength, divide the style files into multiple groups. Determine the optimal grouping scheme by calculating the sum of the squares of the distances between the style files in the group and the group center.

[0078] The dependency priority, complexity score and timing impact in the style file grouping results are multiplied by their corresponding weight coefficients and summed to obtain a comprehensive priority score. The priority value of the style file is dynamically updated using the product of the comprehensive priority score and the preset learning rate; based on the priority value of the style file, a style file processing queue is generated.

[0079] The present invention provides a method for scanning a main application file structure to construct a dependency graph, grouping and sorting style files according to the dependency graph, and generating a style file processing queue.

[0080] The system scans the source code file structure of the main application, identifying all stylesheet files and the references between them. This scanning is achieved by parsing import, require, or link statements in the application code. For example, a web application may contain multiple CSS files, with common.css being referenced by header.css and footer.css, which are in turn referenced by different component files. The system records these references and constructs an initial dependency graph.

[0081] When counting the number of style file references, the system calculates the number of times each style file is directly referenced by other files to obtain a reference count value. For example, if base.css is referenced by 10 other files, and there are a total of 50 style files in the application, the reference weight of base.css is 0.2. At the same time, the system takes into account the modification time of the file and calculates the temporal correlation between the reference weight and the modification time. During the temporal correlation calculation process, the system analyzes the correlation between the modification frequency of the style file and the reference changes in the last 30 days, and obtains a correlation coefficient between 0 and 1. If a style file is frequently modified and referenced a large number of times, its dependency weight will be higher. For example, if the reference weight of theme.css is 0.15, and the temporal correlation between its modification frequency and reference changes is 0.8, its dependency weight is 0.12.

[0082] The dependency graph is constructed based on the dependency weights of the style files. The system calculates the sum of the product of the dependency weights and the reference weights of the style files, and then divides it by the square root of the sum of the squares of the dependency weights to obtain the dependency strength value. For example, for two style files A and B, if A has a dependency weight of 0.3 and a reference weight of 0.4, and B has a dependency weight of 0.2 and a reference weight of 0.5, then the dependency strength value between them is approximately 0.83. The system also considers the transitivity of dependencies, and determines the dependency transitive strength of the style file by multiplying the dependency strength value with the attenuation coefficient and the transfer probability of each layer of dependency. In practical applications, the attenuation coefficient is usually set to 0.85, and the transfer probability is determined based on the stability of the reference relationship between files, ranging from 0.6 to 0.9.

[0083] The calculation of similarity between files is based on the content features of the style files. The system extracts features such as selectors, attributes, and values ​​in the style files to construct feature vectors. By calculating the cosine distance between the feature vectors of the two files, the similarity value is obtained, and then a similarity matrix is ​​generated. For example, if two style files both contain a large number of definitions about table styles, their similarity will be higher, reaching above 0.75. Based on the similarity matrix and dependency transfer strength, the system uses an improved K-means clustering algorithm to divide the style files into multiple groups. To determine the optimal grouping scheme, the system calculates the sum of the squares of the distances between the style files in each group and the center point of the group, and selects the scheme with the smallest value. In actual applications, the number of groups is usually set according to the complexity of the project, generally 3 to 8 groups.

[0084] For each style file in a group, the system calculates its comprehensive priority score. Calculate the dependency priority, that is, the weight of the file's position in the dependency graph. Files at the upper level of the dependency tree have higher priority. Then calculate the complexity score based on factors such as file size, selector complexity, and nesting level. Calculate the timing impact to reflect the impact of the file's recent modification on the system. The system multiplies these three indicators by the corresponding weight coefficients and sums them to obtain a comprehensive priority score. For example, a style file has a dependency priority of 0.8 and a weight of 0.5; a complexity score of 0.6 and a weight of 0.3; a timing impact of 0.4 and a weight of 0.2; then its comprehensive priority score is 0.66.

[0085] The system uses an adaptive learning mechanism to dynamically update the priority of style files. This adjusts the style file's position in the processing queue by multiplying its overall priority score by a preset learning rate. The learning rate is typically set between 0.05 and 0.2 and automatically adjusts based on system performance. For example, if a file's current priority is 0.7, its overall priority score is 0.8, and its learning rate is 0.1, the updated priority will be 0.71.

[0086] The system generates a processing queue for style files based on the updated priority value. Within the processing queue, high-priority style files are prioritized, ensuring that changes to critical style files are promptly reflected in the application, improving development efficiency and user experience. For example, in a large application with 120 style files, this method can reduce processing time from 15 minutes to 4 minutes, ensuring that core style changes take effect within 1 minute.

[0087] In an optional embodiment, a rule stack is initialized for each file in the style file processing queue. The rule stack is used to record the nested hierarchical relationship of the style declaration blocks, including:

[0088] For each style file in the style file processing queue, a rule stack using a last-in-first-out data structure is constructed, wherein each stack frame in the rule stack includes a level depth, selector information, and a scope identifier, wherein the level depth represents the nesting depth of the style rules;

[0089] Initializing the operating environment of the rule stack, setting the initial capacity and expansion factor, and establishing a selector mapping table, wherein the selector mapping table records the use frequency and complexity of the selector;

[0090] Detecting the start tag of a style rule, calculating a new level depth based on the current level depth and the selector complexity, pushing a stack frame containing the new level depth onto the rule stack, and updating the usage frequency of the corresponding selector in the selector mapping table;

[0091] When the end tag of the style rule is detected, the top element of the rule stack is obtained, the product of the feature weight and the matching degree is calculated as a validity verification value, and whether the current end tag matches the top element of the stack is determined according to the validity verification value;

[0092] Based on the timestamp, random factor and application prefix, a scope identifier is generated through a hash function, and the scope identifier is injected into the top-level selector to form an isolation expression; a selector specificity value is obtained through a weighted calculation of the number of ID selectors, the number of class selectors and the number of element selectors, and the selector priority is determined based on the specificity value. The processed selector information is updated to the stack frame corresponding to the rule stack;

[0093] When the style rule processing is completed, the stack frame is popped from the rule stack, and the processed style rule is written into the style file.

[0094] The following techniques can be used to initialize the rule stack for each file in the style file processing queue. The rule stack initialization process starts with the construction of the style file queue. The system scans the project root directory, collects all style files with extensions such as .css, .scss, and .less, sorts them by modification timestamp, and stores them in the processing queue. For each style file in the queue, the system builds a rule stack with a last-in-first-out data structure. Each stack frame of this rule stack contains three key attributes: level depth (depth), which is used to indicate the depth level of the current style rule in the entire nested structure; selector information (selectorInfo), which includes selector text, type, and complexity; and scope identifier (scopeId), which is used to achieve style isolation.

[0095] Initializing the rule stack's runtime environment involves memory allocation and data structure preparation. By default, the system allocates an initial stack capacity of 16 bytes for the rule stack, with an expansion factor of 1.5. This means that when stack space utilization exceeds 75%, the stack automatically expands to 1.5 times its original capacity. Simultaneously, the system establishes a selector mapping table, implemented as a hash table with an initial bucket count of 32, to record selector usage frequency and complexity. Complexity is calculated based on the number of elements, pseudo-classes, and attribute selectors contained in the selector. For example, the selector "div.container > p:first-child" has a complexity of 4, consisting of two element selectors, one class selector, and one pseudo-class selector.

[0096] When the system detects the start tag of a style rule (such as "{"), it calculates the new level depth based on the current context. The calculation formula for the new level depth is: parent level depth plus the current selector complexity divided by 10 and rounded up. For example, if the parent level depth is 1 and the current selector complexity is 15, the new level depth is 1+⌈15 / 10⌉=1+2=3. After the calculation is completed, the system creates a new stack frame containing the new level depth, current selector information and an empty scope identifier, and pushes it into the rule stack. At the same time, the usage frequency of the corresponding selector is updated in the selector mapping table. If the selector appears for the first time, the frequency is set to 1, otherwise the existing frequency is increased by 1.

[0097] When the end tag of a style rule (such as "}") is detected, the system obtains the top element of the rule stack for validity verification. The verification process calculates the product of the feature weight and the matching degree as the validity verification value. The feature weight is based on the layer depth of the stack frame and is calculated as 256 minus the layer depth multiplied by 16; the matching degree is calculated by comparing the proximity of the end tag position to the expected position and ranges from 0 to 1. If the validity verification value is greater than the preset threshold of 128, the match is considered successful. For example, the layer depth of the top element of the stack is 2, the feature weight is 256-2×16=224, the matching degree is 0.95, and the product is 224×0.95=212.8, which is greater than 128, and the verification is passed.

[0098] When processing style rules, the system needs to generate a scope identifier and inject it into the selector. This scope identifier is generated using a hash function whose inputs include the current timestamp (accurate to milliseconds), a random factor between 0 and 9999, and the fixed application prefix "app." For example, with a timestamp of 1625142589364, a random factor of 7831, and an application prefix of "app," the MD5 hash algorithm calculates the scope identifier "a7f9b321" by taking the first 8 digits. The system then injects this identifier into the top-level selector, forming an isolation expression. For example, if the original selector is ".container," it becomes ".container[data-v-a7f9b321]" after injection, thus achieving style isolation.

[0099] The selector specificity value is calculated based on the number of ID selectors, class selectors, and element selectors. Each ID selector contributes 100 points, each class selector (including attribute selectors and pseudo-classes) contributes 10 points, and each element selector (including pseudo-elements) contributes 1 point. For example, the selector "#main .header h1:hover" contains 1 ID selector, 1 class selector, 1 element selector, and 1 pseudo-class, resulting in a specificity of 100 × 1 + 10 × (1 + 1) + 1 × 1 = 121. The system determines the selector's priority based on the specificity value; higher specificity values ​​give it a higher priority. After calculation, the system updates the processed selector information to the corresponding stack frame in the rule stack.

[0100] When style rule processing is complete, the system pops the corresponding stack frame from the rule stack and writes the processed style rule to the output buffer. Once the output buffer reaches the preset size (4KB by default) or all rules have been processed, the system writes the buffer contents to disk, generating a processed style file. The processed style file retains the original style declaration content, but the selector has been injected with a scope identifier to achieve style isolation. The entire processing process accurately tracks the nested hierarchical relationship of style declaration blocks through the rule stack to ensure correct parsing and conversion of style rules.

[0101] In an optional embodiment, when a style declaration block start tag is detected, a level identifier is pushed into the rule stack. If the rule stack is empty, the top-level style rule processing is started, a selector expression is dynamically inserted before the rule, and the insertion position is recorded in the processing result cache, including:

[0102] When a style declaration block start tag is detected, the level depth, selector information, and scope identifier of the current style declaration block are obtained to generate a level identifier; the level identifier is pushed into the rule stack, and the stack depth value of the rule stack is read. When the stack depth value is zero, the current style rule is marked as a top-level style rule;

[0103] Traversing each level identifier in the rule stack, extracting a depth coefficient corresponding to each level identifier, using the depth coefficient as a weight coefficient, performing a weighted calculation on each level identifier and the corresponding weight coefficient to obtain a weighted result, and accumulating the weighted results to generate a selector expression;

[0104] Obtaining valid scope information of the current processing context, performing a matching operation on the selector expression and the valid scope information to obtain a matching set, determining whether the matching set is empty, and determining that the selector expression has passed verification when the matching set is not empty;

[0105] In response to the selector expression passing verification, determining the starting position of the rule corresponding to the style declaration block, inserting the selector expression before the starting position, and obtaining an updated style rule;

[0106] A retrieval hash value of the selector expression is calculated, and the retrieval hash value and insertion position information are written into a processing result cache, where the processing result cache is used to record a historical insertion position of the selector expression.

[0107] This invention discloses a method for dynamically inserting selector expressions to process style rules. This method pushes a level identifier into the rule stack upon detecting the start tag of a style declaration block and, where appropriate, inserts a selector expression before the style rule. The following details the specific technical aspects of implementing this method.

[0108] In actual applications, when the system detects the start tag of a style declaration block (such as "{" in CSS), the system will obtain the hierarchical depth, selector information, and scope identifier of the current style declaration block. The hierarchical depth can be understood as the number of nested layers of style rules. For example, in nested CSS, a depth of 0 represents the top-level rule, a depth of 1 represents the first level of nested rules, and so on. The selector information contains the selector text of the style rule, such as "div", ".className", etc. The scope identifier is used to distinguish different style scopes, such as component scope, global scope, etc. The system combines these three parts of information to generate a hierarchical identifier. For example, it can be constructed as a data structure such as "{depth: 2, selector: '.button', scopeId: 'comp-5'}".

[0109] The system then pushes this level identifier onto the rule stack. The rule stack is a last-in, first-out data structure that maintains the hierarchy of the currently processed style rules. After pushing the level identifier, the system reads the stack depth value of the rule stack. If the stack depth value is 0, it means that no other rules are currently being processed, and the system marks the current style rule as a top-level style rule. For example, for a CSS rule like ".button { color: red;}", when "{" is detected, the stack is empty and the depth is 0, and it is marked as a top-level style rule.

[0110] Next, the system will traverse each level identifier in the rule stack and extract the depth coefficient corresponding to each level identifier. The depth coefficient is a weight value calculated based on the level depth. Usually a decreasing function can be used. For example, the weight of a depth of 0 is 100, the weight of a depth of 1 is 10, and the weight of a depth of 2 is 1. This ensures that the outer rules have a higher priority. The system performs a weighted calculation on the selector information in the level identifier and the corresponding weight coefficient to obtain a weighted result. The weighted calculation can be a simple multiplication, such as the product of the weight coefficient and the selector specificity value. All weighted results are accumulated to generate the final selector expression. For example, for the nested rule ".container { .button {}}", a selector expression similar to ".container .button" will be generated, where the outer selector has a higher weight.

[0111] After generating the selector expression, the system obtains the effective scope information of the current processing context. The effective scope information contains a list of scopes available in the current execution environment, such as the scope identifier of the current component and the scope identifier of the parent component. The system matches the selector expression with the effective scope information to obtain a matching set. The specific implementation of the matching operation can be to check whether the scope identifier in the selector expression is included in the effective scope list. For example, if the selector expression contains the scope identifier "comp-5" and the effective scope list contains ["comp-5", "global"], the match is successful. The system determines whether the matching set is empty. If the matching set is not empty, it determines that the selector expression has passed verification.

[0112] Once the selector expression is validated, the system determines the starting position of the rule corresponding to the style declaration block. This starting position is typically the first character position of the style rule, or the first character position of the selector in a CSS text. The system inserts the generated selector expression before the starting position, resulting in the updated style rule. For example, if the original style rule is "{ color: red;}" and the generated selector expression is ".container .button", the inserted style rule becomes ".container .button { color: red;}".

[0113] To optimize subsequent processing performance, the system calculates the retrieval hash value of the selector expression. The retrieval hash value can use common hash algorithms, such as MD5, SHA-1, etc., to perform hash operations on the selector expression text. For example, the hash value of the selector expression ".container .button" is calculated to obtain a hash string such as "a1b2c3d4e5f6g7h8". The system writes this retrieval hash value and the insertion position information into the processing result cache. The insertion position information includes positioning information such as file path, line number, column number, etc., such as "{filePath: ' / styles / main.css', line: 15, column:0}". The processing result cache is used to record the historical insertion positions of the selector expression to facilitate subsequent incremental updates or undo operations.

[0114] Through this method, the system can effectively dynamically insert selector expressions during style processing, enabling nested parsing and scope control of style rules, improving the flexibility and efficiency of style processing. This is of great significance for processing complex CSS preprocessing languages ​​(such as SCSS and LESS) or component-based style systems.

[0115] In an optional embodiment, when the end marker of the style declaration block is detected, the level identifier is removed from the rule stack. If the length of the rule stack after the removal is 1, a target expression corresponding to the aforementioned selector expression is appended to the end of the style rule, including:

[0116] When the end tag of the style declaration block is detected, obtaining the top level identifier of the rule stack;

[0117] Removing the top level identifier of the stack from the rule stack, obtaining the remaining level identifiers in the rule stack, and counting the remaining level identifiers to obtain the rule stack length;

[0118] In response to the rule stack length being one, reading the selector expression from the processing result cache, performing a conversion and mapping operation on the selector expression and current context information to generate a target expression;

[0119] Acquire the end position information of the current style rule, combine the end position information with the length information of the target expression to form an additional position parameter; append the target expression to the end of the style rule based on the additional position parameter to obtain an updated style rule;

[0120] Performing a semantic mapping operation on the target expression and the aforementioned selector expression to determine whether the semantic mapping results are consistent, and confirming that the corresponding relationship verification has passed in response to the semantic mapping results being consistent; performing an integrity check on the updated style rule to determine the structural integrity of the updated style rule and the validity of the target expression;

[0121] In response to the integrity check passing, the updated style rule is written into the style rule output, completing the termination processing of the style declaration block.

[0122] In one style rule processing method, the system processes CSS style rules by dynamically identifying the end tag of a style declaration block and appending a target expression to the end of the style rule when the length of the rule stack meets a specific condition. When the parser detects the end tag "}" of the style declaration block, the processing flow is terminated. The system obtains the top-level identifier from the rule stack, which is usually pushed in when the start tag "{" of the style declaration block is encountered. The rule stack structure can be implemented as an array or a linked list, with each element storing identification information for the corresponding level, such as a selector expression and position information.

[0123] The system removes the top level identifier from the rule stack. This operation is accomplished by calling the stack's pop function. After removal, the system obtains and counts the remaining level identifiers in the rule stack to determine the current length of the rule stack. This counting method can be directly accessing the stack's length property or by iterating over the elements in the stack.

[0124] When the system detects that the rule stack length is 1, it indicates that it is currently processing the end of the top-level style rule and needs to perform a target expression append operation. The system reads the aforementioned selector expression from the processing result cache. The cache can be stored in a key-value structure, with the rule ID as the key and the selector expression as the value. For example, when processing the rule ".container.item { color: red;}", the system will store ".container.item" as the selector expression in the cache.

[0125] After reading a selector expression, the system performs a conversion and mapping operation on it and the current context information to generate a target expression. This context information includes the current style rule environment and the style application target. The conversion and mapping process involves selector parsing, attribute extraction, and expression reconstruction. For example, if the selector expression ".container .item" is a mobile device view, the system generates the target expression "@media screen and (max-width: 768px) {.container .item { ...}}".

[0126] The system obtains the end position of the current style rule by recording the position index of the "}" marker. This position information is combined with the length of the target expression to form the append position parameter. For example, if "}" is at position 100 in the character stream and the target expression is 50 characters long, the append position parameter is (100, 50). Based on this parameter, the system appends the target expression to the end of the style rule, resulting in the updated style rule.

[0127] For the style rule ".container .item { color: red;}", appending the target expression becomes ".container .item { color: red;} @media screen and (max-width: 768px) {.container .item { ...}}".

[0128] The system performs a semantic mapping operation on the target expression and the aforementioned selector expression to determine whether the semantic mapping results are consistent. The semantic mapping operation involves parsing the semantic structure of the two expressions and comparing their selector hierarchy, element type, attribute restrictions, and other information. For example, the core selector portions of ".container .item" and "@media screen and (max-width:768px) { .container .item { ...}}" are semantically identical, both referencing the ".item" element within ".container".

[0129] If the semantic mapping results are consistent, the correspondence verification is confirmed to have passed. The system also performs a integrity check on the updated style rules to determine the structural integrity of the rules and the validity of the target expressions. This integrity check includes verifying the syntactic correctness of the style rules, bracket matching, and selector validity. For example, it checks whether the appended rules contain complete start and end tags and whether the media query expressions are syntactically correct.

[0130] Once the integrity check passes, the system writes the updated style rules to the style rule output. This involves writing the rule string to the output buffer or file. After completing the termination processing of the style declaration block, the system continues processing subsequent style rules or ends processing of the entire style file.

[0131] In practical applications, consider a specific example: when processing the original style rule ".navigation {background-color: #f0f0f0;}", the system detects the "}" end tag and removes the corresponding level identifier from the rule stack, so the rule stack length becomes 1. The system reads the selector expression ".navigation" from the cache and generates the target expression " / * Navigation bar style, applicable to .navigation * / " through conversion mapping. The system appends this comment expression to the end of the original style rule to form ".navigation { background-color: #f0f0f0;} / * Navigation bar style, applicable to .navigation * / ". Semantic mapping verifies that the two expressions have the same meaning, integrity check confirms that the rule structure is complete, and finally the updated rule is written to the output.

[0132] This method is particularly suitable for scenarios such as automatically generating style comments, adding media query conditions, or achieving cross-device style compatibility, and can effectively improve the readability and maintainability of style rules.

[0133] In an optional embodiment, in response to the rule stack length being one, reading the selector expression from the processing result cache, performing a conversion mapping operation on the selector expression and current context information to generate a target expression, including:

[0134] Reading a retrieval hash value from a processing result cache, locating a storage location of the selector expression in the processing result cache based on the retrieval hash value, and reading the selector expression;

[0135] Obtaining context attribute identifiers in the current processing environment, extracting attribute values ​​corresponding to each of the context attribute identifiers, and forming a context information structure in the form of key-value pairs with the context attribute identifiers and the attribute values;

[0136] Scan the attribute values ​​in the context information structure, calculate the influence factor of each attribute value, and generate context features based on the influence factors; perform a matching operation on the aforementioned selector expression and the context information structure, identify matching points, extract associated features of the matching points, and generate an interactive feature set; identify semantic units in the aforementioned selector expression, extract feature parameters of the semantic units, and generate a selector feature set based on the feature parameters;

[0137] The selector feature set, the context feature set, and the interaction feature set are organized into a feature vector according to preset dimensions; based on the feature vector, the aforementioned selector expression and the context information structure are input into an interaction integration function to generate a target expression.

[0138] In one embodiment, when the rule stack length is one, the system reads the aforementioned selector expression from the processing result cache and performs a conversion mapping operation on it and the current context information to generate a target expression. The specific implementation is as follows:

[0139] The system reads the retrieval hash value from the result cache. This hash value is a unique identifier generated during the previous processing and is used to quickly locate the storage location of the aforementioned selector expression. For example, if the selector expression is "div[data-id='user-profile'] > span.username", its corresponding retrieval hash value is "a7f9b3d2e1c8". Based on this hash value, the system searches the hash index table in the result cache, locates the expression stored in block 1024 of the cache, and then reads the entire expression.

[0140] The system obtains context attribute identifiers from the current processing environment. These attribute identifiers include "page ID," "user level," "device type," and "screen resolution." The system extracts the actual value corresponding to each attribute identifier, for example, if the page ID is "shopping-cart," the user level is "premium," the device type is "mobile," and the screen resolution is "1080x2340." The system organizes these attribute identifiers and their corresponding attribute values ​​into a context information structure in the form of key-value pairs, such as {"pageId": "shopping-cart", "userLevel": "premium", "deviceType": "mobile","screenResolution": "1080x2340"}.

[0141] The system scans each attribute value in the context information structure and calculates the impact factor for each attribute value. The impact factor reflects the attribute value's importance to the selector expression conversion. The system processes each attribute value using pre-set impact factor calculation logic. For example, an impact factor of 0.8 for the "mobile" device type indicates that significant selector adjustments are required in a mobile environment; while an impact factor of 0.3 for the "premium" user level indicates that the user level has little impact on selector adjustments. Based on these impact factors, the system generates a context feature set that records the characteristics of each context factor and its influence weight.

[0142] The system matches the selector expression with the context information structure to identify matching points. For example, the system finds an association between "data-id='user-profile'" in the selector and the user level "premium" in the context, which constitutes a matching point. The system extracts the association features of this matching point, such as the association type of "user identity association" and the association strength of 0.75. The system performs a similar analysis on all matching points to generate a set of interaction features that describe the various interactions between the selector and the context.

[0143] The system identifies semantic units in the aforementioned selector expressions, such as "div", "data-id='user-profile'", ">", "span", "username", etc. The system extracts the characteristic parameters of each semantic unit. For example, the node type of "div" is "block-level element", and the characteristic parameters are {"elementType": "block", "nestingLevel": 0}; the attribute type of "data-id" is "custom data attribute", and the characteristic parameters are {"attributeType": "data", "identifierPurpose": "user"}. The system generates a selector feature set based on these characteristic parameters, which comprehensively describes the structure and semantic characteristics of the selector itself.

[0144] The system organizes the selector feature set, context feature set, and interaction feature set into a feature vector based on predefined dimensions. This feature vector contains all the information required for the selector transformation, arranged according to predefined dimensions. For example, the first 10 dimensions describe the selector features, the next 8 dimensions describe the context features, and the last 12 dimensions describe the interaction features.

[0145] Based on this feature vector, the system inputs the aforementioned selector expression and contextual information structure into the interactive integration function. This function is a decision tree or rule engine that performs a series of transformation operations based on the value of the feature vector. For example, if a mobile device is detected, the function will simplify complex CSS selectors or convert multi-layered nested selectors into direct selectors. In this example, because the user is on a mobile device and is a premium user, the interactive integration function converts the original selector "div[data-id='user-profile'] > span.username" into "[data-id='premium-user'].username", a simpler and more targeted selector, which serves as the final target expression.

[0146] This context-based selector expression conversion method can dynamically adjust the selector according to different execution environments, improving the adaptability and efficiency of the selector in various scenarios. It is particularly suitable for application scenarios that require a consistent user experience across platforms and devices.

[0147] The main application style isolation system based on the plug-in mode in the embodiment of the present invention includes:

[0148] The first unit is used to receive the package build command of the main application and call the style isolation script plug-in to create a temporary folder to store the processed files;

[0149] The second unit is used to scan the main application file structure to build a style file index table. The style file index table records the path, type and dependency relationship of the style files, groups and sorts the style files according to the dependency relationship, and generates a style file processing queue;

[0150] The third unit is used to initialize a rule stack for each file in the style file processing queue, wherein the rule stack is used to record the nested hierarchical relationship of the style declaration block;

[0151] The fourth unit is used to read the content of the style file line by line. When a comment line or a line with a target identifier is detected, the line is marked as ignored and stored in the processing result cache, retaining the original comment information;

[0152] The fifth unit is configured to, upon detecting a style declaration block start tag, push a level identifier into the rule stack, and if the rule stack is empty, proceed to the top-level style rule processing, dynamically insert a selector expression before the rule, and record the insertion position in the processing result cache;

[0153] The sixth unit is configured to, when detecting the end marker of the style declaration block, remove the level identifier from the rule stack, and if the length of the rule stack after the removal is 1, append a target expression corresponding to the selector expression at the end of the style rule;

[0154] The seventh unit is used to write the processed style file content into the corresponding file in the temporary folder, and the style file in the temporary folder completely replaces the original packaged style file to complete the isolation processing of the main application style.

[0155] According to a third aspect of an embodiment of the present invention, an electronic device is provided, including:

[0156] processor;

[0157] a memory for storing processor-executable instructions;

[0158] The processor is configured to call the instructions stored in the memory to execute the aforementioned method.

[0159] According to a fourth aspect of an embodiment of the present invention, a computer-readable storage medium is provided, on which computer program instructions are stored. When the computer program instructions are executed by a processor, the method described above is implemented.

[0160] The present invention may be a method, an apparatus, a system and / or a computer program product. The computer program product may include a computer-readable storage medium carrying computer-readable program instructions for executing various aspects of the present invention.

[0161] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention has been described in detail with reference to the above embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the above embodiments, or replace some or all of the technical features therein with equivalents. However, these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present invention.

Claims

1. The main application style isolation method based on the plug-in mode is characterized by: include: Receive the package build command of the main application and call the style isolation script plug-in to create a temporary folder to store the processed files; Scan the main application file structure to build a style file index table, which records the path, type and dependency relationship of the style files, groups and sorts the style files according to the dependency relationship, and generates a style file processing queue; Initialize a rule stack for each file in the style file processing queue, wherein the rule stack is used to record the nested hierarchical relationship of the style declaration block; Read the style file content line by line. When a comment line or a line with Standard When a row is identified, it is marked as ignored and stored in the processing result cache, retaining the original annotation information; When a style declaration block start tag is detected, a level identifier is pushed into the rule stack. If the rule stack is empty, the top-level style rule processing is started, a selector expression is dynamically inserted before the rule, and the insertion position is recorded in the processing result cache. When the end marker of the style declaration block is detected, the level identifier is removed from the rule stack. If the length of the rule stack after the removal is 1, a target expression corresponding to the aforementioned selector expression is appended to the end of the style rule; The processed style file content is written into the corresponding file in the temporary folder. The style file in the temporary folder replaces the original packaged style file as a whole, completing the isolation processing of the main application style.

2. The method according to claim 1, characterized in that Scan the main application file structure to build a dependency graph, group and sort the style files according to the dependency graph, and generate a style file processing queue, including: Counting the number of times the style file is directly referenced by other files to obtain a reference count value, dividing the reference count value by the total number of style files to obtain a reference weight, and calculating the temporal correlation between the reference weight and the file modification time to obtain a dependency weight; Generate a dependency graph based on the dependency weights of the style files. Calculate a dependency strength value by multiplying the product of the style file's dependency weight and its reference weight by the square root of the sum of the squares of the dependency weights. Determine the style file's dependency transitive strength by multiplying the dependency strength value with the attenuation coefficient and transitive probability of each layer's dependency. Calculate the similarity values ​​between files and generate a similarity matrix. Based on the similarity matrix and the dependency transfer strength, divide the style files into multiple groups. Determine the optimal grouping scheme by calculating the sum of the squares of the distances between the style files in the group and the group center. The dependency priority, complexity score and timing impact in the style file grouping results are multiplied by their corresponding weight coefficients and summed to obtain a comprehensive priority score. The priority value of the style file is dynamically updated using the product of the comprehensive priority score and the preset learning rate; based on the priority value of the style file, a style file processing queue is generated.

3. The method according to claim 1, characterized in that A rule stack is initialized for each file in the style file processing queue. The rule stack is used to record the nested hierarchical relationship of the style declaration blocks, including: For each style file in the style file processing queue, a rule stack using a last-in-first-out data structure is constructed, wherein each stack frame in the rule stack includes a level depth, selector information, and a scope identifier, wherein the level depth represents the nesting depth of the style rules; Initializing the operating environment of the rule stack, setting the initial capacity and expansion factor, and establishing a selector mapping table, wherein the selector mapping table records the use frequency and complexity of the selector; Detecting the start tag of a style rule, calculating a new level depth based on the current level depth and the selector complexity, pushing a stack frame containing the new level depth onto the rule stack, and updating the usage frequency of the corresponding selector in the selector mapping table; When the end tag of the style rule is detected, the top element of the rule stack is obtained, the product of the feature weight and the matching degree is calculated as a validity verification value, and whether the current end tag matches the top element of the stack is determined according to the validity verification value; Based on the timestamp, random factor and application prefix, a scope identifier is generated through a hash function, and the scope identifier is injected into the top-level selector to form an isolation expression; a selector specificity value is obtained through a weighted calculation of the number of ID selectors, the number of class selectors and the number of element selectors, and the selector priority is determined based on the specificity value. The processed selector information is updated to the stack frame corresponding to the rule stack; When the style rule processing is completed, the stack frame is popped from the rule stack, and the processed style rule is written into the style file.

4. The method according to claim 1, wherein When a style declaration block start tag is detected, a level identifier is pushed into the rule stack. If the rule stack is empty, the top-level style rule processing is started. A selector expression is dynamically inserted before the rule, and the insertion position is recorded in the processing result cache, including: When a style declaration block start tag is detected, the level depth, selector information, and scope identifier of the current style declaration block are obtained to generate a level identifier; the level identifier is pushed into the rule stack, and the stack depth value of the rule stack is read. When the stack depth value is zero, the current style rule is marked as a top-level style rule; Traversing each level identifier in the rule stack, extracting a depth coefficient corresponding to each level identifier, using the depth coefficient as a weight coefficient, performing a weighted calculation on each level identifier and the corresponding weight coefficient to obtain a weighted result, and accumulating the weighted results to generate a selector expression; Obtaining valid scope information of the current processing context, performing a matching operation on the selector expression and the valid scope information to obtain a matching set, determining whether the matching set is empty, and determining that the selector expression has passed verification when the matching set is not empty; In response to the selector expression passing verification, determining the starting position of the rule corresponding to the style declaration block, inserting the selector expression before the starting position, and obtaining an updated style rule; A retrieval hash value of the selector expression is calculated, and the retrieval hash value and insertion position information are written into a processing result cache, where the processing result cache is used to record a historical insertion position of the selector expression.

5. The method according to claim 1, wherein When the end tag of the style declaration block is detected, the level identifier is removed from the rule stack. If the length of the rule stack after the removal is 1, a target expression corresponding to the aforementioned selector expression is appended to the end of the style rule, including: When the end tag of the style declaration block is detected, obtaining the top level identifier of the rule stack; Removing the top level identifier of the stack from the rule stack, obtaining the remaining level identifiers in the rule stack, and counting the remaining level identifiers to obtain the rule stack length; In response to the rule stack length being one, reading the selector expression from the processing result cache, performing a conversion and mapping operation on the selector expression and current context information to generate a target expression; Acquire the end position information of the current style rule, combine the end position information with the length information of the target expression to form an additional position parameter; append the target expression to the end of the style rule based on the additional position parameter to obtain an updated style rule; Performing a semantic mapping operation on the target expression and the aforementioned selector expression to determine whether the semantic mapping results are consistent, and confirming that the corresponding relationship verification has passed in response to the semantic mapping results being consistent; performing an integrity check on the updated style rule to determine the structural integrity of the updated style rule and the validity of the target expression; In response to the integrity check passing, the updated style rule is written into the style rule output, completing the termination processing of the style declaration block.

6. The method according to claim 5, characterized in that In response to the rule stack length being one, reading the selector expression from the processing result cache, performing a conversion and mapping operation on the selector expression and the current context information to generate a target expression, including: Reading a retrieval hash value from a processing result cache, locating a storage location of the selector expression in the processing result cache based on the retrieval hash value, and reading the selector expression; Obtaining context attribute identifiers in the current processing environment, extracting attribute values ​​corresponding to each of the context attribute identifiers, and forming a context information structure in the form of key-value pairs with the context attribute identifiers and the attribute values; Scan the attribute values ​​in the context information structure, calculate the influence factor of each attribute value, and generate context features based on the influence factors; perform a matching operation on the aforementioned selector expression and the context information structure, identify matching points, extract associated features of the matching points, and generate an interactive feature set; identify semantic units in the aforementioned selector expression, extract feature parameters of the semantic units, and generate a selector feature set based on the feature parameters; The selector feature set, the context feature set, and the interaction feature set are organized into a feature vector according to preset dimensions; based on the feature vector, the aforementioned selector expression and the context information structure are input into an interaction integration function to generate a target expression.

7. A main application style isolation system based on a plug-in mode, used to implement the method according to any one of claims 1 to 6, characterized in that: include: The first unit is used to receive the package build command of the main application and call the style isolation script plug-in to create a temporary folder to store the processed files; The second unit is used to scan the main application file structure to build a style file index table. The style file index table records the path, type and dependency relationship of the style files, groups and sorts the style files according to the dependency relationship, and generates a style file processing queue; The third unit is used to initialize a rule stack for each file in the style file processing queue, wherein the rule stack is used to record the nested hierarchical relationship of the style declaration block; The fourth unit is used to read the content of the style file line by line. When a comment line or a line with a target identifier is detected, the line is marked as ignored and stored in the processing result cache, retaining the original comment information; The fifth unit is configured to, upon detecting a style declaration block start tag, push a level identifier into the rule stack, and if the rule stack is empty, proceed to the top-level style rule processing, dynamically insert a selector expression before the rule, and record the insertion position in the processing result cache; The sixth unit is configured to, when detecting the end marker of the style declaration block, remove the level identifier from the rule stack, and if the length of the rule stack after the removal is 1, append a target expression corresponding to the selector expression at the end of the style rule; The seventh unit is used to write the processed style file content into the corresponding file in the temporary folder, and the style file in the temporary folder completely replaces the original packaged style file to complete the isolation processing of the main application style.

8. An electronic device, characterized in that: include: processor; a memory for storing processor-executable instructions; The processor is configured to call the instructions stored in the memory to execute the method according to any one of claims 1 to 6.

9. A computer-readable storage medium having computer program instructions stored thereon, characterized in that: When the computer program instructions are executed by a processor, the method according to any one of claims 1 to 6 is implemented.

Images