Webpack-based style modification method and device, equipment and medium
The Webpack-based style modification method addresses scalability issues in skinning by automating style switching across components, reducing code changes and maintenance, while maintaining UI framework compatibility.
Patent Information
- Application Number
- CN202411168600.9
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-08-23
- Publication Date
- 2024-12-27
AI Technical Summary
Existing methods for implementing skinning in large projects face scalability issues and require repetitive manual coding, leading to increased code size and maintenance challenges.
A Webpack-based style modification method that automatically switches styles in different environment variables by determining target environment variables, selecting DOM nodes with matching key names, and applying corresponding style variables, minimizing code changes and conflicts with UI frameworks.
Enables efficient and simple style modifications across multiple components with minimal code changes, ensuring compatibility with UI frameworks and reducing maintenance efforts.
Smart Images
Figure CN119201102A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the fields of computer technology and related technologies, and in particular to a method, apparatus, device, and medium for modifying a style based on Webpack. Background Art
[0002] Skinning refers to a feature that allows users to change the theme of an application's interface based on personal preferences or system settings. This typically involves modifying the background color, text color, font size, and the visual style of other UI elements. With skinning, users can choose different visual themes to provide a more comfortable browsing experience or meet personalized needs.
[0003] In the prior art, there are many methods for implementing skinning functionality, such as through CSS variables, class switching, external styles, and the use of Sass / Less preprocessor tables. Although CSS variables, class switching, external styles, and the use of Sass / Less preprocessor tables can achieve the effect of changing the theme of an application interface in a single component or global style, they may encounter scalability issues when applied to multiple components and modules in a large project. Especially when implementing complex skinning requirements, these methods require developers to manually repeat coding in numerous components, which not only increases the code size but also poses challenges for ongoing maintenance. Summary of the Invention
[0004] The embodiments described herein provide a Webpack-based style modification method, apparatus, device, and medium to address the problems of the prior art.
[0005] In a first aspect, according to the content of the present disclosure, a method for modifying a style based on Webpack is provided, comprising:
[0006] In response to receiving a trigger operation submitted by a target object, determining a target environment variable, wherein the trigger operation is used to modify the style of the initial page;
[0007] Obtain the target key value name included in the target environment variable;
[0008] According to the class name of each DOM node in the initial page, select the DOM node with the same key value as the target DOM node;
[0009] Obtaining a style variable corresponding to the target key value name, wherein the variable name of the style variable is a CSS attribute name, the key of the style variable is an environment variable, and the key value of the style variable is a CSS style value under the corresponding environment variable;
[0010] The target DOM node of the initial page is modified in style according to the key value of the style variable to obtain the target page.
[0011] In some embodiments of the present disclosure, selecting a DOM node having the same target key name as the target DOM node according to the class name of each DOM node in the initial page includes:
[0012] Get the class name of the DOM node included in the initial page;
[0013] The target key value names included in the target environment are matched with the class names of the DOM nodes included in the initial page in sequence, and the DOM node that matches the target key value names included in the target environment is selected as the target DOM node.
[0014] In some embodiments of the present disclosure, before determining the target environment variable in response to receiving the trigger operation submitted by the target object, the method further includes:
[0015] Defining environment variables, wherein any one of the environment variables includes a CSS property name and a CSS style value;
[0016] Registering a global variable based on the environment variable, wherein the global variable includes a key value name of the environment variable;
[0017] According to the environment variables, define style variables;
[0018] A style component is determined according to the style variable and the global variable, wherein the style component includes a key value name and a CSS property name included in each key value name.
[0019] In some embodiments of the present disclosure, determining the style component according to the style variable and the global variable includes:
[0020] Get registered global variables;
[0021] Based on the key value name of the environment variable included in the global variable and the style variable, obtaining an association relationship between the key value name and the style variable;
[0022] The relationship between the key value name and the style variable is derived to obtain a style component.
[0023] In some embodiments of the present disclosure, before determining the target environment variable in response to receiving the trigger operation submitted by the target object, the method further includes:
[0024] Define a style sheet object, wherein the style sheet object includes environment variables and target key names corresponding to the environment variables;
[0025] The step of obtaining the target key value name included in the target environment variable includes:
[0026] According to the style function, introduce the style sheet object;
[0027] The target key value name included in the target environment variable is obtained from the style sheet object.
[0028] In some embodiments of the present disclosure, defining a style sheet object includes:
[0029] Import the key value name of the style component;
[0030] According to the modified styles of the initial page in each environment variable, the corresponding target key value name is added under each of the environment variables, thereby generating a style sheet object.
[0031] In some embodiments of the present disclosure, modifying the style of the target DOM node of the initial page according to the key value of the style variable to obtain the target page includes:
[0032] Applying the style variable corresponding to the target key value name in the style sheet object to the target DOM node of the initial page based on styleFunc;
[0033] Modify the style of the target DOM node based on changeStyles to obtain the target page.
[0034] In a second aspect, according to the present disclosure, a style modification device based on Webpack is provided, comprising:
[0035] a target environment variable determination module, configured to determine target environment variables in response to receiving a trigger operation submitted by a target object, wherein the trigger operation is configured to modify the style of an initial page;
[0036] A target key value name acquisition module is used to obtain the target key value name included in the target environment variable;
[0037] A target DOM node determination module is used to select a DOM node with the same target key name as the target DOM node according to the class name of each DOM node in the initial page;
[0038] A style variable acquisition module is used to acquire the style variable corresponding to the target key value name, wherein the variable name of the style variable is the CSS attribute name, the key of the style variable is the environment variable, and the key value of the style variable is the CSS style value under the corresponding environment variable;
[0039] The target interface determination module is used to modify the style of the target DOM node of the initial page according to the key value of the style variable to obtain the target page.
[0040] In a third aspect, according to the present disclosure, a computer device is provided, comprising:
[0041] one or more processors;
[0042] a storage device for storing one or more programs,
[0043] When the one or more programs are executed by the one or more processors, the one or more processors implement any method as described in the first aspect.
[0044] In a fourth aspect, according to the content of the present disclosure, a computer-readable storage medium is provided, on which a computer program is stored, and when the program is executed by a processor, it implements any method as described in the first aspect.
[0045] The Webpack-based style modification method, device, equipment and medium provided by the embodiment of the present disclosure first determine the target environment variable in response to the trigger operation submitted by the target object; then obtain the target key name included in the target environment variable; select the DOM node with the same target key name as the target DOM node according to the class name of each DOM node in the initial page; obtain the style variable corresponding to the target key name; modify the style of the target DOM node of the initial page according to the key value of the style variable to obtain the target page. That is, the style modification method automatically switches the style in different environment variables according to the packaging command, matches the target DOM node through the target key name, and modifies the DOM node style according to the style variable corresponding to the target key name, thereby directly modifying the style of the target DOM node, which has the highest priority and will not conflict with the style of the UI framework. When the style needs to be modified, it can be achieved by simply modifying the style variable, with relatively small code changes and simple implementation.
[0046] The above description is only an overview of the technical solutions of the embodiments of the present application. In order to more clearly understand the technical means of the embodiments of the present application, they can be implemented in accordance with the contents of the specification. In order to make the above and other purposes, features and advantages of the embodiments of the present application more obvious and easy to understand, the specific implementation methods of the present application are listed below. BRIEF DESCRIPTION OF THE DRAWINGS
[0047] In order to more clearly illustrate the technical solutions of the embodiments of the present disclosure, the drawings of the embodiments will be briefly described below. It should be noted that the drawings described below only relate to some embodiments of the present disclosure and are not intended to limit the present disclosure.
[0048] Figure 1 This is a flow chart of a method for modifying a style based on Webpack provided by an embodiment of the present disclosure;
[0049] Figure 2This is a schematic diagram of the structure of a style modification device based on Webpack provided by an embodiment of the present disclosure;
[0050] Figure 3 It is a structural diagram of a computer device provided by an embodiment of the present disclosure.
[0051] In the drawings, reference numerals having the same last two digits correspond to the same elements. It should be noted that the elements in the drawings are schematic and not drawn to scale. DETAILED DESCRIPTION
[0052] In order to make the purpose, technical solutions and advantages of the embodiments of the present disclosure more clear, the technical solutions of the embodiments of the present disclosure will be clearly and completely described below in conjunction with the accompanying drawings. Obviously, the described embodiments are part of the embodiments of the present disclosure, not all of the embodiments. Based on the described embodiments of the present disclosure, all other embodiments obtained by those skilled in the art without creative work also fall within the scope of protection of the present disclosure.
[0053] Unless otherwise defined, all terms (including technical and scientific terms) used herein have the same meaning as commonly understood by one of ordinary skill in the art to which the present disclosure belongs. It will be further understood that terms such as those defined in commonly used dictionaries should be interpreted as having a meaning consistent with their meaning in the context of the specification and the relevant art, and will not be interpreted in an idealized or overly formal manner unless otherwise explicitly defined herein. As used herein, a statement that two or more parts are "connected" or "coupled" together shall mean that the parts are joined together either directly or through one or more intermediate components.
[0054] References to "embodiments" herein mean that a particular feature, structure, or characteristic described in connection with the embodiments may be included in at least one embodiment of the present application. The appearance of the phrase "embodiment" in various places in the specification does not necessarily refer to the same embodiment, nor does it necessarily refer to independent or alternative embodiments that are mutually exclusive of other embodiments. It is understood, both explicitly and implicitly, by those skilled in the art that the embodiments described herein may be combined with other embodiments.
[0055] The term "and / or" in this document simply describes a relationship between related objects, indicating that three possible relationships exist. For example, "A and / or B" can mean: A exists, A and B exist, and B exists. Additionally, the character " / " in this document generally indicates that the related objects are in an "or" relationship.
[0056] Furthermore, in all embodiments of the present disclosure, terms such as “first” and “second” are used only to distinguish one component (or a portion of a component) from another component (or another portion of a component).
[0057] In the description of this application, unless otherwise specified, "plurality" means more than two (including two), and similarly, "multiple groups" means more than two (including two).
[0058] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the accompanying drawings.
[0059] Based on the problems existing in the prior art, the present disclosure provides a style modification method based on Webpack. Figure 1 This is a flow chart of a Webpack-based style modification method provided by an embodiment of the present disclosure. Figure 1 As shown, the style modification methods based on Webpack include:
[0060] S110 : In response to receiving a trigger operation submitted by a target object, determine target environment variables.
[0061] The trigger operation is used to modify the style of the initial page.
[0062] An environment variable is an object with a specific name in an operating system, which contains information to be used by one or more applications. In the embodiment of the present disclosure, the page styles are different under different environment variables.
[0063] In a specific implementation, in the Webpack-based style modification method provided by the embodiment of the present disclosure, when the style of the initial page needs to be modified, at this time, the target object can first determine the target environment variables through a trigger operation, and by determining the target environment variables, the style of the initial page can be modified based on the page style under the target environment variables.
[0064] In the Webpack-based style modification method provided by the embodiment of the present disclosure, before determining the target environment variable in response to receiving a trigger operation submitted by the target object, the method further includes:
[0065] Define environment variables, where any environment variable includes a CSS property name and a CSS style value; register global variables based on the environment variables, where the global variables include the key value names of each environment variable; define style variables based on the environment variables; determine style components based on the style variables and the global variables, where the style components include the variable names of the style variables.
[0066] That is, in the Webpack-based style modification method provided by the embodiment of the present disclosure, it is necessary to first define environment variables, and based on the defined environment variables, register and generate global variables, and define style variables according to the defined environment variables, and finally determine the style components according to the style variables and global variables.
[0067] Specifically, the specific process of defining environment variables is: first install the dependency cross-env, and use cross-env to set the module environment variables in the packaging command of the corresponding environment. For example, the specific process of defining environment variables is:
[0068] --------------------------------------------------------------------
[0069] "scripts":{
[0070] "test":"echo\"Error:no test specified\"&&exit 1"
[0071] "build:test1":"cross-env module1=test1 webpack--configbuild / webpack.prod.js"
[0072] "build:test2":"cross-env module2=test2 webpack--configbuild / webpack.prod.js}
[0073] ----------------------------------------------------------- Among them, the environment variables include module1=test1 and module2=test2, and the style information of the environment variable module1 and the style information of the environment variable module2 are packaged in the config build / webpack.prod.js file. The style information corresponding to different environment variables is different, and the style information at least includes the CSS property name and CSS style value.
[0074] After defining the environment variables, the environment variable module is injected into the project through the webpack.DefinePlugin method. Specifically, as shown in the following code, the global variable proce.env.MODULE_ENV is defined, and the value of the global variable is equal to process.env.module.
[0075] Then, define style variables based on the environment variables. Specifically, define style variables in the js file. Each style variable is an object. The variable name of the style variable is the CSS attribute name, the key of the style variable is the environment variable, and the key value of the style variable is the CSS style value under the corresponding environment variable. The defined environment variables are as follows.
[0076] ----------------------------------------------------------------
[0077] / / Define style variables
[0078] const color={module1:'#fc0505',module2:'#06f72e'}
[0079] const fontSize={module1:'14px',module2:'16px'}
[0080] const lineHeight={module1:'14px',module2:'16px'}
[0081] const margin={module1:'10px',module2:'0px'}
[0082] const padding={module1:'0px',module2:'5px'}
[0083] const width={module1:'200px',module2:'300px'}
[0084] const fontWeight={module1:'bold',module2:'normal'}
[0085] const border={module1:'1px solid#000',module2:'2px solid#666'}
[0086] ----------------------------------------------------------------- Combined with the above code, the variable names of the defined style variables include: color, fontSize, lineHeight, margin, padding, width, fontWeight and border, and the keys of the style variables include module1 and module2.
[0087] Finally, the style component is determined according to the style variable and the global variable, wherein the style component includes the variable name of the style variable.
[0088] In a specific implementation, the style component is determined based on the style variables and global variables, including: obtaining the registered global variables; based on the global variables, determining the association relationship between the key value name and the variable name of the style variable; and deriving the relationship between the key value name and the variable name of the style variable to obtain the style component.
[0089] The specific implementation process is shown in the following code:
[0090] -------------------------------------------------------------
[0091] / Get registered global variables
[0092] const modules=process.env.modules
[0093] / / Export style components
[0094] export const table={
[0095] color:color[modules],
[0096] fontSize:fontSize[modules],
[0097] margin:margin[modules],
[0098] border:border[modules],
[0099] }
[0100] export const head={
[0101] fontSize:fontSize[modules],
[0102] fontWeight:fontWeight[modules],
[0103] lineHeight:lineHeight[modules],
[0104] padding:padding[modules],
[0105] }
[0106] export const searchItem={
[0107] width:width[modules],
[0108] margin:margin[modules],
[0109] lineHeight:lineHeight[modules],
[0110] }
[0111] ---------------------------------------------------------------- Among them, the key value names in the style component include: table, head and searchItem. The variable names of the style variables corresponding to the key value name table include color, fontSize, margin and border. The variable names of the style variables corresponding to the key value name head include fontSize, fontWeight, lineHeight and padding. The variable names of the style variables corresponding to the key value name searchItem include width, margin and lineHeight.
[0112] In addition, before executing step S110, the method further includes:
[0113] A style sheet object is defined, wherein the style sheet object includes environment variables and target key value names corresponding to the environment variables.
[0114] In a specific implementation, defining a style sheet object includes: introducing a key value name of a style component; adding a corresponding target key value name under each environment variable according to the modified style of the initial page, and then generating a style sheet object.
[0115] The specific implementation method of defining the style sheet object is as follows:
[0116]
[0117] The style sheet object is styleTable, and the style sheet object includes environment variables module1 and module2. The target key value names corresponding to the environment variable module1 include table and head, and the target key value names corresponding to the environment variable module2 include table and searchItem.
[0118] S120. Obtain the target key value name included in the target environment variable.
[0119] At this time, obtaining the target key value name included in the target environment variable includes: introducing a style sheet object according to the style function; and obtaining the target key value name included in the target environment variable from the style sheet object.
[0120] S130 , according to the class name of each DOM node in the initial page, selecting a DOM node with the same key value as the target DOM node.
[0121] In a specific implementation, based on the class names of each DOM node in the initial page, a DOM node with the same target key name is selected as the target DOM node, including: obtaining the class name of the DOM node included in the initial page; matching the target key name included in the target environment with the class name of the DOM node included in the initial page in turn, and selecting the DOM node that matches the target key name included in the target environment as the target DOM node.
[0122] Specifically, in combination with the style sheet object defined above, the target key names corresponding to the environment variable module1 in the style sheet object include table and head, and the target key names corresponding to the environment variable module1 include table and searchItem. When step S110 selects the environment variable module1 as the target environment variable,
[0123] If the target environment variable is determined to be module1 in step S110, the target environment variable determined at this time includes target key names such as table and head.
[0124] S140: Obtain the style variable corresponding to the target key value name.
[0125] The variable name of the style variable is the CSS property name, the key value of the style variable is the environment variable, and the key value of the style variable is the CSS style value under the corresponding environment variable.
[0126] After step S110 determines the target key name, the style variables of each target key name can be obtained from the style component. For example, the style variables of the target key name table obtained from the style component are: color, fontSize, margin and border, and the style variables of the target key name head obtained from the style component are: fontSize, fontWeight, lineHeight and padding.
[0127] S150: Modify the style of the target DOM node of the initial page according to the key value of the style variable to obtain the target page.
[0128] Since step S110 determines the target environment variable, step S130 determines the target dom node with the same target key name, and step S140 determines the style variable corresponding to the target key name, at this time, the style of the target dom node can be modified through the CSS style value of each target key name in the style variable in the target environment variable.
[0129] In a specific implementation, the target DOM node of the initial page is style-modified according to the key value of the style variable to obtain the target page, including: applying the style variable corresponding to the target key value name in the style sheet object to the target DOM node of the initial page based on styleFunc; and modifying the style of the target DOM node based on changeStyles to obtain the target page.
[0130] The specific implementation is as follows:
[0131]
[0132]
[0133] Finally, by introducing the style function globally, add the style function to the prototype of the vue object so that you can use the function globally.
[0134] The specific implementation is as follows:
[0135] -----------------------------------------------------------------
[0136] import Vue from 'vue'
[0137] Vue.prototype.$styleFunc=styleFunc;
[0138] --------------------------------------------------------------- The style modification method based on Webpack provided by the embodiment of the present disclosure first determines the target environment variable in response to the trigger operation submitted by the target object; then obtains the target key value name included in the target environment variable; selects the DOM node with the same target key value name as the target DOM node according to the class name of each DOM node in the initial page; obtains the style variable corresponding to the target key value name; and performs style modification on the target DOM node of the initial page according to the key value of the style variable to obtain the target page. That is, the style modification method automatically switches the style in different environment variables according to the packaging command, matches the target DOM node through the target key value name, and modifies the DOM node style according to the style variable corresponding to the target key value name, thereby directly modifying the style of the target DOM node, which has the highest priority and will not conflict with the style of the UI framework. When the style needs to be modified, it can be achieved by simply modifying the style variable, with relatively small code changes and simple implementation.
[0139] On the basis of the above embodiments, the present disclosure also provides a style modification device based on Webpack. Figure 2 This is a schematic diagram of the structure of a style modification device based on Webpack provided by an embodiment of the present disclosure. Figure 2 As shown, the style modification device based on Webpack includes:
[0140] The target environment variable determination module 210 is configured to determine the target environment variable in response to receiving a trigger operation submitted by the target object, wherein the trigger operation is used to modify the style of the initial page;
[0141] The target key value name acquisition module 220 is used to obtain the target key value name included in the target environment variable;
[0142] The target DOM node determination module 230 is used to select a DOM node with the same target key name as the target DOM node according to the class name of each DOM node in the initial page;
[0143] The style variable acquisition module 240 is used to acquire the style variable corresponding to the target key value name, wherein the variable name of the style variable is the CSS attribute name, the key of the style variable is the environment variable, and the key value of the style variable is the CSS style value under the corresponding environment variable;
[0144] The target interface determination module 250 is used to modify the style of the target DOM node of the initial page according to the key value of the style variable to obtain the target page.
[0145] The style modification device based on Webpack provided by the embodiment of the present disclosure first determines the target environment variable in response to the trigger operation submitted by the target object; then obtains the target key value name included in the target environment variable; selects the DOM node with the same target key value name as the target DOM node according to the class name of each DOM node in the initial page; obtains the style variable corresponding to the target key value name; and performs style modification on the target DOM node of the initial page according to the key value of the style variable to obtain the target page. That is, the style modification method automatically switches the style in different environment variables according to the packaging command, matches the target DOM node through the target key value name, and modifies the DOM node style according to the style variable corresponding to the target key value name, thereby directly modifying the style of the target DOM node, which has the highest priority and will not conflict with the style of the UI framework. When the style needs to be modified, it can be achieved by simply modifying the style variable, with relatively small code changes and simple implementation.
[0146] In a specific implementation, according to the class name of each DOM node in the initial page, a DOM node with the same key name as the target DOM node is selected as the target DOM node, including:
[0147] Get the class name of the DOM node included in the initial page;
[0148] The target key value names included in the target environment are matched with the class names of the DOM nodes included in the initial page in sequence, and the DOM node that matches the target key value names included in the target environment is selected as the target DOM node.
[0149] In a specific embodiment, in response to receiving a trigger operation submitted by a target object, before determining the target environment variable, the method further includes:
[0150] Define environment variables, where any environment variable includes a CSS property name and a CSS style value;
[0151] Register global variables based on environment variables, where global variables include the key value names of environment variables;
[0152] Define style variables based on environment variables;
[0153] A style component is determined according to the style variables and the global variables, wherein the style component includes a key value name and a CSS property name included in each key value name.
[0154] In a specific implementation, determining the style component based on the style variable and the global variable includes:
[0155] Get registered global variables;
[0156] Based on the key value names and style variables of the environment variables included in the global variables, the association relationship between the key value names and the style variables is obtained;
[0157] Export the relationship between key value names and style variables to obtain style components.
[0158] In a specific embodiment, in response to receiving a trigger operation submitted by a target object, before determining the target environment variable, the method further includes:
[0159] Define a style sheet object, wherein the style sheet object includes environment variables and target key value names corresponding to the environment variables;
[0160] Get the target key value name included in the target environment variable, including:
[0161] According to the style function, introduce the style sheet object;
[0162] Get the target key value name included in the target environment variable from the style sheet object.
[0163] In a specific embodiment, defining a style sheet object includes:
[0164] Import the key value name of the style component;
[0165] According to the modified styles of each environment variable on the initial page, add the corresponding target key value name under each environment variable to generate a style sheet object.
[0166] In a specific implementation, the target DOM node of the initial page is modified in style according to the key value of the style variable to obtain the target page, including:
[0167] Apply the style variable corresponding to the target key value name in the style sheet object to the target DOM node of the initial page based on styleFunc;
[0168] Modify the style of the target DOM node based on changeStyles to get the target page.
[0169] The present application also provides a computer device. Figure 3 , Figure 3 This is a basic structural block diagram of the computer device in this embodiment.
[0170] The computer device includes a memory 510 and a processor 520 that are interconnected and communicate with each other via a system bus. It should be noted that the figure only shows a computer device having components 510-520, but it should be understood that it is not required to implement all the components shown, and more or fewer components can be implemented instead. Among them, those skilled in the art can understand that the computer device here is a device that can automatically perform numerical calculations and / or information processing according to pre-set or stored instructions, and its hardware includes but is not limited to microprocessors, application specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), digital signal processors (DSPs), embedded devices, etc.
[0171] Computer devices can be desktop computers, laptops, PDAs, cloud servers, etc. Computer devices can interact with users through keyboards, mice, remote controls, touchpads, or voice-activated devices.
[0172] The memory 510 includes at least one type of readable storage medium, and the readable storage medium includes non-volatile memory or volatile memory, such as flash memory, hard disk, multimedia card, card-type memory (such as SD or DX memory, etc.), random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disk, optical disk, etc. RAM may include static RAM or dynamic RAM. In some embodiments, the memory 510 may be an internal storage unit of a computer device, such as a hard disk or memory of the computer device. In other embodiments, the memory 510 may also be an external storage device of the computer device, such as a plug-in hard disk, smart memory card (SMC), secure digital (SD) card or flash card equipped with the computer device. Of course, the memory 510 may also include both an internal storage unit of the computer device and an external storage device thereof. In this embodiment, the memory 510 is generally used to store an operating system and various application software installed on the computer device, such as the program code of the above-mentioned method. In addition, the memory 510 may also be used to temporarily store various types of data that have been output or are about to be output.
[0173] The processor 520 is generally used to perform the overall operation of the computer device. In this embodiment, the memory 510 is used to store program code or instructions, which include computer operating instructions. The processor 520 is used to execute the program code or instructions stored in the memory 510 or process data, such as the program code for running the above method.
[0174] In this document, a bus may be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus, or an Extended Industry Standard Architecture (EISA) bus. This bus system can be divided into address buses, data buses, and control buses. For ease of illustration, the figure uses only one thick line, but this does not mean that there is only one bus or only one type of bus.
[0175] Another embodiment of the present application further provides a computer-readable medium, which may be a computer-readable signal medium or a computer-readable medium. A processor in a computer reads the computer-readable program code stored in the computer-readable medium, enabling the processor to execute the functional actions specified in each step or combination of steps in the above method, and to generate a device that implements the functional actions specified in each block or combination of blocks in the block diagram.
[0176] Computer-readable media include but are not limited to electronic, magnetic, optical, electromagnetic, infrared memory or semiconductor systems, devices or apparatuses, or any appropriate combination of the foregoing, the memory is used to store program codes or instructions, the program codes include computer operating instructions, and the processor is used to execute the program codes or instructions of the above-mentioned methods stored in the memory.
[0177] For the definitions of memory and processor, please refer to the description of the aforementioned computer device embodiment and will not be repeated here.
[0178] In the several embodiments provided in this application, it should be understood that the disclosed systems, devices and methods can be implemented in other ways. For example, the device embodiments described above are merely schematic. For example, the division of modules or units is only a logical function division. In actual implementation, there may be other division methods, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.
[0179] Each functional unit or module in each embodiment of the present application may be integrated into a processing unit, or each unit may exist physically separately, or two or more units may be integrated into a single unit. The above-mentioned integrated units may be implemented in the form of hardware or software functional units.
[0180] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application is essentially or the part that contributes to the prior art or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including a number of instructions for enabling a computer device (which can be a personal computer, server, or network device, etc.) or a processor to execute all or part of the steps of the various embodiments of the present application. The aforementioned storage medium includes: various media that can store program codes, such as a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk.
[0181] Unless the context clearly indicates otherwise, as used herein and in the appended claims, the singular includes the plural, and vice versa. Thus, when referring to the singular, the plural of the corresponding term is generally included. Similarly, the words "include" and "comprising" are to be interpreted as inclusive rather than exclusive. Likewise, the terms "include" and "or" should be interpreted as inclusive unless such interpretation is expressly prohibited herein. Where the term "example" is used herein, particularly when it follows a group of terms, the "example" is merely exemplary and illustrative and should not be considered exclusive or comprehensive.
[0182] Further aspects and scope of adaptability become apparent from the description provided herein. It should be understood that various aspects of the present application can be implemented individually or in combination with one or more other aspects. It should also be understood that the description and specific embodiments herein are intended to be illustrative only and are not intended to limit the scope of the present application.
[0183] Several embodiments of the present disclosure have been described in detail above, but it is obvious that those skilled in the art can make various modifications and variations to the embodiments of the present disclosure without departing from the spirit and scope of the present disclosure. The scope of protection of the present disclosure is defined by the appended claims.
Claims
1. A style modification method based on Webpack, characterized in that: include: In response to receiving a trigger operation submitted by a target object, determining a target environment variable, wherein the trigger operation is used to modify the style of an initial page; Obtain the target key value name included in the target environment variable; According to the class name of each DOM node in the initial page, a DOM node with the same key value as the target DOM node is selected; Obtain a style variable corresponding to the target key value name, wherein the variable name of the style variable is a CSS attribute name, the key of the style variable is an environment variable, and the key value of the style variable is a CSS style value under the corresponding environment variable; The target DOM node of the initial page is modified in style according to the key value of the style variable to obtain the target page.
2. The method according to claim 1, characterized in that The step of selecting a DOM node having the same key value as the target DOM node according to the class name of each DOM node in the initial page includes: Get the class name of the DOM node included in the initial page; The target key value names included in the target environment are matched with the class names of the DOM nodes included in the initial page in sequence, and the DOM node matching the target key value names included in the target environment is selected as the target DOM node.
3. The method according to claim 1, characterized in that Before determining the target environment variable in response to receiving the trigger operation submitted by the target object, the method further includes: Defining environment variables, wherein any one of the environment variables includes a CSS property name and a CSS style value; Based on the environment variables, register global variables, wherein the global variables include key value names of the environment variables; According to the environment variables, define style variables; A style component is determined according to the style variable and the global variable, wherein the style component includes a variable name of the style variable.
4. The method according to claim 3, characterized in that The determining of the style component according to the style variable and the global variable includes: Get registered global variables; Based on the global variable, determine the association relationship between the key value name and the variable name of the style variable; The relationship between the key value name and the variable name of the style variable is derived to obtain a style component.
5. The method according to claim 3, characterized in that: In response to receiving the trigger operation submitted by the target object, before determining the target environment variable, the method further includes: Define a style sheet object, wherein the style sheet object includes an environment variable and a target key value name corresponding to the environment variable; The step of obtaining the target key value name included in the target environment variable includes: According to the style function, introduce the style sheet object; The target key value name included in the target environment variable is obtained from the style sheet object.
6. The method according to claim 5, characterized in that The defined style sheet object includes: Import the key value name of the style component; According to the modification style of each environment variable of the initial page, the corresponding target key value name is added under each environment variable, thereby generating a style sheet object.
7. The method according to claim 1, characterized in that The method of modifying the style of the target DOM node of the initial page according to the key value of the style variable to obtain the target page includes: Applying the style variable corresponding to the target key value name in the style sheet object to the target DOM node of the initial page based on styleFunc; The style of the target DOM node is modified based on changeStyles to obtain the target page.
8. A style modification device based on Webpack, characterized in that: include: A target environment variable determination module, configured to determine a target environment variable in response to receiving a trigger operation submitted by a target object, wherein the trigger operation is used to modify the style of an initial page; A target key value name acquisition module, used to acquire the target key value name included in the target environment variable; A target DOM node determination module is used to select a DOM node with the same target key value name as the target DOM node according to the class name of each DOM node in the initial page; A style variable acquisition module is used to acquire the style variable corresponding to the target key value name, wherein the variable name of the style variable is the CSS attribute name, the key of the style variable is the environment variable, and the key value of the style variable is the CSS style value under the corresponding environment variable; The target interface determination module is used to modify the style of the target DOM node of the initial page according to the key value of the style variable to obtain the target page.
9. A computer device, characterized in that: include: one or more processors; a storage device for storing one or more programs, When the one or more programs are executed by the one or more processors, the one or more processors implement the method according to any one of claims 1 to 7.
10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the method according to any one of claims 1 to 7 is implemented.