Plug-in mode-based main application style isolation method and system

Abstract

The application provides a main application style isolation method and system based on a plug-in mode, relates to the technical field of micro front-end frameworks, and comprises the following steps: creating a temporary folder to store processing files, scanning and constructing a style index table, initializing a rule stack to record nesting levels, processing style files by lines, dynamically inserting a selector expression when a style declaration block is detected, and finally replacing the original packaged file with the processed style file. The application can effectively prevent mutual pollution of main application styles and micro application styles, improve the accuracy and automation degree of style processing, and reduce maintenance costs.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of micro-frontend framework, and particularly relates to a main application style isolation method and system based on a plug-in mode. BACKGROUND

[0002] With the rise of micro-frontend architecture, Qiankun, as a mainstream micro-frontend framework, is widely used. It provides resource isolation and independent deployment capabilities between applications. In the micro-frontend architecture, the main application and the sub-application coexist in the same page, and their respective styles may affect each other, leading to the problem of style pollution. The main application, as the entry and framework carrier of the entire micro-frontend system, its style rules often have a global scope, which is easy to have an unpredictable impact on the sub-application.

[0003] Currently, the Qiankun framework mainly focuses on the style isolation of sub-applications, and achieves the style isolation between sub-applications through technologies such as Shadow DOM or CSS prefix, but it lacks support for main application style isolation. In actual projects, developers usually manually add specific prefixes or style scopes to avoid the impact of the main application style on the sub-application, which is a lot of work and prone to errors. At the same time, existing automatic style isolation tools are mostly for single frameworks such as Vue and React, and lack a unified solution for main application style isolation in cross-framework micro-frontend scenarios. SUMMARY

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

[0005] In a first aspect, the embodiment of the present application provides a main application style isolation method based on a plug-in mode, which includes:

[0006] Receiving a packaging and building command of the main application and calling a style isolation script plug-in, creating a temporary folder to store processing files;

[0007] Scanning the file structure of the main application to build a style file index table, the style file index table records the path, type and dependency relationship of the style file, and the style file is grouped and sorted according to the dependency relationship to generate a style file processing queue;

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

[0009] Reading the style file content line by line, when a comment line or a line with a target identifier is detected, marking the line as ignored and storing it in the processing result cache, and preserving 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, a top-level style rule processing is entered, a selector expression is dynamically inserted before the rule, and the insertion position is recorded in a processing result cache;

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

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

[0013] A dependency relationship graph is constructed by scanning the file structure of the main application, the style files are grouped and sorted according to the dependency relationship graph, and a style file processing queue is generated, including:

[0014] The reference count value is obtained by counting the number of times that the style file is directly referenced by other files, the reference weight is obtained by dividing the reference count value by the total number of style files, the time sequence correlation degree of the reference weight and the file modification time is calculated, and the dependency weight is obtained;

[0015] According to the dependency weight of the style file, a dependency relationship graph is generated, a dependency strength value is calculated by dividing the sum of the product of the dependency weight and the reference weight by the square root of the square sum of the dependency weight, and the dependency transmission strength of the style file is determined by using the product of the dependency strength value, the attenuation coefficient of each layer of dependency and the transmission probability;

[0016] The similarity value between files is calculated and a similarity matrix is generated, based on the similarity matrix and the dependency transmission strength, the style files are divided into multiple groups, and the optimal grouping scheme is determined by calculating the square sum of the distance between the style files in the group and the center point of the group;

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

[0018] For each file in the style file processing queue, a rule stack is initialized, the rule stack is used to record the nested level relationship of the style declaration block, 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, each stack frame in the rule stack containing a level depth, selector information, and a scope identifier, wherein the level depth represents the nesting depth of a style rule;

[0020] An execution environment of the rule stack is initialized, an initial capacity and an expansion factor are set, a selector mapping table is established, and the use frequency and complexity of a selector are recorded in the selector mapping table;

[0021] A start marker of a style rule is detected, a new level depth is calculated based on the current level depth and the selector complexity, a stack frame containing the new level depth is pushed into the rule stack, and the use frequency of the corresponding selector in the selector mapping table is updated;

[0022] When an end marker of a 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 an effectiveness verification value, and it is judged whether the current end marker and the top element match according to the effectiveness verification value;

[0023] Based on the timestamp, the random factor, and the application prefix, a scope identifier is generated by a hash function, the scope identifier is injected into the top-level selector to form an isolated expression, a selector specificity value is calculated by weighting the number of ID selectors, the number of class selectors, and the number of element selectors, the selector priority is determined according to the specificity value, and the processed selector information is updated to the corresponding stack frame of 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 marker is detected, the level identifier is pushed into the rule stack, and if the rule stack is empty, the top-level style rule processing is entered, the 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 marker is detected, the level depth, selector information, and scope identifier of the current style declaration block are obtained, and a level identifier is generated; 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] Each level identifier in the rule stack is traversed, the depth coefficient corresponding to each level identifier is extracted, the depth coefficient is used as a weight coefficient, each level identifier and the corresponding weight coefficient are weighted to obtain a weighted result, and the weighted results are accumulated to generate a selector expression;

[0028] acquire effective scope information of a current processing context, match the selector expression with the effective scope information to obtain a matching set, determine whether the matching set is empty, and when the matching set is not empty, determine that the selector expression passes verification;

[0029] In response to the selector expression passing verification, determine a starting position of a rule corresponding to the style declaration block, insert the selector expression before the starting position to obtain an updated style rule;

[0030] Calculate a retrieval hash value of the selector expression, and write the retrieval hash value and insertion position information into a processing result cache, which is used to record historical insertion positions of the selector expression.

[0031] When a style declaration block end marker is detected, remove the level identifier from the rule stack, and if the length of the rule stack after removal is one, append a target expression corresponding to the aforementioned selector expression to the end of the style rule, including:

[0032] When the style declaration block end marker is detected, acquire a top level identifier of the rule stack;

[0033] Remove the top level identifier from the rule stack, acquire remaining level identifiers in the rule stack, and count the remaining level identifiers to obtain the length of the rule stack;

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

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

[0036] Perform semantic mapping operation on the target expression and the aforementioned selector expression, determine whether the semantic mapping result is consistent, and in response to the semantic mapping result being consistent, confirm that the corresponding relationship passes verification; perform integrity check on the updated style rule, and determine the structural integrity of the updated style rule and the validity of the target expression;

[0037] In response to the integrity check passing, write the updated style rule into a style rule output to complete termination processing of the style declaration block.

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

[0039] A search hash value is read from the processing result cache, and based on the search hash value, a storage location of the previous selector expression in the processing result cache is located, and the previous selector expression is read;

[0040] Context attribute identifiers in a current processing environment are obtained, attribute values corresponding to each of the context attribute identifiers are extracted, and the context attribute identifiers and the attribute values are formed into a context information structure in the form of a key-value pair;

[0041] The attribute values in the context information structure are scanned, an influence factor of each attribute value is calculated, and a context feature is generated according to the influence factor; the previous selector expression and the context information structure are matched, a matching point is identified, an associated feature of the matching point is extracted, and an interaction feature set is generated; semantic units in the previous selector expression are identified, feature parameters of the semantic units are extracted, and a selector feature set is generated according to 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 a preset dimension; based on the feature vector, the previous selector expression and the context information structure are input into an interaction integration function to generate a target expression.

[0043] In a second aspect of the embodiment of the application, a main application style isolation system based on a plug-in mode is provided, including:

[0044] A first unit is configured to receive a packaging and building command of a main application and call a style isolation script plug-in, and create a temporary folder to store processing files;

[0045] A second unit is configured to scan a main application file structure to build a style file index table, the style file index table records paths, types, and dependency relationships of style files, the style files are grouped and sorted according to the dependency relationships, and a style file processing queue is generated;

[0046] A third unit is configured to initialize a rule stack for each file in the style file processing queue, the rule stack is used to record nested hierarchical relationships of style declaration blocks;

[0047] A fourth unit is configured to read style file content line by line, when a comment line or a line with a target identifier is detected, the line is marked as an ignored state and stored in a processing result cache, and original comment information is reserved;

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

[0049] A sixth unit is configured to, when a style declaration block end tag is detected, remove the level identifier from the rule stack, and if the length of the rule stack is 1 after the removal, append a target expression corresponding to the aforementioned selector expression at the end of the style rule.

[0050] A seventh unit is configured to write the processed style file content to a corresponding file in the temporary folder, replace the original packaged style file with the style file in the temporary folder as a whole, and complete the isolation processing of the main application style.

[0051] A third aspect of the embodiment of the application,

[0052] An electronic device is provided, comprising:

[0053] A processor;

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

[0055] The processor is configured to invoke the instructions stored in the memory to perform the method described above.

[0056] A fourth aspect of the embodiment of the application,

[0057] A computer-readable storage medium is provided, which stores computer program instructions, and the computer program instructions are executed by a processor to implement the method described above.

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

[0059] Through the integration mode of the style isolation script plug-in, automatic isolation processing of the main application style is realized, and manual modification of the style code by the developer is not required, thereby greatly reducing the processing cost of style conflicts in the micro-frontend framework application and improving the development efficiency.

[0060] The rule stack structure and the dynamic selector insertion technology are adopted to accurately identify and process the style nesting level relationship, thereby ensuring the accuracy and integrity of the style isolation and effectively solving the rendering abnormality problem caused by inconsistent style selector weights in the traditional method.

[0061] By constructing a style file index table and grouping and sorting according to the dependency relationship, ordered processing of a complex style file structure is realized, while the original comment information and specific identifier content are retained, the traceability and maintainability of the style processing are ensured, and the overall stability of the micro-frontend application is improved. BRIEF DESCRIPTION OF DRAWINGS

[0062] Figure 1 The flowchart of the main application style isolation method based on the plug-in mode of the embodiment of the present application is shown in

[0063] Figure 2 The architecture diagram of the style file dependency analysis and processing queue is shown in DETAILED DESCRIPTION

[0064] To make the objectives, technical solutions, and advantages of the embodiments of the present application clearer, the technical solutions in the embodiments of the present application will be described below in connection with the drawings in the embodiments of the present application. Obviously, the described embodiments are only a part but not all of the embodiments of the present application. Based on the embodiments in the present application, all other embodiments obtained by a person of ordinary skill in the art without creative work fall within the protection scope of the present application.

[0065] The technical solutions of the present application will be described in detail below with specific embodiments. The following specific embodiments can be combined with each other, and the same or similar concepts or processes can not be described in some embodiments.

[0066] Figure 1 The flowchart of the main application style isolation method based on the plug-in mode of the embodiment of the present application is shown in Figure 1 The method comprises the following steps:

[0067] Receiving a packaging and building command of a main application and calling a style isolation script plug-in to create a temporary folder to store processing files;

[0068] Scanning a file structure of the main application to build a style file index table, the style file index table recording paths, types, and dependency relationships of style files, grouping and sorting the style files according to the dependency relationships to generate a style file processing queue;

[0069] Initializing a rule stack for each file in the style file processing queue, the rule stack being used to record nested hierarchical relationships of style declaration blocks;

[0070] Reading style file contents line by line, marking a line as an ignored state and storing the line in a processing result cache when detecting a comment line or a line with a target identifier, and reserving original comment information;

[0071] When detecting a style declaration block start marker, pushing a hierarchical identifier into the rule stack, entering top-level style rule processing if the rule stack is empty, dynamically inserting a selector expression in front of the rule, and recording an insertion position in the processing result cache;

[0072] When a style declaration block end marker is detected, remove the level identifier from the rule stack, if the rule stack length is 1 after removal, append the target expression corresponding to the aforementioned selector expression at the end of the style rule;

[0073] Write the processed style file content into the corresponding file in the temporary folder, replace the original packaged style file as a whole with the style file in the temporary folder, and complete the isolation processing of the main application style.

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

[0075] Calculate the reference count value of the style file by counting the number of times the style file is directly referenced by other files, divide the reference count value by the total number of style files to obtain a reference weight, calculate the time sequence correlation degree of the reference weight and the file modification time, and obtain a dependency weight;

[0076] According to the dependency weight of the style file, a dependency graph is generated, and a dependency strength value is calculated by dividing the sum of the product of the dependency weight and the reference weight by the square root of the square sum of the dependency weight; the dependency transmission strength of the style file is determined by using the product of the dependency strength value, the attenuation coefficient of each layer of dependency, and the transmission probability;

[0077] Calculate the similarity value between files and generate a similarity matrix, based on the similarity matrix and the dependency transmission strength, divide the style files into multiple groups, and determine the optimal grouping scheme by calculating the square sum of the distance between the style files in the group and the center point of the group;

[0078] Multiply the dependency priority, complexity score and time sequence influence degree in the style file grouping result by their corresponding weight coefficients and sum them up to obtain a comprehensive priority score, and use the product of the comprehensive priority score and a preset learning rate to dynamically update the priority value of the style file; based on the priority value of the style file, generate a style file processing queue.

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

[0080] The system identifies all style files and their reference relationships by scanning the source code file structure of the main application. This scanning can be achieved by parsing import, require, or link statements in the application code. For example, in a web application, there are multiple CSS files, among which common.css is referenced by header.css and footer.css, and these two files are referenced by different component files respectively. The system records these reference relationships and constructs an initial dependency graph.

[0081] When counting the number of times a style file is referenced, the system calculates the reference count value of each style file directly referenced by other files. 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 considers the modification time of the file and calculates the time sequence correlation degree of the reference weight and the modification time. In the process of time sequence correlation degree calculation, the system analyzes the correlation between the modification frequency and the reference change of the style file in the last 30 days, and obtains a correlation coefficient between 0 and 1. If a style file is frequently modified and heavily referenced, its dependency weight will be higher. For example, if the reference weight of theme.css is 0.15, and the time sequence correlation degree of its modification frequency and reference change is 0.8, then its dependency weight is 0.12.

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

[0083] The similarity between files is calculated based on the content features of the style files. The system extracts features such as selectors, properties, and values from the style files to construct feature vectors. By calculating the cosine distance between the feature vectors of two files, a similarity value is obtained, and a similarity matrix is generated. For example, if two style files both contain a large number of definitions related to table styles, their similarity will be relatively high, reaching 0.75 or higher. Based on the similarity matrix and the dependency transmission 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 squared distances between the style files in each group and the center point of the group, and selects the scheme with the smallest value. In practical applications, the number of groups is usually set according to the complexity of the project, typically between 3 and 8 groups.

[0084] For each group of style files, the system calculates its comprehensive priority score. The dependency priority is calculated, which reflects the weight of the file in the dependency graph, with files higher in the dependency tree having higher priority. The complexity score is calculated based on factors such as file size, selector complexity, and nesting level. The timing influence degree is calculated, reflecting the degree of influence of recent modifications on the system. The system multiplies these three indicators by their corresponding weight coefficients and sums them up to obtain the comprehensive priority score. For example, if a style file has a dependency priority of 0.8, a weight of 0.5, a complexity score of 0.6, and a weight of 0.3, and a timing influence degree 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. By multiplying the comprehensive priority score by the preset learning rate, the position of the style file in the processing queue is adjusted. The learning rate is generally set between 0.05 and 0.2 and is automatically adjusted according to the system's running situation. For example, if the current priority of a file is 0.7, the comprehensive priority score is 0.8, and the learning rate is 0.1, then the updated priority is 0.71.

[0086] The system generates a processing queue for style files based on the updated priority values. In the processing queue, style files with higher priority are processed first, ensuring that critical style file modifications are reflected in the application in a timely manner, improving development efficiency and user experience. For example, in a large application containing 120 style files, the processing time can be reduced from 15 minutes to 4 minutes using this method, and core style changes can be implemented within 1 minute.

[0087] In an optional implementation, a rule stack is initialized for each file in the style file processing queue, which is used to record the nesting level relationship of 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, each stack frame in the rule stack containing a hierarchical depth, selector information, and a scope identifier, wherein the hierarchical depth represents the nesting depth of the style rule;

[0089] An execution environment of the rule stack is initialized, an initial capacity and an expansion factor are set, a selector mapping table is established, and the use frequency and complexity of the selector are recorded in the selector mapping table;

[0090] The start tag of the style rule is detected, the new hierarchical depth is calculated based on the current hierarchical depth and the selector complexity, the stack frame containing the new hierarchical depth is pushed into the rule stack, and the use frequency of the corresponding selector in the selector mapping table is updated;

[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 an effectiveness verification value, and it is judged whether the current end tag and the top element match according to the effectiveness verification value;

[0092] Based on the timestamp, random factor and application prefix, a scope identifier is generated by a hash function, and the scope identifier is injected into the top-level selector to form an isolated expression; the selector specificity value is calculated by weighting the number of ID selectors, the number of class selectors and the number of element selectors, and the selector priority is determined according to the specificity value, and the processed selector information is updated to the corresponding stack frame of 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] For each file in the style file processing queue, the rule stack is initialized, which can be implemented by the following techniques. 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.css,.scss,.less, sorts them by modification timestamp, and stores them in the processing queue. For each style file in the queue, the system will construct a rule stack using a last-in-first-out data structure. Each stack frame of this rule stack contains three key attributes: hierarchical depth (depth), which represents the depth level of the current style rule in the entire nested structure; selector information (selectorInfo), which contains selector text, type and complexity; and scope identifier (scopeId), which is used to realize style isolation.

[0095] The running environment initialization of the rule stack includes memory allocation and data structure preparation. The system allocates an initial stack space of 16 to the rule stack by default and sets the expansion factor to 1.5, that is, when the stack space usage rate exceeds 75%, it is automatically expanded to 1.5 times the original capacity. At the same time, the system establishes a selector mapping table, which is implemented by a hash table, with an initial bucket number of 32, used to record the usage frequency and complexity of the selector. The complexity is calculated by the number of elements, the number of pseudo-classes, and the number of attribute selectors contained in the selector. For example, the complexity of the selector "div.container > p:first-child" is 4, which contains 2 element selectors, 1 class selector, and 1 pseudo-class selector.

[0096] When the system detects the start marker of the style rule (such as "{"), it calculates the new level depth according to the current context. The formula for calculating the new level depth is: the 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, then 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, the current selector information, and the empty scope identifier, and pushes it into the rule stack. At the same time, the usage frequency of the corresponding selector in the selector mapping table is updated. 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 marker of the style rule (such as "}") is detected, the system will get the top element of the rule stack and perform 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 level depth of the stack frame, calculated as 256 minus the level depth multiplied by 16; the matching degree is obtained by comparing the proximity of the end marker position and the expected position, ranging from 0 to 1. If the validity verification value is greater than the preset threshold 128, it is determined that the matching is successful. For example, the level depth of the top element is 2, the feature weight is 256-2x16=224, the matching degree is 0.95, and the product is 224x0.95=212.8, which is greater than 128, and the verification is passed.

[0098] In the process of processing the style rules, the system needs to generate a scope identifier and inject it into the selector. The scope identifier generation adopts a hash function, and the input includes the current timestamp (accurate to milliseconds), a random factor of 0 to 9999, and a fixed application prefix "app". For example, the timestamp is 1625142589364, the random factor is 7831, and the application prefix is "app". After calculation by the MD5 hash algorithm, the first 8 bits are obtained as the scope identifier "a7f9b321". The system injects this identifier into the top-level selector to form an isolated expression. For example, if the original selector is ".container", after injection, it becomes ".container[data-v-a7f9b321]", achieving style isolation.

[0099] The calculation of the selector specificity value is 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, and the specificity value is 100 x 1 + 10 x (1 + 1) + 1 x 1 = 121. The system determines the selector priority according to the specificity value, and the higher the specificity value, the higher the priority. After calculation, the system updates the processed selector information to the stack frame corresponding to the rule stack.

[0100] When the style rule processing is completed, the system pops the corresponding stack frame from the rule stack and writes the processed style rule to the output buffer. When the output buffer reaches the preset size (default 4KB) or all rules are processed, the system writes the buffer content to the disk to generate the processed style file. The processed style file retains the original style declaration content, but the selector has been injected with a scope identifier, achieving style isolation. The entire processing process accurately tracks the nesting level relationship of the style declaration block through the rule stack, ensuring correct parsing and conversion of the style rules.

[0101] In an optional implementation, when a style declaration block start marker is detected, a level identifier is pushed into the rule stack, and if the rule stack is empty, the top-level style rule processing is entered, 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 marker 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 of the level identifiers in the rule stack, extracting a depth coefficient corresponding to each of the level identifiers, taking the depth coefficient as a weight coefficient, performing weighted calculation on each of the level identifiers and the corresponding weight coefficient to obtain a weighted result, and accumulating the weighted results to generate a selector expression;

[0104] obtaining effective scope information of a current processing context, performing matching operation on the selector expression and the effective scope information to obtain a matching set, and determining whether the matching set is empty, when the matching set is not empty, determining that the selector expression is verified;

[0105] in response to the selector expression being verified, determining a starting position of a rule corresponding to the style declaration block, inserting the selector expression before the starting position to obtain an updated style rule;

[0106] calculating a search hash value of the selector expression, and writing the search hash value and insertion position information into a processing result cache, the processing result cache being used to record historical insertion positions of the selector expression.

[0107] The application discloses a method for processing a style rule by dynamically inserting a selector expression.

[0108] In actual application, when the system detects a style declaration block starting mark (such as "{" in CSS), the system obtains the level depth, selector information and scope identifier of the current style declaration block. The level depth can be understood as the number of nested layers of the style rule, for example, in nested CSS, depth 0 represents a top-level rule, depth 1 represents a first-layer nested rule, and so on. The selector information includes the selector text of the style rule, such as "div", ".className" and the like. The scope identifier is used to distinguish different style scopes, such as component scope, global scope and the like. The system combines the three pieces of information to generate a level identifier, for example, it can be constructed into a data structure such as "{depth: 2, selector: '.button', scopeId: 'comp-5'}".

[0109] The system then pushes this level identifier into the rule stack. The rule stack is a last-in-first-out data structure that maintains the hierarchy of style rules currently being processed. 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 there is no other rule 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 the "{" is detected, the stack is empty, and the depth is 0, which is marked as a top-level style rule.

[0110] Next, the system iterates through each level identifier in the rule stack and extracts the depth coefficient corresponding to each level identifier. The depth coefficient is a weight value calculated based on the level depth. A decreasing function can be used, for example, the weight for depth 0 is 100, the weight for depth 1 is 10, and the weight for depth 2 is 1, which ensures that outer rules have higher priority. The system performs weighted calculation on the selector information in the level identifier and the corresponding weight coefficient to obtain the weighted result. The weighted calculation can be 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" is 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 includes the list of available scopes in the current execution environment, such as the scope identifier of the current component, the scope identifier of the parent component, etc. The system performs matching operations on the selector expression and the effective scope information to obtain the 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 list of effective scopes. For example, if the selector expression contains the scope identifier "comp-5" and the list of effective scopes contains ["comp-5", "global"], the matching is successful. The system determines whether the matching set is empty, and when the matching set is not empty, it determines that the selector expression verification is passed.

[0112] When the selector expression is verified, the system determines the starting position of the style declaration block corresponding to the rule. The starting position is usually the starting character position of the style rule, which can be the first character position of the selector in the CSS text. The system inserts the generated selector expression before the starting position to obtain an updated style rule. For example, the original style rule is "{ color: red;}", the generated selector expression is ".container.button", and the inserted style rule becomes ".container.button { color: red;}".

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

[0114] Through the above method, the system can effectively insert the selector expression dynamically in the style processing process, realize the nested parsing and scope control of the style rule, and improve the flexibility and efficiency of the style processing. This is of great significance for processing complex CSS preprocessor languages (such as SCSS, LESS) or componentized style systems.

[0115] In an optional implementation, when the end marker of the style declaration block is detected, the hierarchical identifier is removed from the rule stack, and if the length of the rule stack after removal is 1, the target expression corresponding to the aforementioned selector expression is appended to the end of the style rule, including:

[0116] When the end marker of the style declaration block is detected, the top hierarchical identifier of the rule stack is obtained;

[0117] The top hierarchical identifier is removed from the rule stack, the remaining hierarchical identifiers in the rule stack are obtained, and the length of the rule stack is obtained by counting the remaining hierarchical identifiers;

[0118] In response to the length of the rule stack being one, the aforementioned selector expression is read from the processing result cache, and the aforementioned selector expression is converted and mapped with the current context information to generate a target expression;

[0119] obtaining end position information of the current style rule, combining the end position information with length information of the target expression to form an appending position parameter, and appending the target expression to the end of the style rule based on the appending position parameter to obtain an updated style rule;

[0120] performing semantic mapping operation on the target expression and the aforementioned selector expression, judging whether the semantic mapping result is consistent, and confirming that the corresponding relationship verification is passed in response to the semantic mapping result being consistent, and performing integrity check on the updated style rule to judge the structural integrity of the updated style rule and the validity of the target expression;

[0121] in response to the integrity check being passed, writing the updated style rule into a style rule output to complete the termination processing of the style declaration block.

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

[0123] The system removes the top-level identifier from the rule stack, which can be achieved by calling the pop function of the stack. After removal, the system obtains the remaining level identifiers in the rule stack and counts them to obtain the current length of the rule stack. The counting method can be directly accessing the length attribute of the stack or counting by traversing the elements in the stack.

[0124] When the system detects that the length of the rule stack is 1, it indicates that the end position of the top-level style rule is being processed, and the target expression appending operation needs to be performed at this time. The system reads the aforementioned selector expression from the processing result cache, which can be stored in a key-value pair 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 stores ".container.item" as the selector expression in the cache.

[0125] After reading the selector expression, the system performs a conversion mapping operation on it with the current context information to generate a target expression. The context information includes the current processing style rule environment, style application target, etc. The conversion mapping process involves selector parsing, attribute extraction, and expression reconstruction. Taking the selector expression ".container.item" as an example, if the current context 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 information of the current style rule, which can be achieved by recording the position index of the "}" mark. Combining this position information with the length information of the target expression forms an append position parameter. For example, if "}" is located at the 100th position of the character stream, and the target expression length is 50 characters, the append position parameter is (100, 50). Based on this parameter, the system appends the target expression to the end of the style rule to obtain the updated style rule.

[0127] For the style rule ".container.item { color: red;}", after appending the target expression, it 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 result is consistent. The semantic mapping operation includes parsing the semantic structures of the two expressions and comparing their selector levels, element types, and attribute restrictions, etc. For example, the core selector part of ".container.item" and "@media screen and (max-width: 768px) {.container.item {...}}" is semantically consistent, both pointing to the ".item" element within ".container".

[0129] If the semantic mapping result is consistent, it is confirmed that the corresponding relationship verification is passed. The system also needs to perform integrity checking on the updated style rule to determine the structural integrity of the rule and the effectiveness of the target expression. The integrity checking includes verifying the grammatical correctness of the style rule, the bracket matching situation, the selector effectiveness, etc. For example, checking whether the appended rule contains complete start and end marks, and checking whether the media query expression is grammatically correct.

[0130] When the integrity check passes, the system writes the updated style rule to the style rule output. This involves writing the rule string to an output buffer or file. After the termination of the style declaration block is processed, the system proceeds to process the following style rule or ends the 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 marker, removes the corresponding level identifier from the rule stack, and the rule stack length becomes 1. The system reads the selector expression ".navigation" from the cache, generates the target expression " / * Navigation bar style, applicable to.navigation * / " through the 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 * / ". The semantic mapping verifies that the two expressions have consistent meanings, the 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 implementing cross-device style compatibility processing, and can effectively improve the readability and maintainability of style rules.

[0133] In an optional implementation, in response to the rule stack length being one, the aforementioned selector expression is read from the processing result cache, and the aforementioned selector expression is subjected to conversion mapping operation with the current context information to generate a target expression, including:

[0134] The retrieval hash value is read from the processing result cache, and based on the retrieval hash value, the storage location of the aforementioned selector expression in the processing result cache is located, and the aforementioned selector expression is read;

[0135] The context attribute identifiers in the current processing environment are obtained, the attribute values corresponding to each of the context attribute identifiers are extracted, and the context attribute identifiers and the attribute values are formed into a context information structure in the form of key-value pairs;

[0136] The attribute values in the context information structure are scanned, the influence factors of each attribute value are calculated, and the context features are generated according to the influence factors; the aforementioned selector expression is subjected to matching operation with the context information structure, a matching point is identified, the associated features of the matching point are extracted, and an interaction feature set is generated; semantic units in the aforementioned selector expression are identified, feature parameters of the semantic units are extracted, and a selector feature set is generated according to the feature parameters;

[0137] The selector feature set, the context feature set, and the interaction feature set are organized into feature vectors according to preset dimensions. Based on the feature vectors, the foregoing 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 foregoing selector expression from the processing result cache and performs a conversion mapping operation with the current context information to generate a target expression. The specific implementation is as follows:

[0139] The system reads a retrieval hash value from the processing result cache. The hash value is a unique identifier generated in the previous processing process, which is used to quickly locate the storage position of the foregoing selector expression. For example, assuming that the foregoing selector expression is "div[data-id='user-profile'] > span.username", the corresponding retrieval hash value is "a7f9b3d2e1c8". The system locates the expression stored in the 1024th block area of the cache based on the hash value in the hash index table of the processing result cache, and then reads the complete content of the expression.

[0140] The system obtains the context attribute identifiers in the current processing environment. These attribute identifiers include "page ID", "user level", "device type", "screen resolution", and the like. The system extracts the actual values corresponding to each attribute identifier, for example, 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 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 influence factor of each attribute value. The influence factor reflects the importance of the attribute value to the conversion of the selector expression. The system processes each attribute value through preset influence factor calculation logic, for example, the influence factor of the "mobile" device type is 0.8, indicating that the selector needs to be adjusted more in the mobile device environment; and the influence factor of the "premium" user level is 0.3, indicating that the user level has less influence on the adjustment of the selector. The system generates a context feature set according to these influence factors, which records the characteristics and influence weights of each context factor.

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

[0143] The system identifies semantic units in the aforementioned selector expression, such as "div", "data-id='user-profile'", ">", "span", "username", etc. The system extracts feature parameters for each semantic unit, such as the node type of "div" being "block-level element" with feature parameters {"elementType": "block", "nestingLevel": 0}; the attribute type of "data-id" being "custom data attribute" with feature parameters {"attributeType": "data", "identifierPurpose": "user"}. The system generates a set of selector features based on these feature parameters, comprehensively describing the structure and semantic properties of the selector itself.

[0144] The system organizes the set of selector features, the set of context features, and the set of interaction features into a feature vector according to pre-defined dimensions. This feature vector contains all the information needed for selector conversion, arranged according to pre-defined dimensions. For example, the first 10 dimensions describe selector features, the next 8 dimensions describe context features, and the last 12 dimensions describe interaction features.

[0145] Based on this feature vector, the system inputs the aforementioned selector expression and the context information structure into an interaction integration function. This function is a decision tree or a rule engine that performs a series of conversion operations based on the values of the feature vector. For example, in a mobile device environment, the function simplifies complex CSS selectors or converts multi-layer nested selectors into direct selectors. In this example, since it is a mobile device and for a premium user, the interaction integration function converts the original selector "div[data-id='user-profile'] > span.username" to "[data-id='premium-user'].username", a more concise and targeted selector, as the final target expression.

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

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

[0148] The first unit is configured to receive a packaging and building command of the main application and call a style isolation script plug-in to create a temporary folder to store processing files.

[0149] The second unit is configured to scan a main application file structure to build a style file index table, the style file index table records paths, types and dependency relationships of style files, the style files are grouped and sorted according to the dependency relationships to generate a style file processing queue.

[0150] The third unit is configured to initialize a rule stack for each file in the style file processing queue, the rule stack is used to record nested hierarchical relationships of style declaration blocks.

[0151] The fourth unit is configured to read style file content line by line, when a comment line or a line with a target identifier is detected, the line is marked as an ignored state and stored in a processing result cache, and original comment information is reserved.

[0152] The fifth unit is configured to, when a style declaration block start marker is detected, push a hierarchical identifier into the rule stack, if the rule stack is empty, top-level style rule processing is entered, a selector expression is dynamically inserted in front of the rule, and an insertion position is recorded in the processing result cache.

[0153] The sixth unit is configured to, when a style declaration block end marker is detected, remove the hierarchical identifier from the rule stack, if the length of the rule stack is 1 after the removal, a target expression corresponding to the aforementioned selector expression is appended at the end of the style rule.

[0154] The seventh unit is configured to write the processed style file content into a corresponding file in the temporary folder, the style files in the temporary folder replace the original packaged style files as a whole, and the isolation processing of the main application style is completed.

[0155] In a third aspect of the embodiment of the application, an electronic device is provided, comprising:

[0156] a 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 method described above.

[0159] In a fourth aspect, the present application provides a computer readable storage medium, having stored thereon computer program instructions, which when executed by a processor, implement the method described above.

[0160] The present application can be a method, an apparatus, a system, and / or a computer program product. The computer program product can include a computer readable storage medium (or media) having computer readable program instructions thereon for performing various aspects of the present application.

[0161] Finally, it should be noted that the above-mentioned embodiments are merely used to illustrate the technical solutions of the present application, rather than limit the present application; although the present application has been described in detail with reference to the above-mentioned embodiments, those skilled in the art should understand that the technical solutions recorded in the above-mentioned embodiments can be modified, or some or all of the technical features thereof can be replaced equivalently; and 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 application.

Claims

1. A main application style isolation method based on a plug-in model, characterized in that, include: Receive the main application's build command and call the style isolation script plugin to create a temporary folder to store the processed files; The main application file structure is scanned to construct a style file index table, which records the path, type, and dependencies of style files. The style files are then grouped and sorted according to the dependencies to generate a style file processing queue, including: The reference count is obtained by counting the number of times a style file is directly referenced by other files. The reference count is divided by the total number of style files to obtain the reference weight. The time-series correlation between the reference weight and the file modification time is calculated to obtain the dependency weight. Based on the dependency weights of the style files, a dependency graph is generated. The dependency strength value is calculated by dividing the sum of the products of the dependency weights and reference weights of the style files by the square root of the sum of squares of the dependency weights. The dependency transit strength of the style files is determined by multiplying the dependency strength value with the attenuation coefficient and transit probability of each layer of dependency. Calculate the similarity values ​​between files and generate a similarity matrix. Based on the similarity matrix and the dependency transitivity, divide the style files into multiple groups. Determine the optimal grouping scheme by calculating the sum of squared distances between the style files in each group and the group center point. The dependency priority, complexity score, and temporal impact of 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 by multiplying the comprehensive priority score by the preset learning rate. A style file processing queue is generated based on the priority value of the style file. A rule stack is initialized for each file in the style file processing queue. The rule stack is used to record the nesting hierarchy of style declaration blocks. The content of the style file is read 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, while retaining the original comment information. When the start marker of a style declaration block is detected, a hierarchy identifier is pushed onto the rule stack. If the rule stack is empty, the top-level style rule is processed. 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 is 1 after removal, the target expression corresponding to the aforementioned selector expression is appended to the end of the style rule. The processed style file content is written to the corresponding file in the temporary folder, and the style file in the temporary folder completely replaces the original packaged style file, thus completing the isolation processing of the main application style.

2. The method according to claim 1, characterized in that, For each file in the style file processing queue, a rule stack is initialized. This rule stack records the nesting hierarchy of style declaration blocks, including: For each style file in the style file processing queue, a rule stack with a last-in-first-out data structure is constructed. Each stack frame in the rule stack contains a hierarchy depth, selector information, and scope identifier, wherein the hierarchy depth represents the nesting depth of the style rules. The runtime environment of the rule stack is initialized, the initial capacity and expansion factor are set, and a selector mapping table is established, in which the frequency and complexity of the selector are recorded. The start marker of the detected style rule is used to calculate the new level depth based on the current level depth and selector complexity. The stack frame containing the new level depth is pushed into the rule stack, and the usage frequency of the corresponding selector is updated in the selector mapping table. When the end marker of a style rule is detected, the top element of the rule stack is obtained, the sum of the product of the feature weight and the matching degree is calculated as the validity verification value, and the current end marker is judged to match the top element of the stack based on the validity verification value. Based on timestamps, random factors, and application prefixes, a scope identifier is generated using a hash function. This scope identifier is then injected into the top-level selector to form an isolation expression. A selector specificity value is calculated by weighting the number of ID selectors, class selectors, and element selectors. The selector priority is determined based on this specificity value, and the processed selector information is updated in the stack frame corresponding to the rule stack. Once the style rules have been processed, a stack frame is popped from the rule stack, and the processed style rules are written to the style file.

3. The method according to claim 1, characterized in that, When a style declaration block start marker is detected, a hierarchy identifier is pushed onto the rule stack. If the rule stack is empty, the top-level style rule is processed, and a selector expression is dynamically inserted before this rule. The insertion position is recorded in the processing result cache, including: When a style declaration block start marker is detected, the hierarchy depth, selector information, and scope identifier of the current style declaration block are obtained, and a hierarchy identifier is generated; the hierarchy identifier is pushed onto 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 the top-level style rule. Traverse each level identifier in the rule stack, extract the depth coefficient corresponding to each level identifier, use the depth coefficient as the weight coefficient, perform a weighted calculation on each level identifier and the corresponding weight coefficient to obtain a weighted result, and accumulate the weighted result to generate a selector expression; Obtain the valid scope information of the current processing context, perform a matching operation between the selector expression and the valid scope information to obtain a matching set, determine whether the matching set is empty, and if the matching set is not empty, determine that the selector expression has passed the verification. In response to the successful validation of the selector expression, the starting position of the rule corresponding to the style declaration block is determined, and the selector expression is inserted before the starting position to obtain the updated style rule; Calculate the retrieval hash value of the selector expression, and write the retrieval hash value and insertion position information into the processing result cache. The processing result cache is used to record the historical insertion positions of the selector expression.

4. The method according to claim 1, characterized in that, When a style declaration block closing marker is detected, the hierarchy identifier is removed from the rule stack. If the rule stack length is 1 after removal, a target expression corresponding to the aforementioned selector expression is appended to the end of the style rule, including: When the end marker of the style declaration block is detected, the top-level identifier of the rule stack is obtained; Remove the top-level identifier from the rule stack, obtain the remaining level identifiers in the rule stack, and count the remaining level identifiers to obtain the rule stack length; In response to the rule stack length being one, the aforementioned selector expression is read from the processing result cache, and the aforementioned selector expression is transformed and mapped with the current context information to generate the target expression; Obtain 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 append position parameter; based on the append position parameter, append the target expression to the end of the style rule to obtain the updated style rule; Perform a semantic mapping operation on the target expression and the aforementioned selector expression, and determine whether the semantic mapping results are consistent. If the semantic mapping results are consistent, the correspondence verification is confirmed to be successful. Perform an integrity check on the updated style rules to determine the structural integrity of the updated style rules and the validity of the target expression. In response to the integrity check passing, the updated style rules are written into the style rule output, completing the termination process of the style declaration block.

5. The method according to claim 4, characterized in that, In response to the rule stack having a length of one, the aforementioned selector expression is read from the processing result cache, and a transformation mapping operation is performed between the aforementioned selector expression and the current context information to generate the target expression, including: Read the retrieval hash value from the processing result cache, locate the storage location of the aforementioned selector expression in the processing result cache based on the retrieval hash value, and read the aforementioned selector expression; Obtain the context attribute identifier in the current processing environment, extract the attribute value corresponding to each context attribute identifier, and form a context information structure in the form of key-value pairs between the context attribute identifier and the attribute value; Scan the attribute values ​​in the context information structure, calculate the influence factor of each attribute value, and generate a context feature set based on the influence factor; perform a matching operation between the aforementioned selector expression and the context information structure, identify matching points, extract the association features of the matching points, and generate an interaction feature set; identify the semantic units in the aforementioned selector expression, extract the 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 a preset dimension; based on the feature vector, the aforementioned selector expression and the context information structure are input into the interaction integration function to generate the target expression.

6. A main application style isolation system based on a plug-in model, used to implement the method as described in any one of claims 1-5, characterized in that, include: The first unit is used to receive the main application's build command and call the style isolation script plugin 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 of the style files. The style files are grouped and sorted according to the dependency to generate a style file processing queue. The third unit is used to initialize a rule stack for each file in the style file processing queue. The rule stack is used to record the nesting hierarchy of style declaration blocks. 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, while retaining the original comment information. The fifth unit is used to push a hierarchy identifier into the rule stack when a style declaration block start mark is detected. If the rule stack is empty, it enters the top-level style rule processing, dynamically inserts a selector expression before the rule, and records the insertion position in the processing result cache. The sixth unit is used to remove the hierarchy identifier from the rule stack when the end marker of the style declaration block is detected. If the length of the rule stack is 1 after removal, the target expression corresponding to the aforementioned selector expression is appended to 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. The style file in the temporary folder completely replaces the original packaged style file, thus completing the isolation processing of the main application style.

7. An electronic device, characterized in that, include: processor; Memory used to store processor-executable instructions; The processor is configured to invoke instructions stored in the memory to execute the method according to any one of claims 1 to 5.

8. A computer-readable storage medium having computer program instructions stored thereon, characterized in that, When the computer program instructions are executed by the processor, they implement the method described in any one of claims 1 to 5.

Images