CN111444456B - Style editing method and device and electronic equipment - Google Patents
Style editing method and device and electronic equipment Download PDFInfo
- Publication number
- CN111444456B CN111444456B CN202010220398.5A CN202010220398A CN111444456B CN 111444456 B CN111444456 B CN 111444456B CN 202010220398 A CN202010220398 A CN 202010220398A CN 111444456 B CN111444456 B CN 111444456B
- Authority
- CN
- China
- Prior art keywords
- style
- class
- atomic
- name
- string
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 45
- 238000004891 communication Methods 0.000 claims description 13
- 230000008569 process Effects 0.000 claims description 10
- 238000004590 computer program Methods 0.000 claims description 7
- 238000012423 maintenance Methods 0.000 abstract description 6
- 238000012856 packing Methods 0.000 description 8
- 238000011161 development Methods 0.000 description 4
- 238000010586 diagram Methods 0.000 description 4
- 230000009471 action Effects 0.000 description 3
- 238000012545 processing Methods 0.000 description 3
- 230000006870 function Effects 0.000 description 2
- 230000002093 peripheral effect Effects 0.000 description 2
- 238000003491 array Methods 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000001514 detection method Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000000802 evaporation-induced self-assembly Methods 0.000 description 1
- 238000000605 extraction Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000010354 integration Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 238000012163 sequencing technique Methods 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/31—Programming languages or programming paradigms
- G06F8/315—Object-oriented languages
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Computing Systems (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- Stored Programmes (AREA)
- Document Processing Apparatus (AREA)
Abstract
The embodiment of the invention provides a style editing method and device and electronic equipment. Wherein the method comprises the following steps: extracting a character string which accords with a preset specification from a style file to obtain a class name string, wherein the class name string comprises a style name and a style numerical value; selecting an atomic class template matched with the style name of the class name character string from a plurality of preset atomic class templates aiming at each class name character string; according to the atomic declaration format represented by the selected atomic template, declaring the atomic of the style instruction for realizing the style value with the string of the class name; and calling the atomic class to edit the style of the webpage. The method can automatically declare the primitive types according to the style file and edit the style by utilizing the primitive types, so that the style instruction with numerical values can be realized by the primitive types, and the code complexity of the CSS code can be reduced by fully utilizing the atomic types, so that the operation and maintenance cost of the CSS code can be reduced.
Description
Technical Field
The present invention relates to the field of front-end web page development technologies, and in particular, to a style editing method and apparatus, and an electronic device.
Background
CSS (Cascading Style Sheets, cascading style sheet) is a computer language for describing web page styles, and developers can edit web page styles by writing CSS code. As functions are added and the size increases, the code redundancy of CSS codes of web pages tends to increase. Resulting in an increase in the operating and maintenance costs of the CSS code.
In the related art, style instructions may be implemented in batches by using atomic classes to reduce code redundancy of CSS codes. By way of example, assuming that multiple pictures need to be floated right, each picture in turn may be taken in the CSS code as a style instruction float: right to float the picture to the right, the method requires repeated writes of float in CSS code: right. It is also possible for float: the right declares the primitive class fr, by which the pictures are floated to the right in batches, which can avoid repeated writing of identical style instructions in the CSS code.
However, the atomic species needs to be declared first before use, e.g., atomic species fr needs to be declared before use. Thus, for some CSS style instructions having a value, such as style instruction padding, since the value may vary within a certain range, padding may be, for example, padding in particular: i px (representing that the inner margin of an element is set to i pixels), i may be any positive number. Prior to style editing, it is often difficult to accurately anticipate the style instructions that the style editing needs to implement. Therefore, it is difficult to declare the corresponding primitive class in advance, resulting in that CSS style instructions having numerical values cannot be implemented in batch using atomic classes in style editing. Thus, these CSS style instructions with numerical values may need to be repeatedly written in the CSS code, resulting in higher code redundancy of the CSS code.
Disclosure of Invention
The embodiment of the invention aims to provide a style editing method, a style editing device and electronic equipment, so as to reduce the code complexity of CSS codes during style editing and reduce the operation and maintenance cost of the CSS codes. The specific technical scheme is as follows:
in a first aspect of an embodiment of the present invention, there is provided a style editing method, including:
extracting a character string which accords with a preset specification from a style file to obtain a class name string, wherein the class name string comprises a style name and a style numerical value;
selecting an atomic class template matched with the style name of the class name character string from a plurality of preset atomic class templates aiming at each class name character string;
according to the atomic declaration format represented by the selected atomic template, declaring the atomic of the style instruction for realizing the style value with the string of the class name;
and calling the atomic class to edit the style of the webpage.
In a possible embodiment, the extracting the character string meeting the preset specification in the style file to obtain the class name string includes:
extracting all character strings meeting preset specifications from the style file;
and merging the same character strings in the extracted character strings, and taking the remaining character strings after merging as class name symbol strings.
In a possible embodiment, after the merging of the same character strings in the extracted character strings, the remaining character strings after merging are used as class name strings, the method further includes:
and counting the occurrence times of each class name character string in all character strings.
In one possible embodiment, the atomic templates are obtained in advance by:
determining a style instruction represented by a style name matched with the atomic template;
CSS codes declaring an atomic class for realizing the style instruction with a preset initial value are acquired as the atomic class template.
In one possible embodiment, the method declares the atomic class of the style instruction for realizing the style value with the string of the class name according to the atomic class declaration format represented by the selected atomic class template, including:
replacing the preset initial value in the selected atomic template with the style value of the name string to obtain a CSS code for realizing the style instruction with the style value;
according to the business process represented by the CSS code, an primitive class for realizing a style instruction having a style value of the class name string is declared.
In a second aspect of the embodiment of the present invention, there is provided a style editing apparatus, the apparatus including:
the file scanning module is used for extracting character strings meeting preset specifications from the style file to obtain class name character strings, wherein the class name character strings comprise style names and style numerical values;
the template matching module is used for selecting an atomic template matched with the style name of the class name character string from a plurality of preset atomic templates aiming at each class name character string;
an atomic declaration module for declaring an atomic class for implementing a style instruction having a style value of the class name string according to an atomic declaration format represented by the selected atomic class template;
and the style editing module is used for calling the atomic class to edit the style of the webpage.
In one possible embodiment, the file scanning module is specifically configured to extract all character strings in the style file that meet a preset specification;
and merging the same character strings in the extracted character strings, and taking the remaining character strings after merging as class name symbol strings.
In a possible embodiment, the file scanning module is further configured to count the number of occurrences of each of the class name strings in all the strings.
In a possible embodiment, the apparatus further includes a template generation module for determining a style instruction represented by a style name matching the atomic template;
CSS codes declaring an atomic class for realizing the style instruction with a preset initial value are acquired as the atomic class template.
In a possible embodiment, the atomic class declaration module is specifically configured to replace the preset initial value in the selected atomic class template with a style value of the class name string, so as to obtain a CSS code for declarating a style instruction with the style value;
according to the business process represented by the CSS code, an primitive class for realizing a style instruction having a style value of the class name string is declared.
According to the style editing method, the style editing device and the electronic equipment, the primitive types can be automatically declared according to the style file, and the style is edited by utilizing the primitive types, so that a style instruction with a numerical value can be realized through the primitive types, the code complexity of the CSS code can be reduced by fully utilizing the atomic types, and the operation and maintenance cost of the CSS code can be reduced. Of course, it is not necessary for any one product or method of practicing the invention to achieve all of the advantages set forth above at the same time.
Drawings
In order to more clearly illustrate the embodiments of the invention or the technical solutions in the prior art, the drawings that are required in the embodiments or the description of the prior art will be briefly described, it being obvious that the drawings in the following description are only some embodiments of the invention, and that other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.
Fig. 1 is a schematic flow chart of a style editing method according to an embodiment of the present invention;
fig. 2 is a schematic flow chart of front-end page development by applying the style editing method provided by the embodiment of the invention;
fig. 3a is a schematic structural diagram of a style editing apparatus according to an embodiment of the present invention;
fig. 3b is a schematic structural diagram of another style editing apparatus according to an embodiment of the present invention;
fig. 4 is a schematic structural diagram of an electronic device according to an embodiment of the present invention.
Detailed Description
The following description of the embodiments of the present invention will be made clearly and completely with reference to the accompanying drawings, in which it is apparent that the embodiments described are only some embodiments of the present invention, but not all embodiments. All other embodiments, which can be made by those skilled in the art based on the embodiments of the invention without making any inventive effort, are intended to be within the scope of the invention.
Referring to fig. 1, fig. 1 is a schematic flow chart of a style editing method according to an embodiment of the present invention, which may include:
s101, extracting a character string meeting a preset specification from the style file to obtain a class name string, wherein the class name string comprises a style name and a style numerical value.
S102, selecting an atomic class template matched with the style name of the class name character string from a plurality of preset atomic class templates according to each class name character string.
S103, according to the atomic class declaration format represented by the selected atomic class template, declaring the primitive class of the style instruction for realizing the style value with the string of the class name.
S104, calling the atomic class to edit the style of the webpage.
By adopting the embodiment, on one hand, the primitive types can be automatically declared according to the style file, and the style is edited by utilizing the primitive types, so that the style instruction with numerical value can be realized by the primitive types, and the code complexity of the CSS code can be reduced by fully utilizing the atomic types, so that the operation and maintenance cost of the CSS code can be reduced.
On the other hand, the embodiment is selected, and the style instruction with the numerical value can be realized through the atomic class, so that style editing can be completely carried out through the atomic class, a developer does not need to manually write CSS codes, further time for testing and modifying the CSS codes is saved, labor cost for front-end webpage development is effectively reduced, and front-end webpage development efficiency is improved.
The preset specification in S101 may be set according to actual requirements, and it is understood that, in order to extract the class name string from the style file according to the preset specification, the style file should be written according to the preset specification.
A style file may be scanned with regular strings representing a preset specification to extract strings conforming to the preset specification from the style file. The style names in the class name string are used to represent style instructions, for example, the class name string may be Pr (10 px), where Pr is a style name, the style name is used to represent a style instruction padding right (right inner margin of a setting element) in one possible application scenario, and the style instruction represented by the style name may be set according to actual requirements, for example, pr may also be used to represent a style instruction Width (Width of the setting element) for practical requirements. The pattern value is used to represent a value, and it is understood that the pattern value itself may be a value (or even a value represented by the pattern value) or may not be a value, for example, assuming that the pattern is used to represent 10px (10 pixels), the pattern value may be 10px or X-px, where X-px is used to represent 10px.
In S102, each atomic class template is used to represent an atomic class declaration format, and illustratively, one atomic class template may be used to represent a declaration format of an atomic class used to implement a packing right. The atomic class declaration format represented by the atomic class template should conform to the grammatical rules of the application primitive class.
In one possible embodiment, the primordial species may be obtained by: and determining a style instruction represented by a style name matched with the atomic class template, and acquiring a CSS code which declares an original class for realizing the style instruction with a preset initial value as the atomic class template.
Wherein the preset initial value may be represented using any character, by way of example, assume that CSS code for implementing an atomic class with a packing right of $0 is declared as "packing-right: $0", then" padding-right "may be: $0 "as an atomic class template that matches the style name used to represent the packing right.
The atomic class templates may be stored in the form of json files, and illustratively, in one possible embodiment, the atomic class templates may be as follows:
the atomic class template is matched with a style name Pr, the style name Pr is used for representing the packing right, and the atomic class declaration format represented by the atomic class template is "packing-right": "$0".
In S103, the atomic class for realizing the style instruction having the style value of the class name string is declared, which means the atomic class for realizing the style instruction having the value represented by the style value of the class name string. Illustratively, assuming that a style value is used to represent 10px, a style name is used to represent the packing right, an atomic class is declared for implementing packing right with 10px, and the declared atomic class is used for bulk implementation of packing right 10px (the right inside margin of an element is set to 10 pixels).
In a possible embodiment, the preset initial value in the selected atomic class template is replaced by the style value of the name string, so as to obtain a CSS code for realizing the style instruction with the style value, and according to the business flow represented by the CSS code, an primitive class for realizing the style instruction with the style value of the name string is declared.
Illustratively, assume that the atomic class declaration format represented by the primitive species is "packing-right": "$0" can be a value represented by replacing $0 with a style value, e.g., 10px, resulting in a "padding-right": "10px", according to "packing-right": the business process represented by "10px" declares the primitive class for implementing the packing right 10px.
In some application scenarios, different atomic classes may have different priorities to represent priorities between style instructions implemented by these atomic classes. In one possible embodiment, it may be to detect whether the class name string carries a preset priority identifier, and if the class name string carries the preset priority identifier, declare the class name string as an atomic class template with high priority when declaring the atomic class template with the atomic class template matching the style name of the class name string. In CSS, it is possible to add-! The manner of important declares priority as high-priority primitive.
The priority identification may be a character, such as-! Or a string, such as-! An important. In one possible implementation, to increase the detection efficiency of the priority identifier, the priority identifier may be set at a specified location in the class name string, such as the first or last of the string, for example, as-! For example, the class name string without priority identification may be pr (10 px), and the corresponding class name string with priority identification may be pr (10 px) ≡! .
It will be appreciated that if two class name strings are identical, the declared atomic classes are identical for the two class name strings, in order to avoid CSS code redundancy caused by declaring the same atomic class, in a possible embodiment, all the strings in the style file that meet the preset specification may be extracted, the identical strings in the extracted strings are combined, and the remaining strings after the combination are used as class name strings. The merging manner may be different according to application scenes, and may be exemplified by storing the extracted character string in an Object of JavaScript (a programming language) to merge the extracted character string. The Object may be used to store a string and a number of times that a string corresponds to, when a string is stored in the Object, if the string is not previously stored in the Object, the string is added to the Object, and the number of times that the string corresponds to is set to 1, and if the string is previously stored in the Object, the number of times that the string corresponds to is increased by 1.
For example, assuming that 5 character strings pr (10 px), w (1 rem) are extracted, respectively, pr (10 px) and w (1 rem) remain after merging, and these two character strings are regarded as class name symbol strings. If the merging is performed by means of objects in the JavaScript, objects as shown below can be obtained:
two character strings, pr (10 px) and w (1 rem), are stored in the Object, so pr (10 px) and w (1 rem) are used as class name strings.
By adopting the embodiment, the redundancy of the CSS codes caused by declaring the same atomic class can be avoided, and the code redundancy of the CSS codes is further reduced.
In some application scenarios, the number of occurrences of each class name string in all the extracted strings may be counted, and still taking 5 strings of pr (10 px), w (1 rem) as examples, where pr (10 px) occurs 3 times and w (1 rem) occurs 2 times. By adopting the embodiment, the sub-functions of sequencing, statistics and the like can be further realized, so that a developer can manage CSS codes better.
In order to more clearly describe the style editing method provided by the embodiment of the present invention, a flow chart of editing a web page style by applying the style editing method provided by the embodiment of the present invention will be described with reference to fig. 2, and fig. 2 shows a flow chart of editing a web page style provided by the embodiment of the present invention, which may include:
s201, developing a style file of the front-end page by a developer according to a preset specification.
The developer may be a style file that develops the front page using html (Hyper Text Markup Language ). The specification is used to agree on business logic for style editing, which may be expressed for a developer in the form of a specification dictionary in which, for example, pr (10 px) may be agreed to be equivalent to padding right:10px, w (1 rem) is equivalent to width:1rem.
Suppose that the user needs to use a scheme for implementing a padding right: atomic class of 10px instruction, and for implementing width: the atomic class of 100% instructions, a style file as shown below may be developed according to the specification dictionary described above:
<div class＝”pr(10px)w(100％)”>
< span > example
</div>
Wherein, < div class= "pr (10 px) w (100%)" > indicates the start of div element, </div > indicates the end of div element, < span > indicates the start of span element, </span > indicates the end of span element, the specific content included in span element may be different according to the actual requirement, the above style file is just an example, and the present invention is not limited in any way.
For an electronic device for style editing, the specification may be represented in a json file, where the json file may be custom and is used to represent a matching relationship between a style name and an atomic template, and by way of example, the json file may include:
the json file may be used to represent that the atomic class declaration format of the atomic class template matching the style name "pr" is "packing-right": "$0", which is used to declare the primitive class that implements the packing-right instruction. The atomic class declaration format of the atomic class template matching the style name "w" is "width": "$0", which is used to declare the primitive class that implements the width instruction.
S202, scanning the style file, and extracting the class name character string according to the specification.
For extraction of the class name string, reference may be made to the related description in S101, which is not described herein.
In one possible embodiment, this step may be implemented by the following code:
var classObj＝{}；
var synthax = getSyntax (); the// getSyntax returns a regular expression// for representing the preset specification
var match = synthax.exec (src); the// operation to find out the string// -meeting the specification
var className；
while (match) {// when finding out a string meeting the specification/++
classObj [ className ] = (classObj [ className ] |0) +1; the value is the number of occurrences (here plus 1)// -where the found string is stored in the map of the Object
match=syntmax.exec (src); continue to find the next string///-
}
S203, generating CSS codes according to the specifications.
CSS codes stating the atomic classes for implementing the corresponding style instructions may be generated in accordance with the atomic class templates specified in the specification, and the generation of these codes may be referred to in the description of S103, and will not be described here.
By way of example, the generated CSS code may be as follows:
the remaining code represented in the ellipses may be different according to application scenarios, and the CSS code may implement declarations of the following two types of atomic classes:
for implementing padding-right: the primitive class of 10px instruction, for implementing width: the primitive class of 1rem instruction.
S204, writing the generated CSS codes into the CSS file.
The obtained CSS file is a file for describing the style of the front-end webpage, and when the CSS file is compiled and executed, the style of the front-end webpage can be rendered into the style described by the CSS file. The format of the CSS file may be different according to the application scenario, but should be a format that can be recognized by the front end. For example, the class name string and the corresponding CSS code may be combined and written into the CSS file, and the CSS code corresponding to one type of character string is the CSS code for declaring the primitive class corresponding to the class name character string. Taking the CSS code shown in the foregoing S203 as an example, the CSS file may be as follows:
pr(10px){padding-right:10px}w(1rem){width:1rem}…
referring to fig. 3a, fig. 3a is a schematic structural diagram of a style editing apparatus according to an embodiment of the present invention, where the apparatus includes:
the file scanning module 301 is configured to extract a string in the style file that meets a preset specification, and obtain a class name string, where the class name string includes a style name and a style value;
the template matching module 302 is configured to select, for each of the class name strings, an atomic class template matching a style name of the class name string from a plurality of preset atomic class templates;
an atomic class declaration module 303, configured to declare an atomic class for implementing a style instruction having a style value of the class name string according to an atomic class declaration format represented by the selected atomic class template;
and the style editing module 304 is configured to invoke the atomic class to edit the style of the webpage.
By adopting the embodiment, the primitive types can be automatically declared according to the style file, and the style is edited by utilizing the primitive types, so that the style instruction with numerical value can be realized by the primitive types, the code complexity of the CSS code can be reduced by fully utilizing the atomic types, and the operation and maintenance cost of the CSS code can be reduced.
In a possible embodiment, the file scanning module 301 is specifically configured to extract all character strings in the style file that meet a preset specification;
and merging the same character strings in the extracted character strings, and taking the remaining character strings after merging as class name symbol strings.
In a possible embodiment, the file scanning module 301 is further configured to count the number of occurrences of each of the class name strings in all the strings.
In a possible embodiment, as shown in fig. 3b, the apparatus further comprises a template generation module 305 for determining a style instruction represented by a style name matching the atomic class template;
CSS codes declaring an atomic class for realizing the style instruction with a preset initial value are acquired as the atomic class template.
In a possible embodiment, the atomic class declaration module 303 is specifically configured to replace the preset initial value in the selected atomic class template with a style value of the class name string, so as to obtain CSS code for declarating a style instruction with the style value;
according to the business process represented by the CSS code, an primitive class for realizing a style instruction having a style value of the class name string is declared.
The embodiment of the invention also provides an electronic device, as shown in fig. 4, which comprises a processor 401, a communication interface 402, a memory 403 and a communication bus 404, wherein the processor 401, the communication interface 402 and the memory 403 complete communication with each other through the communication bus 404,
a memory 403 for storing a computer program;
the processor 401, when executing the program stored in the memory 403, implements the following steps:
extracting a character string which accords with a preset specification from a style file to obtain a class name string, wherein the class name string comprises a style name and a style numerical value;
selecting an atomic class template matched with the style name of the class name character string from a plurality of preset atomic class templates aiming at each class name character string;
according to the atomic declaration format represented by the selected atomic template, declaring the atomic of the style instruction for realizing the style value with the string of the class name;
and calling the atomic class to edit the style of the webpage.
In a possible embodiment, the extracting the character string meeting the preset specification in the style file to obtain the class name string includes:
extracting all character strings meeting preset specifications from the style file;
and merging the same character strings in the extracted character strings, and taking the remaining character strings after merging as class name symbol strings.
In a possible embodiment, after the merging of the same character strings in the extracted character strings, the remaining character strings after merging are used as class name strings, the method further includes:
and counting the occurrence times of each class name character string in all character strings.
In one possible embodiment, the atomic templates are obtained in advance by:
determining a style instruction represented by a style name matched with the atomic template;
CSS codes declaring an atomic class for realizing the style instruction with a preset initial value are acquired as the atomic class template.
In one possible embodiment, the method declares the atomic class of the style instruction for realizing the style value with the string of the class name according to the atomic class declaration format represented by the selected atomic class template, including:
replacing the preset initial value in the selected atomic template with the style value of the name string to obtain a CSS code for realizing the style instruction with the style value;
according to the business process represented by the CSS code, an primitive class for realizing a style instruction having a style value of the class name string is declared.
The communication bus mentioned above for the electronic devices may be a peripheral component interconnect standard (Peripheral Component Interconnect, PCI) bus or an extended industry standard architecture (Extended Industry Standard Architecture, EISA) bus, etc. The communication bus may be classified as an address bus, a data bus, a control bus, or the like. For ease of illustration, the figures are shown with only one bold line, but not with only one bus or one type of bus.
The communication interface is used for communication between the electronic device and other devices.
The Memory may include random access Memory (Random Access Memory, RAM) or may include Non-Volatile Memory (NVM), such as at least one disk Memory. Optionally, the memory may also be at least one memory device located remotely from the aforementioned processor.
The processor may be a general-purpose processor, including a central processing unit (Central Processing Unit, CPU), a network processor (Network Processor, NP), etc.; but also digital signal processors (Digital Signal Processing, DSP), application specific integrated circuits (Application Specific Integrated Circuit, ASIC), field programmable gate arrays (Field-Programmable Gate Array, FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components.
In yet another embodiment of the present invention, there is also provided a computer-readable storage medium having instructions stored therein, which when run on a computer, cause the computer to perform the method of editing any of the above embodiments.
In yet another embodiment of the present invention, there is also provided a computer program product containing instructions which, when run on a computer, cause the computer to perform the method of editing any of the above embodiments.
In the above embodiments, it may be implemented in whole or in part by software, hardware, firmware, or any combination thereof. When implemented in software, may be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When loaded and executed on a computer, produces a flow or function in accordance with embodiments of the present invention, in whole or in part. The computer may be a general purpose computer, a special purpose computer, a computer network, or other programmable apparatus. The computer instructions may be stored in or transmitted from one computer-readable storage medium to another, for example, by wired (e.g., coaxial cable, optical fiber, digital Subscriber Line (DSL)), or wireless (e.g., infrared, wireless, microwave, etc.). The computer readable storage medium may be any available medium that can be accessed by a computer or a data storage device such as a server, data center, etc. that contains an integration of one or more available media. The usable medium may be a magnetic medium (e.g., floppy Disk, hard Disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium (e.g., solid State Disk (SSD)), etc.
It is noted that relational terms such as first and second, and the like are used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Moreover, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.
In this specification, each embodiment is described in a related manner, and identical and similar parts of each embodiment are all referred to each other, and each embodiment mainly describes differences from other embodiments. In particular, for embodiments of the apparatus, electronic device, computer readable storage medium, computer program product, the description is relatively simple as it is substantially similar to the method embodiments, where relevant see also part of the description of the method embodiments.
The foregoing description is only of the preferred embodiments of the present invention and is not intended to limit the scope of the present invention. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present invention are included in the protection scope of the present invention.
Claims (8)
1. A style editing method, the method comprising:
extracting a character string which accords with a preset specification from a style file to obtain a class name string, wherein the class name string comprises a style name and a style numerical value;
selecting an atomic class template matched with the style name of the class name character string from a plurality of preset atomic class templates aiming at each class name character string;
according to the atomic declaration format represented by the selected atomic template, declaring the atomic of the style instruction for realizing the style value with the string of the class name;
calling the atomic class to edit the style of the webpage;
the atomic template is obtained in advance by the following way:
determining a style instruction represented by a style name matched with the atomic template;
acquiring CSS codes of atomic class declarations for realizing the atomic class of the style instruction with a preset initial value, wherein the CSS codes are used as atomic class declaration formats represented by the atomic class templates;
the method for declaring the atomic class of the style instruction for realizing the style value of the character string with the name according to the atomic class declaration format represented by the selected atomic class template comprises the following steps:
replacing the preset initial value in the atomic declaration format represented by the selected atomic template with a style value of the name string to obtain a CSS code for declarating a style instruction with the style value;
according to the business process represented by the CSS code, an primitive class for realizing a style instruction having a style value of the class name string is declared.
2. The method of claim 1, wherein extracting the character strings in the style file that meet the preset specification to obtain the class name string comprises:
extracting all character strings meeting preset specifications from the style file;
and merging the same character strings in the extracted character strings, and taking the remaining character strings after merging as class name symbol strings.
3. The method of claim 2, wherein after merging the same character string among the extracted character strings, the remaining character strings after merging are used as class name character strings, the method further comprises:
and counting the occurrence times of each class name character string in all character strings.
4. A style editing apparatus, the apparatus comprising:
the file scanning module is used for extracting character strings meeting preset specifications from the style file to obtain class name character strings, wherein the class name character strings comprise style names and style numerical values;
the template matching module is used for selecting an atomic template matched with the style name of the class name character string from a plurality of preset atomic templates aiming at each class name character string;
an atomic declaration module for declaring an atomic class for implementing a style instruction having a style value of the class name string according to an atomic declaration format represented by the selected atomic class template;
the style editing module is used for calling the atomic class to edit the style of the webpage;
the device also comprises a template generation module, a template generation module and a template generation module, wherein the template generation module is used for determining a style instruction represented by a style name matched with the atomic template;
acquiring CSS codes of an atomic class for realizing the style instruction with a preset initial value as an atomic class template;
the atomic class declaration module is specifically configured to replace the preset initial value in the selected atomic class template with a style value of the class name string, so as to obtain a CSS code for declarating a style instruction with the style value;
according to the business process represented by the CSS code, an primitive class for realizing a style instruction having a style value of the class name string is declared.
5. The apparatus of claim 4, wherein the file scanning module is specifically configured to extract all character strings in the style file that meet a preset specification;
and merging the same character strings in the extracted character strings, and taking the remaining character strings after merging as class name symbol strings.
6. The apparatus of claim 5, wherein the file scanning module is further configured to count a number of occurrences of each of the class name strings in all of the strings.
7. The electronic equipment is characterized by comprising a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory are communicated with each other through the communication bus;
a memory for storing a computer program;
a processor for carrying out the method steps of any one of claims 1-3 when executing a program stored on a memory.
8. A computer-readable storage medium, characterized in that the computer-readable storage medium has stored therein a computer program which, when executed by a processor, implements the method steps of any of claims 1-3.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010220398.5A CN111444456B (en) | 2020-03-25 | 2020-03-25 | Style editing method and device and electronic equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010220398.5A CN111444456B (en) | 2020-03-25 | 2020-03-25 | Style editing method and device and electronic equipment |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111444456A CN111444456A (en) | 2020-07-24 |
| CN111444456B true CN111444456B (en) | 2023-10-27 |
Family
ID=71654789
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010220398.5A Active CN111444456B (en) | 2020-03-25 | 2020-03-25 | Style editing method and device and electronic equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111444456B (en) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112115399A (en) * | 2020-09-02 | 2020-12-22 | 北京一亩田新农网络科技有限公司 | Method and device for changing page theme based on cs, electronic equipment and computer readable medium |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105094938A (en) * | 2015-06-30 | 2015-11-25 | 小米科技有限责任公司 | Method and device for generating CSS code |
| CN109445780A (en) * | 2018-09-19 | 2019-03-08 | 平安科技（深圳）有限公司 | A kind of pattern edit methods and equipment |
| CN109683890A (en) * | 2018-11-16 | 2019-04-26 | 东软集团股份有限公司 | The modular method, apparatus of cascading style sheets, storage medium and equipment |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US10296307B2 (en) * | 2017-05-16 | 2019-05-21 | International Business Machines Corporation | Method and system for template extraction based on source code similarity |
-
2020
- 2020-03-25 CN CN202010220398.5A patent/CN111444456B/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105094938A (en) * | 2015-06-30 | 2015-11-25 | 小米科技有限责任公司 | Method and device for generating CSS code |
| CN109445780A (en) * | 2018-09-19 | 2019-03-08 | 平安科技（深圳）有限公司 | A kind of pattern edit methods and equipment |
| CN109683890A (en) * | 2018-11-16 | 2019-04-26 | 东软集团股份有限公司 | The modular method, apparatus of cascading style sheets, storage medium and equipment |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111444456A (en) | 2020-07-24 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110688307B (en) | JavaScript code detection method, device, equipment and storage medium | |
| CN111124479B (en) | Method and system for analyzing configuration file and electronic equipment | |
| CN113609820B (en) | Method, device and equipment for generating word file based on extensible markup language file | |
| CN112651217B (en) | Paper document processing method, paper document processing device, electronic equipment and storage medium | |
| CN110727429B (en) | Front-end page generation method, device and equipment | |
| CN110990010A (en) | Software interface code generation method and device | |
| CN110109671A (en) | A kind of webpack label sizes pattern conversion method and device | |
| CN117931190A (en) | Code management method and related equipment | |
| CN111444456B (en) | Style editing method and device and electronic equipment | |
| CN117875288A (en) | Form page generation method and device and electronic equipment | |
| CN117289905B (en) | Application software development method and device, storage medium and electronic equipment | |
| CN113297425B (en) | Document conversion method, device, server and storage medium | |
| CN111399842B (en) | Code compiling method and device | |
| CN112764757A (en) | Applet processing method, device, equipment and storage medium | |
| CN117216279A (en) | Text extraction method, device and equipment of PDF (portable document format) file and storage medium | |
| CN110765008A (en) | Data processing method and device | |
| CN116204692A (en) | Webpage data extraction method and device, electronic equipment and storage medium | |
| CN111552638B (en) | Code detection method and device | |
| CN113722321A (en) | Data export method and device and electronic equipment | |
| CN114201961A (en) | Comment prediction method, device, equipment and readable storage medium | |
| CN109725932B (en) | Method and device for generating description document of application component | |
| CN113408250B (en) | Project file processing method and device | |
| CN115098090B (en) | Form generation method and device | |
| CN116483324A (en) | Multi-terminal parallel development method, device, equipment, medium and product of low-code platform | |
| KR102370301B1 (en) | Apparatus for creating initialization file |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |