A component-based dynamic theme generation method, device and equipment
By generating hash value query component styles in the cache and directly injecting the web page, the inefficiency problem of repeated rendering in the css-in-js method is solved, and efficient rendering of component dynamic themes is achieved.
Patent Information
- Application Number
- CN202210708355.0
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2022-06-22
- Publication Date
- 2024-12-20
- Estimated Expiration
- 2042-06-22
AI Technical Summary
In web page rendering, the css-in-js method that dynamically generates cascading style sheets (CSS) results in element style uncertainty, resulting in repeated calculations of whether the entire CSS has changed during repeated rendering, resulting in inefficiency.
By obtaining the global parameters of the component to be rendered, generating hash values, querying whether there is a corresponding component style in the cache, directly injecting the web page to generate a dynamic topic, and skipping repeated calculations.
Improves the efficiency of components when rendering repeatedly, saves computing resources, and avoids unnecessary CSS calculations.
Smart Images

Figure CN115033815B_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of Internet technology, and in particular to a component-based dynamic theme generation method, device and equipment. Background Art
[0002] In web page rendering, the css-in-js method of dynamically generating Cascading Style Sheets (CSS) through JS is often used to achieve dynamic theme capabilities at the application level. In this process, because the style of the elements to be rendered is uncertain, it is usually necessary to confirm whether the component style has changed after the complete calculation of the CSS before deciding whether to update it. This results in the need to repeat unnecessary confirmation calculations on the entire CSS when some components on the page are rendered twice or even multiple times.
[0003] Based on this, a more efficient component-based dynamic theme generation solution is needed. Summary of the invention
[0004] The embodiments of this specification provide a component-based dynamic theme generation method, apparatus, device and storage medium to solve the following technical problem: a more efficient component-based dynamic theme generation solution is needed.
[0005] To solve the above technical problems, one or more embodiments of this specification are implemented as follows:
[0006] In a first aspect, an embodiment of the present specification provides a component-based dynamic theme generation method, the method comprising: obtaining a component to be rendered; determining a global parameter corresponding to the component to be rendered, and obtaining a first hash corresponding to the global parameter; generating a second hash based on the first hash and a component identifier of the component to be rendered; querying from a cache whether the second hash exists, and if so, obtaining a component style corresponding to the second hash from the cache; injecting the component style into a web page, and generating a dynamic theme corresponding to the component to be rendered in the web page.
[0007] In a second aspect, an embodiment of the present specification provides a component-based dynamic theme generation device, the device comprising: an acquisition module, which acquires a component to be rendered; a determination module, which determines a global parameter corresponding to the component to be rendered, and acquires a first hash corresponding to the global parameter; a generation module, which generates a second hash based on the first hash and a component identifier of the component to be rendered; a query module, which queries a cache to determine whether the second hash exists, and when it exists, acquires a component style corresponding to the second hash from the cache; an injection module, which injects the component style into a web page, and generates a dynamic theme corresponding to the component to be rendered in the web page.
[0008] In a third aspect, an embodiment of the present specification provides an electronic device, including:
[0009] at least one processor; and,
[0010] a memory communicatively connected to the at least one processor; wherein,
[0011] The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform the method according to the first aspect.
[0012] In a fourth aspect, an embodiment of the present specification provides a non-volatile computer storage medium storing computer executable instructions. When a computer reads the computer executable instructions in the storage medium, the instructions enable one or more processors to execute the method described in the first aspect.
[0013] At least one of the above technical solutions adopted in one or more embodiments of this specification can achieve the following beneficial effects: by obtaining the component to be rendered; determining the global parameters corresponding to the component to be rendered, and obtaining the first hash corresponding to the global parameters; generating a second hash according to the first hash and the component identifier of the component to be rendered; querying from the cache whether the second hash exists, and when it exists, obtaining the component style corresponding to the second hash from the cache; injecting the component style into the web page, and generating a dynamic theme corresponding to the component to be rendered in the web page. When there are components in the surface that need to be repeatedly rendered, there is no need to recalculate whether the entire CSS has changed, so that the overall calculation content can be skipped, saving computing resources and improving the rendering efficiency of the theme. BRIEF DESCRIPTION OF THE DRAWINGS
[0014] In order to more clearly illustrate the embodiments of this specification or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments recorded in this specification. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative labor.
[0015] Figure 1 A schematic diagram of a flow chart of a component-based dynamic theme generation method provided in an embodiment of this specification;
[0016] Figure 2 A schematic diagram of a method for obtaining a first hash provided in an embodiment of this specification;
[0017] Figure 3A schematic diagram of generating a second hash and component pattern provided in an embodiment of this specification;
[0018] Figure 4 A schematic diagram of the structure of a component-based dynamic theme generation device provided in an embodiment of this specification;
[0019] Figure 5 A schematic diagram of the structure of an electronic device provided in an embodiment of this specification. DETAILED DESCRIPTION
[0020] The embodiments of this specification provide a component-based dynamic theme generation method, apparatus, device, and storage medium.
[0021] In order to enable those skilled in the art to better understand the technical solutions in this specification, the technical solutions in the embodiments of this specification will be clearly and completely described below in conjunction with the drawings in the embodiments of this specification. Obviously, the described embodiments are only part of the embodiments of this application, not all of them. Based on the embodiments of this specification, all other embodiments obtained by ordinary technicians in this field without creative work should fall within the scope of protection of this application.
[0022] In the first aspect, Figure 1 As shown, Figure 1 A schematic flow chart of a component-based dynamic theme generation method provided in an embodiment of this specification includes the following steps:
[0023] S101, obtaining a component to be rendered.
[0024] In a specific web page, Cascading Style Sheets (CSS) can not only modify the web page statically, but also dynamically format the elements of the web page in conjunction with various scripting languages. It can define the style structure of the web page (including fonts, colors, shapes, positions, etc.). In this process, CSS can be completed in the form of CSS components. CSS components are components rendered using CSS.
[0025] In some dynamic rendering methods (such as CSS-in-JS), the style theme can be dynamically generated according to the state of the component. In some pages with complex interactions, the style of the page usually changes according to the state of the component.
[0026] For example, for a payment page, the control buttons corresponding to some components may need to be displayed in different colors or shapes when clicked, selected, or unselected by the user, that is, the component style to be adopted is uncertain.
[0027] The component to be rendered is a CSS component that is generated based on the user's interactive behavior and is about to be rendered in the page. For example, when a developer needs to call a component in a page, the component may need to be rendered and become a component to be rendered. There can be one or more components to be rendered.
[0028] The component to be rendered may have been rendered once or multiple times before. For example, a user selects a control that has been selected multiple times, that is, the component to be rendered has actually been rendered in the page. The component to be rendered may also not have been rendered. For example, a user selects a control on a page for the first time. In the dynamic rendering method based on CSS-in-JS, since the control is not selected, it is possible that the component corresponding to its "selected state" has never been rendered and displayed.
[0029] S103, determining the global parameters corresponding to the component to be rendered, and obtaining a first hash corresponding to the global parameters.
[0030] Global Token refers to the basic parameters required for dynamic rendering in a specified way on a page, including theme color, rounded corners, margins, etc. Global parameters are derived from the baseline parameters (Seed Token) and the preset theme algorithm.
[0031] For example, in the benchmark parameters, it is stipulated that the theme color is "Ant Blue", so the expected global parameters should also be the corresponding "Ant Blue". Therefore, based on the preset theme algorithm, the global parameters can be calculated according to the benchmark parameters, and the calculated global parameters include the mouse hover color, the mouse pressed color, the control selected color, etc.
[0032] The relevant color in the calculated global parameters should match the "ant blue" specified in the reference parameters, for example, there is a slight offset with the ant blue as the reference color tone.
[0033] Usually, in a page, the benchmark parameters corresponding to the components to be rendered are fixed. In a page, when the same operation is performed on the same element, the rendering status presented should be consistent. Since the global parameters are based on the benchmark parameters and matched with the benchmark parameters, the global parameters corresponding to the components to be rendered are also predetermined. That is, in the process of rendering components on the same page, there are usually no two global parameters, otherwise conflicts will occur.
[0034] In other words, during the rendering process of a page, the components to be rendered each time may not be the same (or they may be the same, that is, rendering occurs twice or multiple times), but the global parameters corresponding to different components to be rendered in the same page are the same.
[0035] The first hash may be calculated based on the global parameters and the preset subject algorithm. For example, the first hash may be based on the combination of the character string corresponding to the subject according to the aforementioned global parameters and the algorithm identifier (including the algorithm name, the number corresponding to the algorithm, etc.), and a hash value is calculated as the first hash. In other words, the first hash contains information about the global parameters and the subject algorithm.
[0036] For example, assuming that the global parameter is in the form of globla token112 and the corresponding theme algorithm name is themeA, the two can be combined to obtain a string "globlatoken112themeA", and the hash value of "globlatoken112themeA" is calculated as the first hash.
[0037] Furthermore, a parameter name included in the global parameter may be determined, the parameter name included in the global parameter and the algorithm identifier may be merged, and a first hash may be generated.
[0038] For example, the global parameters include the parameter name (colorPrimary=11, PrimaryHover=21, PrimaryActive=31), that is, the parameter name and the algorithm identifier can be combined to obtain the string "colorPrimary=11PrimaryHover=21PrimaryActive=31themeA", and the hash value of the string can be taken to obtain the first hash.
[0039] The first hash can be pre-stored in memory or cache. For example, when a web page needs to render a component for the first time, it is necessary to calculate the global parameters and the first hash, and store them in the cache in the form of a key-value pair with the first hash as the key and the global parameter as the value.
[0040] S105: Generate a second hash according to the first hash and the component identifier of the component to be rendered.
[0041] After the first hash is generated, a second hash is generated based on the first hash and the component identifier of the component to be rendered. A similar method can be used, that is, the first hash and the component identifier of the component to be rendered are merged and hashed to obtain the second hash. In other words, the second hash contains global parameters, theme algorithms, and relevant information of the component to be rendered.
[0042] S107: query whether the second hash exists from the cache, and if it exists, obtain the component style corresponding to the second hash from the cache.
[0043] The correspondence between the second hash value and the component style can also be pre-established and stored. For example, when a component is rendered for the first time, the component style generated by it can be determined. At this time, the second hash corresponding to the component can be determined and the correspondence between the second hash and the component style can be established.
[0044] The cache can pre-store hash values and their corresponding relationships in the form of key-value pairs with hash values as keys, including the corresponding relationship between the first hash value and the global parameter, and the corresponding relationship between the second hash value and the component style. Therefore, it is only necessary to traverse and query the cache with the second hash as the key.
[0045] If the second hash value is found in the cache, it means that the component to be rendered has actually been rendered at least once before. At this time, the component style corresponding to the second hash value can be directly obtained from the cache based on the correspondence between the second hash value and the component style.
[0046] The component styles in the cache are calculated based on the aforementioned global parameters and the aforementioned preset theme algorithm. For example, if the color, floating color, and activation color are provided in the global parameters, it is necessary to generate the component style corresponding to the component to be rendered.
[0047] S109, injecting the component style into the web page, and generating a dynamic theme corresponding to the component to be rendered in the web page.
[0048] After obtaining the component style, you can directly inject it into the web page to make it effective and generate the corresponding dynamic theme. For example, if the component style is .btn { background: globalToken.colorPrimary}, you only need to inject it into the web page to render the background color of the button corresponding to the lock in the web page to the color specified by the global parameter globalToken.
[0049] By obtaining the component to be rendered; determining the global parameters corresponding to the component to be rendered, and obtaining the first hash corresponding to the global parameters; generating a second hash according to the first hash and the component identifier of the component to be rendered; querying from the cache whether the second hash exists, and if it exists, obtaining the component style corresponding to the second hash from the cache; injecting the component style into the web page, and generating a dynamic theme corresponding to the component to be rendered in the web page. When there are components in the surface that need to be repeatedly rendered, there is no need to recalculate whether the entire CSS has changed, so that the overall calculation content can be skipped, saving computing resources and improving the rendering efficiency of the theme.
[0050] In one embodiment, when the first hash corresponding to the global parameter is calculated, it is also possible to query whether the first hash exists from the cache. If it does not exist, it means that the global parameter is actually used in rendering for the first time. Therefore, a correspondence between the first hash and the global parameter can be established and stored in the cache.
[0051] like Figure 2 As shown, Figure 2 A schematic diagram of a method for obtaining the first hash provided in an embodiment of this specification. In this schematic diagram, when the first hash cannot be found in the cache, the global parameters can be calculated based on the benchmark parameters and the subject algorithm, and the global parameters and the name of the subject algorithm are merged, so that the calculated hash value is used as the first hash, and a key-value pair relationship between the first hash and the global parameters is established and stored in the cache. So that when it is needed again in the future, the first hash and the corresponding global parameters can be directly obtained from the cache.
[0052] In one embodiment, when determining the global parameters, the component to be rendered may generate the global parameters corresponding to the component to be rendered based on the baseline parameters and the preset theme algorithm. That is, first obtain the baseline parameters of the page, and then calculate the global parameters based on the baseline parameters and the preset theme algorithm; or, the global parameters may be directly obtained from the page. For example, for each page, the global parameters used have been given in advance and stored, and for this page, the global parameters used by any component to be rendered are the same, so the global parameters corresponding to the component to be rendered can be directly obtained from the storage.
[0053] In one embodiment, the cache is queried to see whether the component style corresponding to the hash exists. If not, a second hash can be generated based on the first hash and the component identifier of the component to be rendered; a component style is generated based on the preset theme algorithm and the global parameters; a correspondence between the second hash and the component style is established and stored in the cache.
[0054] like Figure 3 As shown, Figure 3 A schematic diagram of generating a second hash and component style provided in an embodiment of this specification. In this schematic diagram, when the second hash cannot be found, it means that the corresponding component style also does not exist in the cache. Therefore, the corresponding component style needs to be generated.
[0055] For example, the component style can be calculated according to the global parameter Gloabl Token (for example, the global parameter provides the primary color, hover color, and active color, then the corresponding component styles need to be generated, such as the background color of the button.btn {background: globalToken.colorPrimary}, the hover color of the button btn:hover {globalToken.colorPrimaryHover}, the active color of the button btn:active {globalToken.colorPrimaryActive}, etc.
[0056] At the same time, a second hash may be generated based on the first hash and the component identifier of the component to be rendered. Assuming that the generated second hash value is hash2, a key-value pair relationship between the second hash and the aforementioned component style may be established in memory with hash2 as the key, and the form may be (hash2, .btn { background:globalToken.colorPrimary}), and stored.
[0057] Therefore, when hash2 is needed to be queried from the cache later, the corresponding component style can be obtained as ".btn{ background: globalToken.colorPrimary}". This component style gives the background color of the button based on the global parameters. It only needs to inject this component style into the web page and apply it to the component to be rendered. The final dynamic theme can be the button corresponding to the component to be rendered with the background color given by the global parameter globalToken, thereby achieving fast rendering.
[0058] In actual applications, at the beginning of this solution (i.e., initialization), the cache does not need to store any hash values, component styles, and corresponding relationships. As the number of component renderings increases, the component styles used by the rendered components and the corresponding second hashes and the corresponding relationship between the two will gradually be added to the cache, so that subsequent repeated renderings do not need to be recalculated.
[0059] At the application level, dynamic style calculations such as CSS-in-JS involve multiple factors, including props, context, useRequest, and so on. Therefore, whether the final CSS style generated in the conventional way has changed needs to be determined by calculating the hash of the final CSS style. The hash of the final style is unknown until the final style is generated. Therefore, each time after the final style is generated, the hash value of the final style needs to be calculated to determine whether it needs to be updated. In the entire process of this solution, when rendering at the component level, it is no longer necessary to calculate the hash value of the final CSS style to determine whether the overall style has changed.
[0060] In one embodiment, in order to achieve faster rendering, some commonly used components may be initialized and rendered in advance, that is, some commonly used components may be regarded as preset components, and the preset component styles used by the preset components may also be directly determined in advance.
[0061] Therefore, a second hash can be generated in advance according to the first hash and the identifier of the preset component, so that a corresponding relationship between the second hash and the preset component style can be established in the above manner, and the corresponding relationship is stored in the cache with the second hash value as the key. When a user renders a web page for the first time, the component styles used by those commonly used components can basically be obtained from the preset component styles, so that the rendering can be initialized faster in advance.
[0062] Based on the same idea, one or more embodiments of this specification also provide devices and equipment corresponding to the above method.
[0063] In the second aspect, Figure 4 As shown, Figure 4 A schematic diagram of a component-based dynamic theme generation device provided in an embodiment of this specification, the device comprising:
[0064] Acquisition module 401, acquiring the component to be rendered;
[0065] The determination module 403 determines the global parameters corresponding to the component to be rendered, and obtains the first hash corresponding to the global parameters;
[0066] A generating module 405 generates a second hash according to the first hash and the component identifier of the component to be rendered;
[0067] A query module 407 queries the cache to determine whether the second hash exists, and if so, obtains the component style corresponding to the second hash from the cache;
[0068] The injection module 409 injects the component style into the web page, and generates a dynamic theme corresponding to the component to be rendered in the web page.
[0069] Optionally, the determination module 403 obtains an algorithm identifier of a preset subject algorithm; and generates a first hash according to the global parameters and the algorithm identifier.
[0070] Optionally, the device also includes a second hash pre-storage module 411, which queries from the cache whether the component style corresponding to the hash exists. If not, a second hash is generated based on the first hash and the component identifier of the component to be rendered; a component style is generated based on the preset theme algorithm and the global parameters; a correspondence between the second hash and the component style is established, and stored in the cache.
[0071] Optionally, the determination module 403 generates global parameters corresponding to the component to be rendered according to the benchmark parameters and the preset theme algorithm.
[0072] Optionally, the determination module 403 determines a parameter name included in the global parameter, and generates a first hash according to the parameter name and the algorithm identifier.
[0073] Optionally, the determining module 403 queries the cache whether the first hash exists, and if not;
[0074] A corresponding relationship between the first Hash and the global parameter is established and stored in the cache.
[0075] Optionally, the device also includes an initialization module 413, which obtains a preset component and determines a preset component style corresponding to the preset component; generates a second hash based on the first hash and the identifier of the preset component; establishes a correspondence between the second hash and the preset component style, and stores it in the cache.
[0076] In the third aspect, Figure 5 As shown, Figure 5 A schematic diagram of the structure of an electronic device provided in an embodiment of this specification, the device includes:
[0077] at least one processor; and,
[0078] a memory communicatively connected to the at least one processor; wherein,
[0079] The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform the method according to the first aspect or the second aspect.
[0080] In the fourth aspect, based on the same idea, the embodiments of this specification also provide a non-volatile computer storage medium corresponding to the above method, storing computer executable instructions. When the computer reads the computer executable instructions in the storage medium, the instructions enable one or more processors to execute the method described in the first aspect or the second aspect.
[0081] In the 1990s, it was very clear whether the improvement of a technology was hardware improvement (for example, improvement of the circuit structure of diodes, transistors, switches, etc.) or software improvement (improvement of the method flow). However, with the development of technology, many improvements of the method flow today can be regarded as direct improvements of the hardware circuit structure. Designers almost always obtain the corresponding hardware circuit structure by programming the improved method flow into the hardware circuit. Therefore, it cannot be said that the improvement of a method flow cannot be implemented with hardware entity modules. For example, a programmable logic device (PLD) (such as a field programmable gate array (FPGA)) is such an integrated circuit whose logical function is determined by the user's programming of the device. Designers can "integrate" a digital system on a PLD by programming it themselves, without having to ask chip manufacturers to design and make dedicated integrated circuit chips. Moreover, nowadays, instead of manually making integrated circuit chips, this kind of programming is mostly implemented by "logic compiler" software, which is similar to the software compiler used when developing and writing programs, and the original code before compilation must also be written in a specific programming language, which is called hardware description language (HDL). There is not only one kind of HDL, but many kinds, such as ABEL (Advanced Boolean Expression Language), AHDL (Altera Hardware Description Language), Confluence, CUPL (Cornell University Programming Language), HDCal, JHDL (Java Hardware Description Language), Lava, Lola, MyHDL, PALASM, RHDL (Ruby Hardware Description Language), etc. The most commonly used ones are VHDL (Very-High-Speed Integrated Circuit Hardware Description Language) and Verilog. Those skilled in the art should also know that it is only necessary to program the method flow slightly in the above-mentioned hardware description languages and program it into the integrated circuit, and then it is easy to obtain the hardware circuit that implements the logic method flow.
[0082] The controller may be implemented in any suitable manner, for example, the controller may take the form of a microprocessor or processor and a computer-readable medium storing a computer-readable program code (such as software or firmware) executable by the (micro)processor, a logic gate, a switch, an application-specific integrated circuit (ASIC), a programmable logic controller, and an embedded microcontroller. Examples of controllers include, but are not limited to, the following microcontrollers: ARC 625D, Atmel AT91SAM, Microchip PIC18F26K20, and Silicone Labs C8051F320. The memory controller may also be implemented as part of the control logic of the memory. It is also known to those skilled in the art that, in addition to implementing the controller in a purely computer-readable program code manner, the controller may be implemented in the form of a logic gate, a switch, an application-specific integrated circuit, a programmable logic controller, and an embedded microcontroller by logically programming the method steps. Therefore, such a controller may be considered as a hardware component, and the devices for implementing various functions included therein may also be considered as structures within the hardware component. Or even, the devices for implementing various functions may be considered as both software modules for implementing the method and structures within the hardware component.
[0083] The systems, devices, modules or units described in the above embodiments may be implemented by computer chips or entities, or by products with certain functions. A typical implementation device is a computer. Specifically, the computer may be, for example, a personal computer, a laptop computer, a cellular phone, a camera phone, a smart phone, a personal digital assistant, a media player, a navigation device, an email device, a game console, a tablet computer, a wearable device, or a combination of any of these devices.
[0084] For the convenience of description, the above device is described in various units according to their functions. Of course, when implementing this specification, the functions of each unit can be implemented in the same or multiple software and / or hardware.
[0085] Those skilled in the art will appreciate that the embodiments of this specification may be provided as methods, systems, or computer program products. Therefore, the embodiments of this specification may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, the embodiments of this specification may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program codes.
[0086] This specification is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of this specification. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.
[0087] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture including an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.
[0088] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.
[0089] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.
[0090] The memory may include non-permanent storage in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. The memory is an example of a computer-readable medium.
[0091] Computer readable media include permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. Information can be computer readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer readable media does not include temporary computer readable media (transitory media), such as modulated data signals and carrier waves.
[0092] It should also be noted that the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, commodity or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, commodity or device. In the absence of more restrictions, the elements defined by the sentence "comprises a ..." do not exclude the existence of other identical elements in the process, method, commodity or device including the elements.
[0093] This specification may be described in the general context of computer-executable instructions executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform specific tasks or implement specific abstract data types. This specification may also be practiced in distributed computing environments where tasks are performed by remote processing devices connected through a communication network. In a distributed computing environment, program modules may be located in local and remote computer storage media including storage devices.
[0094] Each embodiment in this specification is described in a progressive manner, and the same or similar parts between the embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the device, equipment, and non-volatile computer storage medium embodiments, since they are basically similar to the method embodiments, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.
[0095] The above is a description of a specific embodiment of the specification. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recorded in the claims can be performed in an order different from that in the embodiments and still achieve the desired results. In addition, the processes depicted in the drawings do not necessarily require the specific order or continuous order shown to achieve the desired results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.
[0096] The above description is only one or more embodiments of this specification and is not intended to limit this specification. For those skilled in the art, one or more embodiments of this specification may have various changes and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of one or more embodiments of this specification shall be included in the scope of the claims of this specification.
Claims
1. A component-based dynamic theme generation method, the method comprising: Get the component to be rendered; Determine the global parameters corresponding to the component to be rendered, and obtain a first hash corresponding to the global parameters; Generate a second hash according to the first hash and the component identifier of the component to be rendered; Querying the cache whether the second hash exists, and if so, obtaining the component style corresponding to the second hash from the cache; The component style is injected into a web page, and a dynamic theme corresponding to the component to be rendered is generated in the web page.
2. The method of claim 1, wherein: Obtaining a first hash corresponding to the global parameter includes: Get the algorithm identifier of the preset subject algorithm; A first hash is generated according to the global parameter and the algorithm identifier.
3. The method of claim 2, wherein: The method further comprises: Querying the cache whether the component style corresponding to the second hash exists, and if not, generating a second hash according to the first hash and the component identifier of the component to be rendered; Generate a component style according to the preset theme algorithm and the global parameters; A correspondence between the second hash and the component style is established and stored in the cache.
4. The method of claim 2, wherein: Determining the global parameters corresponding to the component to be rendered includes: Generate global parameters corresponding to the component to be rendered according to the benchmark parameters and the preset theme algorithm.
5. The method of claim 2, wherein: Generating a first hash according to the global parameter and the algorithm identifier includes: Determine a parameter name included in the global parameter, and generate a first Hash according to the parameter name and the algorithm identifier.
6. The method of claim 1, wherein: Obtaining a first hash corresponding to the global parameter includes: querying the cache whether the first hash exists, and if not; A corresponding relationship between the first Hash and the global parameter is established and stored in the cache.
7. The method of claim 6, wherein: The method further comprises: Obtain a preset component, and determine a preset component style corresponding to the preset component; Generate a second hash according to the first hash and the identifier of the preset component; A correspondence between the second hash and the preset component style is established and stored in the cache.
8. A component-based dynamic theme generation device, the device comprising: Get the module and the component to be rendered; A determination module determines a global parameter corresponding to the component to be rendered, and obtains a first hash corresponding to the global parameter; A generation module, generating a second hash according to the first hash and the component identifier of the component to be rendered; A query module, querying from a cache whether the second hash exists, and if so, obtaining a component style corresponding to the second hash from the cache; The injection module injects the component style into the web page, and generates a dynamic theme corresponding to the component to be rendered in the web page.
9. An electronic device, comprising: at least one processor; as well as, a memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform the method according to any one of claims 1 to 7.
