An assembly style application method and related apparatus

Abstract

The application provides an application method of a component style and related devices, and the method comprises the following steps: compiling a source code file to obtain a compiled file; the source code file comprises a first attribute, a value of the first attribute, a second attribute and a value of the second attribute, the first attribute and the second attribute are the same, and the value of the first attribute and the value of the second attribute are the same; the compiled file comprises a first index; obtaining a style of a first component and a style of a second component according to the first index, the first component and the second component are determined according to the compiled file; the style of the first component and the style of the second component are determined according to the first attribute and the value of the first attribute, the style of the first component is applied to the first component; and the style of the second component is applied to the second component. The system performance is improved by implementing the embodiment of the application.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a method and apparatus for applying a component style. Background Technology

[0002] Currently, the front-end development process can be referenced. Figure 1 or Figure 2 ,like Figure 1 or Figure 2 As shown, the front-end development process can be as follows: Developers write front-end source code files, and then use compilation chain tools (such as toolchains and packaging tools) to compile the front-end source code files to output compiled JS (JavaScript) files. Then, the JS framework and JS engine running on the browser or device load, parse, and execute the compiled JS files, and finally display the World Wide Web (Web) page on the browser or device. For example, the HarmonyOperation System (OS) can provide a lightweight adaptive communication environment (ACE) development framework. Developers can write cascading style sheets (CSS), Harmony markup language (HML), and JS source code files using a web-like development approach. The compilation chain tools provided with ACE can integrate and compile the CSS / HML / JS source code files into a executable JS file (the executable JS file is the packaged CSS / HML / JS source code file). When the JS framework runs, it can execute the executable JS file and use it to build components. Then, the styles set in the CSS / HML files can be applied to the components for display in a browser or on a device.

[0003] Generally, CSS / HTML / JS source code files may contain the same styles for different components, meaning they may share the same properties and values. However, during compilation, all styles in the CSS / HTML / JS source code file are often compiled. In this case, the same styles for different components still exist in the compiled CSS / HTML / JS source code file. Therefore, when iterating through the same styles for different components, the corresponding styles for those components will still be generated. This results in the repeated generation of the same styles for different components, which impacts system performance. Summary of the Invention

[0004] This application provides a method and related apparatus for applying component styles, which improves system performance.

[0005] Firstly, a method for applying component styles is provided, including:

[0006] The source code file is compiled to obtain a compiled file; wherein, the source code file includes a first attribute, a value of the first attribute, a second attribute, and a value of the second attribute, the first attribute and the second attribute being the same, and the value of the first attribute and the value of the second attribute being the same; the compiled file includes a first index;

[0007] The style of the first component is obtained based on the first index;

[0008] The style of the second component is obtained according to the first index, wherein both the first component and the second component are determined according to the compiled file; the styles of the first component and the second component are both determined according to the first attribute and the value of the first attribute; or, the styles of the first component and the second component are both determined according to the second attribute and the value of the second attribute.

[0009] Apply the style of the first component to the first component;

[0010] Apply the style of the second component to the second component.

[0011] As can be seen, in the above technical solution, by compiling the source code file to obtain a compiled file, the style of the first component and the component style of the second page are obtained according to the first index included in the compiled file. The first attribute and the second attribute are identical, and the values ​​of the first attribute and the second attribute are also identical. The styles of both the first and second components are determined based on the first attribute and its value; or, the styles of both the first and second components are determined based on the second attribute and its value. This allows the same style (i.e., attribute and attribute value) corresponding to different components to be obtained based on the index, avoiding the repeated generation of the same style for different components and improving system performance. Simultaneously, using the index avoids the presence of identical styles corresponding to different components in the compiled file, thus reducing the size of the compiled file and the time spent loading the compiled file during the parsing and execution phase, thereby improving system performance. Furthermore, applying the same styles corresponding to different components to their respective components improves the efficiency of style application to components because it eliminates the need for repeated generation of the same styles for different components.

[0012] Optional,

[0013] Before obtaining the style of the first component based on the first index, the method further includes:

[0014] The source code file also includes a third attribute and a value of the third attribute, wherein the first attribute and the third attribute are different, or the second attribute and the third attribute are different; the compiled file also includes the third attribute;

[0015] Allocate a first storage area for storing all attributes in the compiled file. The size of the first storage area is determined based on the length of a fourth attribute, which is the attribute with the longest length among the first and third attributes, or the attribute with the longest length among the second and third attributes. The length of the attribute is the length of the string used to indicate the attribute.

[0016] As can be seen, in the above technical solution, when the source code file includes a third attribute different from the first or second attribute, a first storage area can be allocated. This first storage area stores all attributes in the compiled file, and its size is determined by the length of the fourth attribute. This allows different attributes to reuse the same memory, avoiding the need to repeatedly allocate different storage areas for attributes, reducing memory operations, and thus improving the efficiency of applying styles to components. Furthermore, since the fourth attribute is the longest attribute, the allocated first storage area can meet the storage needs of different attributes.

[0017] Optionally, the first index includes a first character, a second character, and a third character, wherein the first character is used to index the general element matrix, the second character is used to index the style of the first component in the row of the general element matrix, and the third character is used to index the style of the first component in the column of the general element matrix.

[0018] Optionally, the first index includes a first character, a second character, and a third character, wherein the first character is used to index the general element matrix, the second character is used to index the style of the second component in the row of the general element matrix, and the third character is used to index the style of the second component in the column of the general element matrix.

[0019] Optionally, the generic element matrix includes generic element tags, each generic element tag being associated with at least one style, the at least one style including either the style of the first component or the style of the second component. Optionally, the compiled file does not include the same attributes and attribute values ​​as those provided by the front-end framework.

[0020] As can be seen, in the above technical solution, because the compiled files do not include the same attributes and attribute values ​​as those provided by the front-end framework, the process of creating styles based on the default attributes and attribute values ​​provided by the front-end framework is avoided, thereby improving system performance. At the same time, because the compiled files do not include the same attributes and attribute values ​​as those provided by the front-end framework, the size of the compiled files is reduced, the time spent loading the compiled files is decreased, and thus system performance is further improved.

[0021] Secondly, a component-style application device is provided, the device comprising a processing module and an acquisition module.

[0022] The processing module is used to compile the source code file to obtain a compiled file; wherein, the source code file includes a first attribute, a value of the first attribute, a second attribute, and a value of the second attribute, the first attribute and the second attribute being the same, and the value of the first attribute and the value of the second attribute being the same; the compiled file includes a first index;

[0023] The acquisition module is used to acquire the style of the first component based on the first index;

[0024] The acquisition module is used to acquire the style of the second component according to the first index, wherein both the first component and the second component are determined according to the compiled file; the styles of the first component and the second component are both determined according to the first attribute and the value of the first attribute; or, the styles of the first component and the second component are both determined according to the second attribute and the value of the second attribute.

[0025] The processing module is used to apply the style of the first component to the first component;

[0026] The processing module is used to apply the style of the second component to the second component.

[0027] Optional,

[0028] Before obtaining the style of the first component based on the first index, the source code file also includes a third attribute and the value of the third attribute, wherein the first attribute and the third attribute are different, or the second attribute and the third attribute are different; the compiled file also includes the third attribute;

[0029] The processing module is further configured to allocate a first storage area, which is used to store all attributes in the compiled file. The size of the first storage area is determined based on the length of a fourth attribute, which is the attribute with the longest length among the first attribute and the third attribute, or the fourth attribute is the attribute with the longest length among the second attribute and the third attribute. The length of the attribute is the length of the string used to indicate the attribute.

[0030] Optionally, the first index includes a first character, a second character, and a third character, wherein the first character is used to index the general element matrix, the second character is used to index the style of the first component in the row of the general element matrix, and the third character is used to index the style of the first component in the column of the general element matrix.

[0031] Optionally, the first index includes a first character, a second character, and a third character, wherein the first character is used to index the general element matrix, the second character is used to index the style of the second component in the row of the general element matrix, and the third character is used to index the style of the second component in the column of the general element matrix.

[0032] Optionally, the generic element matrix includes generic element tags, each generic element tag being associated with at least one style, the at least one style including either the style of the first component or the style of the second component. Optionally, the compiled file does not include the same attributes and attribute values ​​as those provided by the front-end framework.

[0033] Thirdly, a communication device is provided, comprising a processor and a memory, wherein the processor invokes a computer program stored in the memory to implement the method as described in any of the first aspects.

[0034] In one possible design, the communication device may be a chip that implements the method in the first aspect or a device containing a chip.

[0035] Fourthly, a computer-readable storage medium is provided, wherein a computer program is stored therein, and when the computer program is run, it implements the method as described in any of the first aspects. Attached Figure Description

[0036] The accompanying drawings used in the description of the embodiments or prior art will be briefly introduced below.

[0037] in:

[0038] Figure 1 This is a diagram illustrating the front-end development process.

[0039] Figure 2 This is another diagram illustrating the front-end development process;

[0040] Figure 3 This is another diagram illustrating the front-end development process;

[0041] Figure 4 This refers to a portion of the code in a CSS / HTML / JS source file.

[0042] Figure 5 Part of the compiled code from CSS / HTML / JS source files;

[0043] Figure 6 The diagram shown is a hardware structure schematic of a communication device applicable to the embodiments of this application;

[0044] Figure 7 A flowchart illustrating a method for applying a component style according to an embodiment of this application;

[0045] Figure 8A A schematic diagram of a portion of code in a compiled file provided for an embodiment of this application;

[0046] Figure 8B A schematic diagram of a portion of code in another compiled file provided in an embodiment of this application;

[0047] Figure 9 A diagram illustrating the application of the same style to different components;

[0048] Figure 10A A flowchart illustrating another method for applying a component style as provided in an embodiment of this application;

[0049] Figure 10B A flowchart illustrating another method for applying a component style as provided in an embodiment of this application;

[0050] Figure 10C A flowchart illustrating another method for applying a component style as provided in an embodiment of this application;

[0051] Figure 11 This is a schematic diagram of the structure of an application device with a component style provided in an embodiment of this application. Detailed Implementation

[0052] The technical solutions in the embodiments of this application will be described below with reference to the accompanying drawings. The terms "system" and "network" in the embodiments of this application can be used interchangeably. Unless otherwise stated, " / " indicates that the objects before and after are in an "or" relationship; for example, A / B can represent A or B. "And / or" in this application is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A alone, A and B simultaneously, and B alone, where A and B can be singular or plural. Furthermore, in the description of this application, unless otherwise stated, "multiple" refers to two or more. "At least one of the following" or similar expressions refer to any combination of these items, including any combination of single or plural items. For example, at least one of a, b, or c can represent: a, b, c, ab, ac, bc, or abc, where a, b, and c can be single or multiple. Furthermore, to facilitate a clear description of the technical solutions in the embodiments of this application, the terms "first" and "second" are used in the embodiments of this application to distinguish identical or similar items with substantially the same function and effect. Those skilled in the art will understand that the terms "first" and "second" do not limit the quantity or execution order, and the terms "first" and "second" are not necessarily different.

[0053] References to "one embodiment" or "some embodiments" in the embodiments described in this application mean that one or more embodiments of this application include a specific feature, structure, or characteristic described in connection with that embodiment. Therefore, the phrases "in one embodiment," "in some embodiments," "in other embodiments," "in still other embodiments," etc., appearing in different parts of this specification do not necessarily refer to the same embodiment, but rather mean "one or more, but not all, embodiments," unless otherwise specifically emphasized. The terms "comprising," "including," "having," and variations thereof mean "including but not limited to," unless otherwise specifically emphasized.

[0054] The following is an explanation of some of the terms used in this application.

[0055] 1. Source code file

[0056] In this application, source code files can be understood as source code files written in a computer language.

[0057] In this application, the source code file can be implemented in any of the following ways:

[0058] Method 1: Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), JavaScript, etc.

[0059] Method 2: Harmony Markup Language (HML), Cascading Style Sheets (CSS), JavaScript, etc.

[0060] 2. Attributes and their values

[0061] Attributes and their values ​​exist as key-value pairs, typically separated by colons. Attributes are style attributes. In this application, attributes can include information such as size, center point, resolution, and color. It is understood that "attribute" is merely a descriptive term and does not limit the scope of this application. For example, an attribute can also be called an "entry," and its value can be called the "value of an entry," but this is a limitation.

[0062] For example, the first and second attributes can be background color; or, the first and second attributes can be width; or, the first and second attributes can be height, etc., without limitation.

[0063] For example, `backgroundcolor: red`, where `backgroundcolor` is the first and second property, and `red` is the value of the first and second properties. Or, `width: 90px`, where `width` is the first and second property, `90` is the value of the first and second properties, and `px` is the unit of pixels. Or, `height: 100`, where `height` is the first and second property, and `100` is the value of the first and second properties. Or, `value: User A's name`, where the first property is `value`, and the value of the first property is the name of User A; there are no restrictions on this.

[0064] Understandably, in this application, styles can be determined based on attributes and their values. The term "style" is merely a descriptive designation and does not limit the scope of this application.

[0065] 3. Components

[0066] A component is user-recognizable content displayed in the user interface (UI). In other words, a component can be understood as a UI component. For example, a component can be an image, text, a button, etc.

[0067] A user interface, or simply interface, is a graphical interface through which an application or operating system interacts and exchanges information with a user. It can be a window, dialog box, display area, etc. In this application, the user interface is understood to be a World Wide Web (Web) page, also known as a webpage. Source code files can be loaded and displayed as webpages by a browser or a webpage display component with similar functionality. A webpage display component is a functional entity used to load and display webpages, acting similarly to a browser.

[0068] 4. Front-end framework

[0069] The front-end framework primarily includes a World Wide Web (WW) development framework oriented towards internet experience. In this application, if the source code files are implemented using method one, the front-end framework can be, for example, the V8 engine or others, without limitation. If the source code files are implemented using method two, the front-end framework can be a framework suitable for the HarmonyOS operating system (OS), such as the Adaptive Communication Environment (ACE) development framework or other frameworks, without limitation.

[0070] The above content briefly explains the meaning of the terms involved in the embodiments of this application. It is intended to help people better understand the technical solutions provided in the embodiments of this application and does not constitute a limitation on the technical solutions provided in the embodiments of this application.

[0071] To facilitate understanding of this application, relevant technical knowledge related to the embodiments of this application is introduced herein.

[0072] Currently, the front-end development process can be referenced. Figure 3 ,like Figure 3 As shown, the front-end development process can be as follows: Developers write front-end source code files, which are then compiled by a compiler (i.e., a compilation chain tool) to output compiled front-end source code files. Next, the compiled front-end source code files are loaded into a JS framework running on the browser or device. The JS framework then parses the compiled front-end source code files, and the JS engine on the browser or device extracts styles one by one and applies them to components. Finally, the code is displayed, i.e., the view (web page) is shown on the browser or device. This is the current approach used on all lightweight devices that support JS applications.

[0073] Generally, CSS / HTML / JS source code files may contain the same styles for different components; that is, the CSS / HTML / JS source code files may contain the same properties and values ​​for different components. For example, see [link to example]. Figure 4 ( Figure 4 (This refers to a portion of the code in the CSS / HTML / JS source file.) Figure 4 In the developer.hml file (which displays the music playlist and song information, with each music item wrapped in a div), the three attributes selected with solid lines and their values ​​are identical except for `top` (height) and its value. For example, the three `width` attributes selected with solid lines and their values ​​are identical, as are the three attributes selected with dashed lines. Figure 4 In the developer's .css file (which styles the selectors for song names and artists, setting font size, length, width, top margin, left margin, and color style), the font-size, width, height, and margin-left values ​​in the selectors itemName and itemSonger are identical. However, when CSS / HTML / JS source code files are compiled, all styles in the file are often compiled. In this case, the same styles corresponding to different components in the compiled CSS / HTML / JS source code file still exist. For example, see... Figure 5 , Figure 5 for Figure 4 The compiled files corresponding to the developer.hml and developer.css files. For example... Figure 5 As shown, in Figure 5 Static styles (i.e.) Figure 4 In the compiled code corresponding to the developer's .hml file, Figure 4 The three identical styles selected with solid lines in the developer's .hml file still exist; Figure 5 Selector styles (i.e.) Figure 4 In the compiled code corresponding to the developer's .css file, the same styles for the selectors itemName and itemSonger still exist. Therefore, when iterating through different components and encountering the same style, the style for that component will still be determined. This means repeatedly determining the same style for different components, which reduces system performance and leads to inefficient style determination.

[0074] Based on this, this application proposes a method for applying component styles to solve the above problems. The following is a detailed description of the embodiments of this application.

[0075] It should be understood that the technical solutions of the embodiments of this application can be applied to electronic devices, such as mobile phones, tablets, wearable devices (e.g., watches), in-vehicle devices, augmented reality (AR) / virtual reality (VR) devices, laptops, ultra-mobile personal computers (UMPCs), personal computers (PCs), netbooks, personal digital assistants (PDAs), and other mobile terminals, as well as Internet of Things (IoT) devices. The embodiments of this application do not impose any restrictions on the specific type of electronic device.

[0076] Understandably, in this application, an electronic device may run a compiler (or compilation chain tool), a front-end framework (JS engine), and web page display components.

[0077] For example, the above-mentioned electronic device can be used Figure 6 This is achieved through the communication device 600. Figure 6 The diagram shows a hardware structure applicable to the communication device provided in the embodiments of this application. The communication device 600 includes at least one processor 601, a communication line 602, a memory 603, and at least one communication interface 604.

[0078] The processor 601 may be a general-purpose central processing unit (CPU), a microprocessor, an application-specific integrated circuit (ASIC), or one or more integrated circuits used to control the execution of the program of the present application.

[0079] Communication line 602 may include a path for transmitting information between the aforementioned components.

[0080] Communication interface 604 is any transceiver-like device (such as an antenna) used to communicate with other devices or communication networks, such as Ethernet, RAN, wireless local area networks (WLAN), etc.

[0081] The memory 603 may be a read-only memory (ROM) or other type of static storage device capable of storing static information and instructions, random access memory (RAM) or other type of dynamic storage device capable of storing information and instructions, or it may be an electrically erasable programmable read-only memory (EEPROM), a compact disc read-only memory (CD-ROM) or other optical disc storage, optical disc storage (including compressed optical discs, laser discs, optical discs, digital universal optical discs, Blu-ray discs, etc.), magnetic disk storage media or other magnetic storage devices, or any other medium capable of carrying or storing desired program code in the form of instructions or data structures and accessible by a computer, but is not limited thereto. The memory may exist independently and be connected to the processor via communication line 602. The memory may also be integrated with the processor. The memory provided in the embodiments of this application may generally be non-volatile.

[0082] The memory 603 stores computer execution instructions for implementing the scheme of this application, and its execution is controlled by the processor 601. The processor 601 executes the computer execution instructions stored in the memory 603 to implement the method provided in the following embodiments of this application.

[0083] Optionally, the computer execution instructions in the embodiments of this application may also be referred to as application code, and the embodiments of this application do not specifically limit this.

[0084] In one possible implementation, processor 601 may include one or more CPUs, for example... Figure 6 CPU0 and CPU1 in the CPU.

[0085] In one possible implementation, the communication device 600 may include multiple processors, such as... Figure 6 Processors 601 and 607 are described herein. Each of these processors may be a single-core (single-CPU) processor or a multi-core (multi-CPU) processor. A processor here may refer to one or more devices, circuits, and / or processing cores used to process data (e.g., computer program instructions).

[0086] In one possible implementation, the communication device 600 may further include an output device 605 and an input device 606. The output device 605 communicates with the processor 601 and can display information in various ways. For example, the output device 605 may be a liquid crystal display (LCD), a light-emitting diode (LED) display device, a cathode ray tube (CRT) display device, or a projector, etc. The input device 606 communicates with the processor 601 and can receive user input in various ways. For example, the input device 606 may be a mouse, keyboard, touchscreen device, or sensing device, etc.

[0087] The aforementioned communication device 600 can be a general-purpose device or a dedicated device. In specific implementations, the communication device 600 can be a desktop computer, a portable computer, a network server, a handheld digital assistant (PDA), a mobile phone, a tablet computer, a wireless terminal device, an embedded device, or something similar. Figure 6 Devices with similar structures. This application does not limit the type of communication device 600 to any particular embodiment.

[0088] The following, in conjunction with the accompanying drawings, explains how the technical solution provided in the embodiments of this application specifically reduces the size of the compiled file.

[0089] See Figure 7 , Figure 7 This is a flowchart illustrating a method for applying a component style according to an embodiment of this application. Figure 7 As shown, the method includes, but is not limited to, the following steps:

[0090] 701. An electronic device compiles a source code file to obtain a compiled file; wherein the source code file includes a first attribute, a value of the first attribute, a second attribute, and a value of the second attribute, the first attribute and the second attribute being the same, and the value of the first attribute and the value of the second attribute being the same; the compiled file includes a first index.

[0091] The source code file, the first attribute, the value of the first attribute, the second attribute, and the value of the second attribute can be referred to the relevant descriptions above, and will not be repeated here. Optionally, in this application, the source code file can be the source code file corresponding to the same webpage.

[0092] Optionally, in this application, the index can be implemented as a string or as a placeholder; there is no restriction. For example, the first index can be implemented as a string; or, the first index can be implemented as a placeholder.

[0093] For example, if the first index can be implemented in the form of a string, see [reference needed]. Figure 8A , Figure 8A This is a schematic diagram of a portion of code in a compiled file provided as an embodiment of this application. For example... Figure 8A As shown, the first index can be, for example, global_value.value_userA's name_3. The electronic device can obtain the style of the first component or the style of the second component through global_value.value_userA's name_3. For example, the style of both the first and second components is determined based on the first attribute (which is value) and its value (which can be userA's name). Alternatively, the first index can be, for example, global_static_style.backgroundcolor_62850_3. The electronic device can obtain the style of the first component or the style of the second component through global_static_style.backgroundcolor_62850_3. `lor_62850_3` retrieves the style of either the first or second component. This style is based on the second attribute (which is `backgroundcolor`) and its value (which can be 62850). Alternatively, the first index can be, for example, `global_selector_style.width_400_4`. The electronic device retrieves the style of either the first or second component through `global_selector_style.width_400_4`, where the style is based on the first attribute (which is `width`) and its value (which can be 400). It should be noted that in `global_value.value_userA's_name_3`, the '3' represents the attribute `value`, which is the number of times user A's name appears in the compiled file. Similarly, in global_static_style.backgroundcolor_62850_3, the '3' represents the number of times the backgroundcolor attribute with a value of 62850 appears in the compiled file, and in global_selector_style.width_400_4, the '4' represents the number of times the width attribute with a value of 400 appears in the compiled file.

[0094] Optionally, the first index includes a first character, a second character, and a third character. The first character is used to index the general element matrix, the second character is used to index the row of the style of the first component in the general element matrix, and the third character is used to index the column of the style of the first component in the general element matrix. Optionally, the general element matrix includes general element tags, each of which is associated with at least one style, which includes the style of the first component.

[0095] The first character can be, for example, $ or other characters, and the second and third characters can be natural numbers.

[0096] Understandably, if the first index is implemented as a placeholder, for example, the first index can take the form of: first character_second character_third character.

[0097] Optionally, the first index includes a first character, a second character, and a third character. The first character is used to index the general element matrix, the second character is used to index the style of the second component in the row of the general element matrix, and the third character is used to index the style of the second component in the column of the general element matrix. Optionally, the general element matrix includes general element tags, each of which is associated with at least one style, which includes the style of the second component.

[0098] In this application, the generic element tag can be located in the first column of the generic element matrix. It is understood that the generic element tag is separated from at least one of the aforementioned styles by a colon.

[0099] For example, see Figure 8B , Figure 8B This is a schematic diagram of a portion of code in another compiled file provided in an embodiment of this application. For example... Figure 8B As shown, the first index can be, for example, $_2_0. The electronic device can obtain the style of the first component or the style of the second component through $_2_0. The style of both the first and second components is determined based on the first attribute (which is `value`) and its value (which can be the name of user A). Alternatively, the first index can be, for example, $_0_1. The electronic device can obtain the style of the first component or the style of the second component through $_0_1. The style of both the first and second components is determined based on the second attribute (which is `backgroundcolor`) and its value (which can be 62850). Or, the first index can be, for example, $_1_0. The electronic device can obtain the style of the first component or the style of the second component through $_1_0. The style of both the first and second components is determined by the first attribute (which is `width`) and its value (which can be 400). It should be noted that the '$' in $_2_0, $_0_1, and $_1_0 is used to represent... Figure 8B In the context of `global_common`, the universal element matrix can be... Figure 8B The `global_common` element matrix contains elements such as the `static_style` tag, which is the common element in the first row and first column of the `global_common` element matrix. The attributes and values ​​associated with `static_style` are separated by colons after `static_style`; for example, `static_style` is associated with `backgroundcolor_62850_3`, `width_408_3`, etc.

[0100] Optionally, the source code file also includes a third attribute and its value. The first and third attributes are different, or the second and third attributes are different. Step 701 may include: the electronic device compiles the source code file in descending order according to the attribute pairs and their lengths to obtain a compiled file. Here, an attribute pair includes an attribute and its value; for example, a first attribute and its value can be considered an attribute pair. The length of the attribute is the length of the string used to indicate the attribute. For example, if the first attribute is width, its length is 5.

[0101] For example, the style of the first component can also be determined based on the third attribute and its value. If the first attribute is `top` with a value of 408, and the third attribute is `width` with a value of 100, then in the compiled file, the third attribute and its value will be positioned before the first attribute and its value, as shown in the following code:

[0102] _c('text',{'attrs':{'value':"User A's name"},

[0103] 'staticStyle':{'width':408,'top':100},}).

[0104] As can be seen, in the above technical solution, when the source code file also includes a third attribute that is different from the first or second attribute, the source code file is compiled in descending order according to the length of the attribute, that is, the source code file is compiled in order of string length from longest to shortest.

[0105] Optionally, the compiled files may not include the same properties and property values ​​as those provided by the front-end framework. The front-end framework can be found in the description above and will not be elaborated upon here.

[0106] For example, in combination Figure 4 Assuming Figure 4The backgroundcolor property value in the code is the same as the backgroundcolor property value provided by the front-end framework, while... Figure 5 The `backgroundcolor` property value still exists in existing technologies. This means that existing technologies don't distinguish whether the styles set by the developer are default values ​​provided by the front-end framework; they still parse the property and set it on the corresponding component, wasting execution time. In this application, because the compiled file does not include the same properties and values ​​as those provided by the front-end framework, the process of creating styles based on the default properties and values ​​provided by the front-end framework is avoided, thus improving system performance. At the same time, because the compiled file does not include the same properties and values ​​as those provided by the front-end framework, the size of the compiled file is reduced, decreasing the time spent loading the compiled file, thereby improving system performance. Furthermore, by removing the default values ​​provided by the front-end framework from the compiled file, the styles set by the developer are validated, saving execution time.

[0107] 702. The electronic device obtains the style of the first component based on the first index.

[0108] The number of the first component can be one or more, for example, and there is no limit to the number of components.

[0109] Optionally, before step 702, the method may further include: the source code file also includes a third attribute and the value of the third attribute, the first attribute and the third attribute are different, or the second attribute and the third attribute are different; the compiled file also includes a third attribute; the electronic device allocates a first storage area, the first storage area is used to store all attributes in the compiled file, the size of the first storage area is determined according to the length of the fourth attribute, the fourth attribute is the attribute with the longest length among the first attribute and the third attribute, or the fourth attribute is the attribute with the longest length among the second attribute and the third attribute, the length of the attribute is the length of the string used to indicate the attribute.

[0110] For example, if the fourth attribute is width and the length of the fourth attribute is 5, the size of the first storage area can be 5 bits.

[0111] Optionally, the first storage area is a storage area on the stack.

[0112] As can be seen, in the above technical solution, when the source code file includes a third attribute different from the first or second attribute, a first storage area can be allocated. This first storage area stores all attributes in the compiled file, and its size is determined by the length of the fourth attribute. This allows different attributes to reuse the same memory, avoiding repeated allocation of different storage areas for attributes, reducing memory operations, and thus improving the efficiency of applying styles to components. Furthermore, since the fourth attribute is the longest attribute, the allocated first storage area can meet the storage needs of different attributes. Optionally, after the electronic device allocates the first storage area, the method may further include: the electronic device generating a style for a first component or a style for a second component based on the first attribute and its value, and storing the style of the first component or the style of the second component in the second storage area; or, generating a style for a first component or a style for a second component based on the values ​​of the second and second attributes, and storing the style of the first component or the style of the second component in the second storage area.

[0113] Optionally, the second storage area can be a sub-storage area of ​​the third storage area, which is used to store the general element matrix and is a storage area on the stack in the electronic device. Optionally, the first character in the first index can be used to index the third storage area, the second character in the first index can be used to index the row of the second storage area in the general element matrix, and the third character in the first index can be used to index the column of the second storage area in the general element matrix; there are no restrictions here.

[0114] Optionally, the second and third storage areas are storage areas on the heap.

[0115] The following is combined Figure 9 Explain the beneficial effects of allocating the same storage area to the same style for different components. For example... Figure 9 As shown, for Figure 9 As shown in 901, any two components from Component 1 to Component 3 share the same style. All styles set by the developer for the components are iterated through and applied sequentially. For example, the styles corresponding to each component from Component 1 to Component 3 are iterated from top to bottom and applied to the corresponding component. However, because any two components from Component 1 to Component 3 share the same style, there will be duplicate calculations (the same style requires the electronic device to repeatedly allocate and destroy storage areas for it, i.e., the same style requires the electronic device to repeatedly request and release memory for it). This is further illustrated by... Figure 4 The developer's .hml file is used to illustrate the situation of duplicate calculations. Specifically, it is combined with... Figure 4The developer.hml and developer.css files are used to illustrate the case of duplicate calculations. Case 1: When the selector style application process is not omitted, the pseudocode is as follows:

[0116]

[0117] In case 2, when the selector style application process in the above pseudocode is omitted, the pseudocode can be as follows:

[0118]

[0119]

[0120] Combining Cases 1 and 2 above, it can be seen that each time a style item is applied, iteration occurs, requiring the creation of related styles each time (allocating storage areas for attributes, allocating storage areas for attribute values, storing attributes in storage areas, and storing attribute values ​​in storage areas, thus achieving style creation). After use, related stack data needs to be destroyed (i.e., clearing the styles stored in storage areas), resulting in frequent memory operations and impacting system performance. In this application, the same storage area can be allocated for the same styles across different components, using an index to retrieve the same styles across different components, thus avoiding repeatedly allocating different storage areas for the same styles corresponding to different components. In other words, it achieves the reuse of the same memory for the same styles corresponding to different components, reducing the number of memory operations, improving system performance, and increasing the efficiency of style application to components. Specifically, combining... Figure 9 As shown in 902, the same styles corresponding to any two components from Component 1 to Component 3 are stored uniformly. For duplicate styles, during traversal, the style index corresponding to any one of the components from Component 1 to Component 3 can be reached to retrieve the style based on the style index. For example, when traversing to the index of General Style 1, General Style 1 can be retrieved based on the index of General Style 1; when traversing to the index of General Style 2, General Style 2 can be retrieved based on the index of General Style 2; when traversing to the index of General Style 6, General Style 6 can be retrieved based on the index of General Style 6; and when traversing to the index of General Style 8, General Style 8 can be retrieved based on the index of General Style 8.

[0121] Additionally, scenario 3: when Figure 4 The developer.hml and developer.css files in this application use the same storage area for the styles provided in this application. The pseudocode for the style application process is as follows:

[0122]

[0123] In other words, it can be seen that general styles can be applied directly, avoiding the process of repeatedly creating related styles. This avoids the process of repeatedly allocating storage areas and destroying styles stored in storage areas for electronic devices with the same style, reducing the number of memory operations, improving system performance, and also improving the efficiency of applying styles to components.

[0124] 703. The electronic device obtains the style of the second component according to the first index, wherein both the first component and the second component are determined according to the compiled file; the style of the first component and the style of the second component are both determined according to the first attribute and the value of the first attribute; or, the style of the first component and the style of the second component are both determined according to the second attribute and the value of the second attribute.

[0125] The number of the second component can be one or more, for example, and there is no limit to the number of components.

[0126] 704. The electronic device applies the style of the first component to the first component.

[0127] 705. The electronic device applies the style of the second component to the second component.

[0128] As can be seen, in the above technical solution, by compiling the source code file to obtain a compiled file, the style of the first component and the component style of the second page are obtained according to the first index included in the compiled file. The first attribute and the second attribute are identical, and the values ​​of the first attribute and the second attribute are also identical. The styles of both the first and second components are determined based on the first attribute and its value; or, the styles of both the first and second components are determined based on the second attribute and its value. This allows the same style (i.e., attribute and attribute value) corresponding to different components to be obtained based on the index, avoiding the repeated generation of the same style for different components and improving system performance. Simultaneously, using the index avoids the presence of identical styles corresponding to different components in the compiled file, thereby reducing the size of the compiled file, decreasing the loading time of the compiled file, and further improving system performance. Furthermore, applying the same styles corresponding to different components to their respective components improves the efficiency of style application to components because it eliminates the need for repeated generation of the same styles for different components.

[0129] The following section, using the style generation process as an example, explains the beneficial effects of reusing the same memory for non-repeating attributes.

[0130] It should be understood that, in existing solutions, the style application process may include the following steps:

[0131] 1. Allocate memory for styles, which means allocating memory for attributes and memory for attribute values.

[0132] 2. Retrieve the value corresponding to the key from the corresponding JS object and create a style instance (i.e., retrieve the properties and their values ​​from the corresponding JS object to create a style instance).

[0133] 3. Apply styles.

[0134] 4. Release the memory allocated for styles, that is, release the memory allocated for properties and the memory allocated for property values.

[0135] Therefore, in existing solutions, memory is repeatedly requested from the stack for all attributes and their values, and memory is repeatedly released after applying styles, resulting in performance overhead on lightweight devices. In this application, however, a second reordering process is implemented during compilation, compiling in descending order of attribute length. This allows the framework to reuse memory on the stack when iterates through and applies attributes sequentially, reducing dynamic memory allocation and deallocation and improving runtime efficiency.

[0136] It should be understood that, in case 4: combining the above-mentioned method of using indexes to determine the component style and the style generation process in existing solutions, the pseudocode is as follows:

[0137]

[0138] Case 5: Combining the above-described methods of using indexes to determine component styles and the style application process when non-repeating attributes reuse the same memory, the pseudocode in Case 3 can be changed to the following pseudocode:

[0139]

[0140]

[0141] Combining the pseudocode in cases 4 and 5, it can be seen that indexing common styles and reusing memory improves the efficiency of setting styles and properties in JS applications; by extracting duplicate values ​​(the same properties and the same property values) and storing them centrally, the size of the entire compilation output is reduced, which indirectly reduces the memory usage of JS runtime.

[0142] The following three scenarios illustrate the process from developers writing front-end source code files to displaying the view on a browser / device. These three scenarios may include:

[0143] Option A: The compiled files do not include the same properties and property values ​​as those provided by the front-end framework;

[0144] Option B: The compiled files do not include the same properties and property values ​​as those provided by the front-end framework, nor do they use indexes to determine the styles of components;

[0145] Option C: The compiled files do not include the same properties and property values ​​as those provided by the front-end framework, the style of the component is determined by index, and non-repeating properties reuse memory.

[0146] Option A can be found here. Figure 10A , Figure 10A This is a flowchart illustrating another method for applying a component style, as provided in an embodiment of this application. Figure 10A As shown, developers write front-end source code files. Then, a compiler compiles these files to output the compiled front-end source code files. During compilation, if the compiler determines that a property or value exists in the source code file that is identical to one provided by the front-end framework (i.e., a default value provided by the framework exists), it removes the default value, preventing it from being compiled. Next, the JavaScript framework running on the browser or device loads and parses the compiled source code file. The JavaScript engine then extracts styles and applies them to each component. Simultaneously, each component has default values ​​during initialization, and the JavaScript engine on the browser or device ensures that the default values ​​removed during compilation are not repeatedly applied to the components. Finally, the display is performed, showing the view (webpage) on the browser or device.

[0147] Option B can be found here. Figure 10B , Figure 10B This is a flowchart illustrating another method for applying a component style, as provided in an embodiment of this application. Figure 10B As shown, developers write front-end source code files. Then, a compiler compiles these files to output the compiled front-end source code files. During compilation, if the compiler determines that a property or value exists that is identical to a property provided by the front-end framework (i.e., a default value exists), it removes the default value from the compilation process. Additionally, the compiler can extract duplicate styles (identifying and storing identical properties and values). Next, the JavaScript framework running on the browser or device loads and parses the compiled front-end source code files. The JavaScript engine then extracts and applies styles to each component. Simultaneously, the JavaScript engine can ignore default values ​​and directly retrieve styles by index for duplicate values ​​(identical properties and values). Finally, the code is displayed in the browser or device, creating a webpage.

[0148] Option C can be found here. Figure 10C , Figure 10C This is a flowchart illustrating another method for applying a component style, as provided in an embodiment of this application. Figure 10C As shown, developers write front-end source code files. Then, a compiler compiles these files to output the compiled front-end source code files. During compilation, if the compiler determines that a property or value exists that is identical to one provided by the front-end framework (i.e., a default value exists), it removes the default value from the compilation process. Additionally, the compiler can extract duplicate styles (identifying and storing identical properties and values) and perform sequential compilation (compiling the source code files in descending order of property pairs and their lengths). Next, the compiled front-end source code files are loaded and parsed by the JS framework running on the browser or device. This allows the JS engine to extract styles and apply them one by one, ensuring each style is applied to the component. Meanwhile, the JS engine running on the browser or device can ignore default values; for duplicate values ​​(the same property and its value), styles can be directly retrieved by index; for non-duplicate properties, styles can be applied sequentially (e.g., when any property is encountered, it is stored in the first storage area, and the styles of its corresponding component are generated and applied). Finally, the display is performed, that is, the view (web page) is displayed on the browser or device.

[0149] The above primarily describes the solution provided in this application from the perspective of interaction between various devices. It is understood that each device, in order to achieve the aforementioned functions, includes corresponding hardware structures and / or software modules for executing each function. Those skilled in the art should readily recognize that, based on the modules and algorithm steps of the examples described in conjunction with the embodiments disclosed herein, this application can be implemented in hardware or a combination of hardware and computer software. Whether a function is executed in hardware or by computer software driving hardware depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0150] This application embodiment can divide the electronic device into functional modules according to the above method example. For example, each function can be divided into its own functional module, or two or more functions can be integrated into one processing module. The integrated module can be implemented in hardware or as a software functional module. It should be noted that the module division in this application embodiment is illustrative and is only a logical functional division. In actual implementation, there may be other division methods.

[0151] When using integrated modules, see [link to relevant documentation]. Figure 11 , Figure 11 This is a schematic diagram of a component-style application device provided in an embodiment of this application. The component-style application device 1100 can be applied to the above-mentioned... Figure 7 In the method shown, such as Figure 11 As shown, the component-style application device 1100 includes a processing module 1101 and an acquisition module 1102. The processing module 1101 may be one or more processors. This component-style application device can be used to implement the electronic device involved in any of the above method embodiments, or to implement the functions of the device involved in any of the above method embodiments. For example, the component-style application device can be an electronic device. This electronic device can be a network element in a hardware device, a software function running on dedicated hardware, or a virtualization function instantiated on a platform (e.g., a cloud platform). Optionally, the component-style application device 1100 may further include a storage module 1103 for storing the program code and data of the component-style application device 1100.

[0152] For example, processing module 1101 is used to compile a source code file to obtain a compiled file; wherein the source code file includes a first attribute, a value of the first attribute, a second attribute, and a value of the second attribute, the first attribute and the second attribute being the same, and the value of the first attribute and the value of the second attribute being the same; the compiled file includes a first index; obtaining module 1102 is used to obtain the style of a first component according to the first index; obtaining module 1102 is used to obtain the style of a second component according to the first index, wherein both the first component and the second component are determined according to the compiled file; the style of the first component and the style of the second component are both determined according to the first attribute and the value of the first attribute; or, the style of the first component and the style of the second component are both determined according to the second attribute and the value of the second attribute; processing module 1101 is used to apply the style of the first component to the first component; processing module 1101 is used to apply the style of the second component to the second component.

[0153] In one possible implementation, when the application device of the component style is a chip, the acquisition module 1102 can be an interface, pin, or circuit, etc. The interface can be used to input data to be processed to the processor and can output the processor's processing results. Specifically, the interface can be a general purpose input / output (GPIO) interface, which can connect to multiple peripheral devices (such as displays (LCDs), cameras, radio frequency (RF) modules, antennas, etc.). The interface is connected to the processor via a bus.

[0154] Processing module 1101 may be a processor, which can execute computer execution instructions stored in the storage module to cause the chip to perform... Figure 7 The embodiments involve methods. Further, the processor may include a controller, an arithmetic logic unit (ALU), and registers. For example, the controller is primarily responsible for instruction decoding and issuing control signals for the operations corresponding to the instructions. The ALU is primarily responsible for performing fixed-point or floating-point arithmetic operations, shift operations, and logical operations, and can also perform address operations and translations. Registers are primarily responsible for storing register operands and intermediate operation results temporarily stored during instruction execution. In specific implementations, the processor's hardware architecture may be an application-specific integrated circuit (ASIC) architecture, a microprocessor without interlocked piped stages architecture (MIPS) architecture, an advanced reduced instruction set machine (RISC) machine (ARM) architecture, or a network processor (NP) architecture, etc. The processor can be single-core or multi-core.

[0155] The storage module 1103 can be an internal storage module of the chip, such as a register or cache. Alternatively, the storage module can be an external storage module, such as a read-only memory (ROM) or other types of static storage devices capable of storing static information and instructions, such as random access memory (RAM).

[0156] It should be noted that the functions of the processor and interface can be implemented through hardware design, software design, or a combination of both; no restrictions are imposed here.

[0157] This application also provides a communication device, including a memory and a processor. The memory stores computer execution instructions, and the processor executes the computer execution instructions stored in the memory. Execution of the computer execution instructions stored in the memory causes the processor to perform... Figure 7 Methods in any possible implementation.

[0158] This application also provides another communication device, including a memory and a communication interface, wherein the communication interface is used for inputting and / or outputting information, and a processor is used for executing a computer program, causing the device to perform... Figure 7 Methods in any possible implementation.

[0159] This application also provides a computer-readable storage medium having a computer program stored thereon, wherein when the computer program is executed by a computer, the computer causes the computer to perform the following functions: Figure 7 Methods in any possible implementation.

[0160] The specific embodiments described above further illustrate the purpose, technical solution, and beneficial effects of this application. It should be understood that the above description is only a specific embodiment of this application and is not intended to limit the scope of protection of this application. Any modifications, equivalent substitutions, improvements, etc., made on the basis of the technical solution of this application should be included within the scope of protection of this application.

Claims

1. An application method of an assembly pattern, characterized by, The method comprises the following steps: compiling a source code file to obtain a compiled file; wherein the source code file comprises a first attribute, a value of the first attribute, a second attribute and a value of the second attribute, the first attribute and the second attribute are the same, and the value of the first attribute and the value of the second attribute are the same; the compiled file comprises a first index; obtaining a style of a first component according to the first index; obtaining a style of a second component according to the first index, wherein the first component and the second component are determined according to the compiled file; the style of the first component and the style of the second component are determined according to the first attribute and the value of the first attribute; or the style of the first component and the style of the second component are determined according to the second attribute and the value of the second attribute; applying the style of the first component to the first component; applying the style of the second component to the second component; wherein the first index is a string or a placeholder.

2. The method of claim 1, wherein, Before the step of obtaining the style of the first component according to the first index, the method further comprises the following steps: The source code file further comprises a third attribute and a value of the third attribute, the first attribute and the third attribute are different, or the second attribute and the third attribute are different; the compiled file further comprises the third attribute; allocating a first storage area, the first storage area is used to store all attributes in the compiled file, the size of the first storage area is determined according to the length of a fourth attribute, the fourth attribute is an attribute with the longest length in the first attribute and the third attribute, or the fourth attribute is an attribute with the longest length in the second attribute and the third attribute, and the length of the attribute is the length of a string used to indicate the attribute.

3. The method according to claim 1 or 2, characterized in that, The first index comprises a first character, a second character and a third character, the first character is used to index a universal element matrix, the second character is used to index the row of the style of the first component in the universal element matrix, and the third character is used to index the column of the style of the first component in the universal element matrix.

4. The method according to claim 1 or 2, characterized in that, The first index comprises a first character, a second character and a third character, the first character is used to index a universal element matrix, the second character is used to index the row of the style of the second component in the universal element matrix, and the third character is used to index the column of the style of the second component in the universal element matrix.

5. The method according to claim 3 or 4, characterized in that, The universal element matrix comprises a universal element label, the universal element label is associated with at least one style, and the at least one style comprises the style of the first component or the style of the second component.

6. The method according to any one of claims 1 to 5, characterized in that, The compiled file does not comprise the same attributes and attribute values as provided by a front-end framework.

7. An application device of the assembly style, characterized by The device comprises a processing module and an obtaining module, the processing module is configured to compile a source code file to obtain a compiled file; wherein the source code file comprises a first attribute, a value of the first attribute, a second attribute and a value of the second attribute, the first attribute and the second attribute are the same, and the value of the first attribute and the value of the second attribute are the same; the compiled file comprises a first index; The obtaining module is configured to obtain the style of the first component according to the first index. The obtaining module is configured to obtain the style of the second component according to the first index, wherein the first component and the second component are determined according to the compiled file; the style of the first component and the style of the second component are determined according to the first attribute and the value of the first attribute; or the style of the first component and the style of the second component are determined according to the second attribute and the value of the second attribute. The processing module is configured to apply the style of the first component to the first component. The processing module is configured to apply the style of the second component to the second component. The first index is a string or a placeholder.

8. The apparatus of claim 7, wherein, Before the style of the first component is obtained according to the first index, the source code file further includes a third attribute and a value of the third attribute, the first attribute is different from the third attribute, or the second attribute is different from the third attribute. The compiled file further includes the third attribute. The processing module is further configured to allocate a first storage area, the first storage area is used to store all attributes in the compiled file, a size of the first storage area is determined according to a length of a fourth attribute, the fourth attribute is an attribute with a longest length among the first attribute and the third attribute, or the fourth attribute is an attribute with a longest length among the second attribute and the third attribute, and the length of the attribute is a length of a string used to indicate the attribute.

9. The apparatus of claim 7 or 8, wherein, The first index includes a first character, a second character and a third character, the first character is used to index a universal element matrix, the second character is used to index a row of the universal element matrix where the style of the first component is located, and the third character is used to index a column of the universal element matrix where the style of the first component is located.

10. The apparatus of claim 7 or 8, wherein, The first index includes a first character, a second character and a third character, the first character is used to index a universal element matrix, the second character is used to index a row of the universal element matrix where the style of the second component is located, and the third character is used to index a column of the universal element matrix where the style of the second component is located.

11. The apparatus of claim 9 or 10, wherein, The universal element matrix includes a universal element label, the universal element label is associated with at least one style, and the at least one style includes the style of the first component or the style of the second component.

12. The apparatus of any of claims 7-11, wherein, The compiled file does not include the same attributes and attribute values as provided by a front-end framework.

13. A communications device, characterized by The computer readable storage medium stores a computer program, and when the computer program is executed, the method in any one of claims 1-6 is implemented.

14. A computer-readable storage medium, characterized in that, The computer readable storage medium stores a computer program, and when the computer program is executed, the method in any one of claims 1-6 is implemented.

Images