CN101847147A - System and method for integrating independently edited script and style into webpage - Google Patents

Abstract

The present invention relates to a system and method for integrating independently edited scripts and styles into a web page. After analyzing the script and style names contained in the web page, the system writes the function called by the script into a function file, writes the style syntax used in the web page into a style file, and writes the web page syntax for loading the function file and the style file into the web page. This can reduce the complexity of the source code of the web page and achieve the technical effect of increasing the efficiency of web page development.

Description

System and method for integrating independently edited scripts and styles into web pages

technical field

The present invention relates to a system and method for integrating scripts, styles and webpages, in particular to a system and method for integrating independently edited scripts and styles into webpages.

Background technique

When developing a webpage, it is often necessary to rely on many personnel with professional knowledge and technology to use specific application software to edit the webpage on the computer. After the webpage is edited, the developer uploads the webpage to the server that provides website services.

Early webpages were mainly composed of HyperText Markup Language (HTML) syntax and scripts. Most webpage developers were programmers, but recently, due to the extensive use of styles in webpages, webpage developers except In addition to programmers, visual designers whose field of expertise is completely different from that of programmers have also been added. Therefore, the current process of web page development is usually made by the visual designer to create a web page with style syntax added, and then handed over to the programmer to write the script executed on the browser and the program executed on the server.

However, in the process of web page development, the screen presented on the web page and the functions provided for operation will be constantly adjusted. In addition, the source code of the web page is not edited by the same person, but jointly developed by the visual designer and the programmer. Therefore, when visual designers and programmers edit the source code of the web page again and again, the source code of the web page will become more and more messy. As the complexity increases, the source code of the web page will become longer and longer. In this way, it will be difficult for visual designers and programmers to find style syntax or scripts that need to be modified.

To sum up, it can be seen that there has been a problem in the prior art for a long time that it is difficult to find specific scripts and style grammars in the source code of web pages, so it is necessary to propose improved technical means to solve this problem.

Contents of the invention

In view of the problem that it is difficult to find specific scripts and style grammars in the source code of webpages in the prior art, the present invention provides a system and method for integrating independently edited scripts and styles into webpages, wherein:

The system for integrating independently edited scripts and styles into webpages provided by the present invention includes: a script library for storing multiple functions; a style grammar library for storing multiple style grammars; an input module, It is used to input a webpage, and the webpage at least includes script or style name; the webpage analysis module is used to analyze the script and style name from the webpage; the function file creation module is used to analyze the script from the webpage by the webpage analysis module, to The script function library reads the functions required to execute the script, and writes the functions into the function file; the style file creation module is used to store the style name in the style syntax library after the webpage analysis module analyzes the style name from the webpage Read the style syntax corresponding to the style name, and write the style syntax into the style file; the integration module is used to write the first web page syntax of the loading function file and the second web page syntax of loading the style file in the web page; output The module is used to output the webpage containing the first webpage grammar or the second webpage grammar. After analyzing the script and style name in the webpage through the webpage analysis module, the function file creation module will read the function file from the script library. The style file creation module will read the style grammar from the style grammar library and write it into the style file, and the integration module will write the webpage grammar of loading the function file and the style file in the webpage. Therefore, the problems existing in the prior art are solved by the technology of separating the script and the style syntax.

The method for integrating independently edited scripts and styles into webpages provided by the present invention includes the following steps: storing multiple functions and multiple style grammars; inputting webpages containing script or style names; analyzing webpages; when the webpage contains When scripting, read the functions required to execute the script, and after writing the functions into the function file, write the syntax of the first web page that loads the function file in the web page; when the web page contains a style name, read Get the style grammar corresponding to the style name, and after writing the style grammar into the style file, write the second webpage grammar of loading the style file in the webpage; output the webpage containing the first webpage grammar or the second webpage grammar, which is transparent After analyzing the script and style names in the web page, read the function called by the script and write it into the function file, read the style grammar used by the web page and write it into the style file, and write the loading function in the web page The web page syntax of the function file and the style file solves the problems existing in the prior art by separating the script and the style syntax.

The system and method provided by the present invention are as above, and the difference between it and the prior art is that the present invention will analyze the webpage, and after analyzing the script and style name contained in the webpage, read the function called by the script and Write the function into the function file, and read the style grammar used by the webpage and write the style grammar into the style file, and write the webpage grammar of loading the function file and the style file in the webpage, so as to separate the script And style syntax to reduce the complexity of the source code of the web page. Through the above-mentioned technical means, the present invention can achieve the technical effect of increasing the efficiency of web page development.

Description of drawings

FIG. 1 is a system architecture diagram for integrating independently edited scripts and styles into web pages proposed by the present invention.

FIG. 2 is a flow chart of a method for integrating independently edited scripts and styles into a webpage proposed by the present invention.

FIG. 3 is the source code of the webpage before integration proposed by the embodiment of the present invention.

FIG. 4A is a schematic diagram of a function list provided by an embodiment of the present invention.

FIG. 4B is a schematic diagram of a style list provided by an embodiment of the present invention.

FIG. 5A is a function file for writing a function according to an embodiment of the present invention.

FIG. 5B is a style file for writing style syntax proposed by the embodiment of the present invention.

FIG. 6 is the source code of the integrated webpage proposed by the embodiment of the present invention.

Fig. 7 is the source code before integration of another webpage proposed by the embodiment of the present invention.

[Description of main component symbols]

111 script library

112 style syntax library

120 input modules

130 web page analysis modules

151 function file building module

152 style file build module

160 integration modules

170 output modules

180 web page editing module

191 script management module

192 style management module

300a page

300b page

300c web page

310 script

320 style name

331 First Web Grammar

332 Second Web Page Grammar

341 Third Web Page Grammar

342 Fourth Web Grammar

List of 410 functions

420 style list

500 function files

600 style files

Detailed ways

The detailed features and implementation methods of the present invention will be described in detail below in conjunction with the accompanying drawings and embodiments, the content is enough to make any person skilled in the art easily understand the technical means used to solve the technical problems of the present invention and implement them accordingly, and understand the realization of the present invention The effect that the invention can achieve.

The present invention is executed in a webpage development environment, and the webpage development environment provided by the present invention can be webpage editing software executed in a computer, and users can use the webpage editing software to use the present invention to develop webpage programs; providing the implementation of the present invention The webpage development environment can also be executed on the server. After the user connects to the server through the client, he uploads the edited webpage through the user interface provided by the server, and the HTML grammar and script in the uploaded webpage are analyzed by the present invention and style syntax for integration.

In the following, the system operation of the present invention will be illustrated with the system architecture diagram of integrating independently edited scripts and styles into web pages in FIG. 1 of the present invention. As shown in Figure 1, the system of the present invention contains script library 111, style syntax library 112, input module 120, web page analysis module 130, function file establishment module 151, style file establishment module 152, integration module 160 and output module 170.

The script function library 111 is responsible for storing a plurality of functions, and the functions stored in the script function library 111 are in the form of program code (source code), including function name, parameters required for calling (call), and function body, etc. .

The style grammar library 112 is responsible for storing a plurality of style grammars, and the style grammar stored in the style grammar library 112 includes a style selector (selector) and at least one style definition.

The input module 120 is responsible for inputting the webpage 300a. The webpage 300a input by the input module 120 usually includes more than one script, more than one style name or more than one script and more than one style name in addition to HTML syntax. Generally speaking, the webpage 300a is input into the system by the user through the input module 120, but the present invention is not limited thereto.

The webpage analysis module 130 is responsible for analyzing (parser) the source code of the webpage 300a input by the input module 120, so as to analyze each element (element) and script contained in the webpage 300a, and search out the "class" attribute of the element. style name.

The web page analysis module 130 is more responsible for searching the external links from the specific attributes of the elements obtained after the analysis or the specific syntax of the script after analyzing the web page 300a input by the input module 120, and tracing (trace) the web pages according to the external links When 300a is browsed, the browser that displays the webpage 300a loads the external file according to the external link recorded in the webpage 300a, and performs the same analysis on the external file obtained after analysis as the webpage 300a, so as to obtain the execution time of the webpage 300a when the webpage 300a is browsed. script and the style name used.

The function file creation module 151 is responsible for determining whether the script contained in the web page 300a will call the script stored in the script library 111 when the web page analysis module 130 analyzes the script contained in the web page 300a from the web page 300a input by the input module 120. function, if so, the function file creation module 151 will create a blank function file in a specific directory, and after reading the program code of the function required for the script contained in the script library 111 to execute the webpage 300a Write the program code of the read function into the created function file, so as to add the functions needed when the script contained in the web page 300a is executed into the function file. Wherein, the specific directory where the function file creating module 151 creates the function file is usually the directory stored in the webpage 300a or a directory specially storing the function file, such as "/script", etc., but the present invention is not limited thereto.

Generally speaking, the function file creation module 151 will create different function files for each webpage, but the present invention is not limited thereto, that is to say, the function file creation module 151 can create a function file for each function You can also create different function files according to the relevance of each function, or even write the functions of each webpage in the same directory into the same function file, but the other methods are not different in technology , and there is no special benefit at the same time, so when implementing the function file creation module 151, it is still considered that different function files are created for each webpage.

The style file creation module 152 is responsible for determining whether the style name analyzed by the webpage analysis module 130 is consistent with the style selector contained in one of the style grammars stored in the style grammar library 112 after the webpage analysis module 130 analyzes the style name contained in the webpage 300a. Similarly, if so, the style file creation module 152 will first create a blank style file in a specific directory, and then read the style syntax in the style grammar library 112 after the style selector is identical to the style name included in the webpage 300a, and then The read style syntax (style selector and style definition) is written into the created style file. Wherein, the specific directory for creating the style file by the style file creation module 152 is usually the directory where the web page 300a exists or a directory specially storing the style file, such as "/css", etc., but the present invention is not limited thereto.

Similar to the function file creation module 151, the style file creation module 152 can set up different style files for each webpage, but the present invention is not limited thereto, the style file creation module 152 may also set up the styles of all webpages in the entire website Grammars are all written in the same style file.

The integration module 160 is responsible for writing the function (program code) into the function file by the function file creation module 151, and then writing the first part of the loaded function file at any position in the web page 300a under the condition of conforming to the HTML syntax. Webpage syntax, and after the style file creation module 152 writes the style syntax into the style file, under the condition of meeting the HTML syntax, write the second webpage syntax of loading the style file in the webpage 300a, generally speaking, the first webpage The grammar will be written between the "HEAD" element and the "BODY" element in the webpage 300a, and the second webpage grammar will be written in the "HEAD" element, but the first webpage grammar and the second webpage grammar mentioned in the present invention The location of the written webpage 300a is not limited thereto. In this way, the new webpage generated after the integration module 160 writes the first webpage grammar and/or the second webpage grammar into the webpage 300a is the webpage 300b.

The output module 170 is responsible for outputting the webpage 300b generated after the integration module 160 writes the first webpage grammar and/or the second webpage grammar into the webpage 300a. The output module 170 can output the webpage 300b by storing it as a file, or output it directly by displaying the webpage 300b, but the present invention is not limited thereto.

In addition, the present invention may further include a webpage editing module 180 , a script management module 191 and a style management module 192 .

The webpage editing module 180 is responsible for editing the webpage 300a, and the input module 120 is responsible for inputting the webpage 300a edited by the webpage editing module 180 into the present invention. Generally speaking, the webpage editing module 180 provides a user interface, so as to allow the user to directly edit the webpage 300a in the present invention.

The script management module 191 is responsible for adding the custom functions written by the user in the web page 300a to the script library 111 after the web page 300a is analyzed by the web page analysis module 130, that is, adding the custom functions in the web page 300a The program code is written into the script library 111, so as to expand the functions in the script library 111. In addition, the script management module 191 is also responsible for providing users with operations such as adding, modifying or deleting functions stored in the script library 111 .

The style management module 192 is responsible for adding the self-defined style written by the user in the webpage 300a to the style grammar library 112 after the webpage 300a is analyzed by the webpage analysis module 130, that is, writing it into the webpage 300a in the style grammar library 112 The style selector and style definition contained in the custom style of . In addition, the style management module 192 is also responsible for providing users with operations such as adding, modifying or deleting style grammars stored in the style grammar library 112 .

Next, an embodiment is used to explain the operating system and method of the present invention, and please refer to FIG. 2 for the flow chart of the method for integrating independently edited scripts and styles into a web page proposed by the present invention. It is assumed that the present invention is implemented in webpage development software of a computer (not shown in the figure), but the present invention is not limited thereto.

After the user installs and executes the web page development software of the present invention on the computer, the script library 111 including multiple functions and the style grammar library 112 including multiple style grammars will also be stored on the computer (step 210) . In this embodiment, it is assumed that functions such as "isChecked", "isNotNull" and "isNotSelect" are stored in the script library 111, and the style selector is stored in the style syntax library 112 as ".bg_color ", ".title" and "P" etc. style syntax.

In fact, in addition to the functions stored in the script library 111 being created after the user installs them, the user can also use the script management module 191 provided by the user before using the input module 120 to input the webpage 300a. interface, write new functions in the web page development software of this embodiment, after the script management module 191 will store the new functions (program codes) written by users in the script library 111, the new functions written by users The function can be provided for subsequent development of the web page, and even the user can modify or delete the function stored in the script library 111 in the web page development software of this embodiment through the script management module 191 (program code ). Similarly, the style management module 192 can also provide users with new style grammars to add and customize, and provide users with the ability to modify or delete style grammars stored in the style grammar library 112 .

When the user wants to use the present invention, the user can operate the webpage development software to open the previously edited webpage 300a, so that after the input module 120 reads the webpage 300a from the computer storage medium (not shown), the webpage is completed 300a input (step 220). But the webpage 300a input by the input module 120 does not have to be edited in advance. For example, the present invention can also allow the user to edit the webpage 300a in the webpage development software by the webpage editing module 180 (step 280). When the user completes the webpage 300a After editing, the input module 120 will input the webpage 300a (step 220).

After the input module 120 inputs the webpage 300a (step 220), the webpage analysis module 130 will analyze the source code of the webpage 300a (step 230), so as to obtain the elements and scripts contained in the webpage 300a, and further search out from the elements style name. If the webpage 300a is as shown in Figure 3, after the analysis by the webpage analysis module 130, the webpage analysis module 130 will at least analyze that the webpage 300a contains a script 310 and the "bg_color" and the "bg_color" contained in the "class" attribute of the element "table". Two style names 320 of "title" in the "class" attribute of element "td". Wherein, the script 310 of the webpage 300a includes the syntax of calling the functions named "isNotNull" and "isNotSelect".

After the webpage analysis module 130 analyzes the webpage 300a (step 230), the function file creation module 151 will determine whether the webpage 300a contains a script according to the analysis result of the webpage analysis module 130 (step 251). Since the web page analysis module 130 has analyzed that the web page 300a contains the script 310, the function file creation module 151 will create a blank function file "uw. Go to the script library 111 to read the functions that the script 310 in the web page 300a will call, and write the read functions into the function file "uw.js" (step 252).

The function file creation module 151 can use the function list 410 shown in Figure 4A to record the functions stored in the script library 111, but the present invention is not limited thereto, the function file creation module 151 can also Directly go to the script library 111 to search for the function names of the functions stored in the script library 111 , so as to know which functions are stored in the script library 111 . Wherein, the function list 410 used by the function file creation module 151 is established when the webpage development software is installed, and the contents in the function list 410 are the function names of the functions recorded in the script library 111 Afterwards, when the script management module 191 adds and deletes the functions in the script library 111, the script management module 191 adds and deletes the added or deleted functions in the function list 410 The function name for .

Since the webpage analysis module 130 analyzes that the script 310 in the webpage 300a will call the functions whose function names are "isNotNull" and "isNotSelect", the function file creation module 151 will read out the functions from the script library 111. Formula name is the program code of the function of "isNotNull" and "isNotSelect", and writes the read program code in the function file "uw.js", and the function file creation module 151 writes the read program code The final function file "uw.js" 500 is shown in Fig. 5A.

Also after the web page analysis module 130 analyzes the web page 300a (step 230), the style file creation module 152 will determine whether the web page 300a contains a style name according to the analysis result of the web page analysis module 130 (step 261). Since the web page analysis module 130 has analyzed that the web page 300a includes two style names 320 of ".bg_color" and ".title", the style file creation module 152 will create a blank style file "style_uw_sys.css" in a directory dedicated to storing styles , after that, the style file creation module 152 will go to the style syntax library 112 to read the same style grammar for the style selector and the style name 320 in the web page 300a, that is, the read style selector is ".bg_color" and ".title" style syntax, and write the read style syntax into the style file "style_uw_sys.css" 600 (step 262). The style file "style_uw_sys.css" 600 after the style file creation module 152 writes the style syntax with ".bg_color" and ".title" as the style selector is shown in FIG. 5B .

Similar to the function file creation module 151, the style file creation module 152 can use the style list 420 shown in FIG. 4B to record the style selector of the style grammar stored in the style grammar library 112, and can also directly search the style grammar library The style selector of the style grammar stored in 112, whether the style selector of the style grammar stored in the script library 111 is the same as the style name in the webpage 300a, but the present invention does not use these two methods as a basis limit. Wherein, the style list 420 used by the style file creation module 152 is established when the webpage development software is installed, and the content in the style list 420 is the style selector of the style grammar recorded in the style grammar storehouse 112 at this moment, after that, will As the style management module 192 adds and deletes style grammars in the style grammar library 112 , the style management module 192 adds and deletes style selectors of the style grammars added or deleted in the style list 420 .

In fact, the execution order of the function file creation module 151 and the style file creation module 152 has no sequence relationship, that is to say, except that the function file creation module 151 first writes the function into the function file "uw.js" 500, the style file creation module 152 writes the style grammar into the style file "style_uw_sys.css" 600, the present invention can also execute the style file creation module 152 first, and then execute the function file creation module 151.

After the function file creation module 151 reads the function that the script 310 will call and writes the read function into the function file "uw.js" 500 (step 252), the integration module 160 will be as shown in Figure 6 , write the first webpage syntax 331 of the loading function file "uw.js" 500 into the webpage 300a (step 256). Similarly, after the style file building module 152 reads out the style syntax whose style selector is the same as the style name in the web page 300a and writes the style file "style_uw_sys.css" 600 (step 262), the integration module 160 will load the style file The second webpage syntax 332 of "style_uw_sys.css" 600 is written into the webpage 300a (step 266). After the source code of the webpage 300a is written into the first webpage grammar 331 and the second webpage grammar 332 by the integration module 160, it becomes a new webpage 300b.

Finally, the output module 170 will output the new webpage 300b including the first webpage grammar 331 and the second webpage grammar 332 . Suppose in this embodiment, the output module 170 outputs the webpage 300b by storing the webpage 300b as a file, then the content of the file stored on the computer by the output module 170 is the source code of the webpage 300b, so, the function in the webpage 300b The formula and style syntax will be stored in the function file and the style file respectively by the present invention, reducing the complexity of the source code of the web page 300b.

In summary, it can be seen that the difference between the present invention and the prior art is that after analyzing the script 310 and the style name 320 contained in the webpage 300a, the function called by the script 310 is written into the function file 500, and the The style name used by the web page 300a is written in the style file 600 with the same style syntax as the included style selector, and then the first web page syntax 331 and the second web page syntax 331 of the load function file 500 and the style file 600 are written in the web page 300a. Webpage syntax 332, the script 310 and style syntax in the webpage 300a can be separated by technical means, so that the complexity of the source code of the webpage 300a is reduced, so as to solve the problem of the prior art that it is difficult to find specific program codes in the source code of the webpage And the problem of style syntax, and then achieve the effect of increasing the efficiency of web page development.

In the above embodiment, the webpage 300a input by the input module 120 may not contain the script 310, or there is no function called in the script 310, then after the analysis by the webpage analysis module 130, the function file creation module 151 will Because the function name of the called function is not recorded in the web page 300a and is not executed, the integration module 160 will not write the first web page syntax 331 of the loaded function file 500 in the web page 300a (step 256). Similarly, if the webpage 300a input by the input module 120 does not include the style name 320, the style file building module 152 will not execute, and the integration module 160 will not write the second webpage syntax 332 of loading the style file 600 in the webpage 300a (step 266).

In addition, if the webpage 300c input by the input module 120 includes the third webpage grammar 341 and the fourth webpage grammar 342 for loading external files as shown in Figure 7, then the webpage analysis module 130 is analyzing the webpage 300c (step 230) Finally, the same analysis as that of the web page 300c will be performed on the two external files whose file names are "function.js" and "style.css", so as to obtain the called function and style name.

Furthermore, the method for integrating independently edited scripts and styles into webpages of the present invention can be implemented in hardware, software, or a combination of hardware and software, and can also be implemented in a centralized manner in a computer system or distributed in several different components. A decentralized implementation of interconnected computer systems.

Although the disclosed embodiments of the present invention are as above, the content described is not intended to directly limit the patent protection scope of the present invention. Any changes or modifications made by those skilled in the technical field of the present invention in the form and details of implementation without departing from the spirit and scope disclosed in the present invention belong to the scope of patent protection of the present invention. Therefore, the scope of patent protection of the present invention must still be defined by the appended claims of this specification.

Claims (10)

1. A system for integrating independently edited scripts and styles into web pages, the system comprising: a script library for storing a plurality of functions; a style grammar library for storing a plurality of style grammars; An input module, used for inputting a webpage, the webpage at least includes a script or a style name; A web page analysis module, configured to analyze the script and the style name from the web page; A function file creation module, used to read at least one function required to execute the script from the script library after the web page analysis module analyzes the script from the web page, and convert the function Write in a function file; A style file creation module, used to read a style grammar corresponding to the style name from the style grammar library after the webpage analysis module analyzes the style name from the webpage, and write the style grammar into the same in the format file; An integration module, used to write in the webpage a first webpage syntax for loading the function file and a second webpage syntax for loading the style file; and An output module is used for outputting the webpage including the first webpage grammar and/or the second webpage grammar. 2. The system for integrating independently edited scripts and styles into a web page as claimed in claim 1, wherein the web page analysis module is further used to trace an external file loaded in the web page, and analyze the external file from the external file script or the style name. 3. The system for integrating independently edited scripts and styles into a webpage as claimed in claim 1, wherein the system further comprises a webpage editing module for editing the webpage. 4. The system for integrating independently edited scripts and styles into web pages as claimed in claim 1, wherein the system further includes a script management module for adding, modifying or deleting the functions in the script library Mode. 5. The system for integrating independently edited scripts and styles into web pages as claimed in claim 1, wherein the system further includes a style management module for adding, modifying or deleting the style grammars in the style grammar library . 6. The system for integrating independently edited scripts and styles into a webpage as claimed in claim 1, wherein the system further comprises a script management module for adding a custom function in the webpage to the script function in the library. 7. The system for integrating independently edited scripts and styles into a webpage as claimed in claim 1, wherein the system further comprises a style management module for adding a custom style in the webpage to the style grammar library middle. 8. A method for integrating independently edited scripts and styles into a web page, the method comprising the following steps: Store multiple functions and multiple style grammars; Enter a webpage containing at least one script or one style name; analyze the web page; When the webpage includes the script, read at least one function required to execute the script, and write the function file into the webpage after writing the function into a function file a first web page syntax; When the web page contains the style name, read a style grammar corresponding to the style name, and after writing the style grammar into a style file, write a second web page loading the style file in the web page grammar; and outputting the webpage including the first webpage grammar or the second webpage grammar. 9. The method for integrating independently edited scripts and styles into a webpage as claimed in claim 8, wherein the step of analyzing the name of the script and the style from the webpage further includes tracing an external file loaded in the webpage file, and the steps that parse that script or that style name from that external file. 10. The method for integrating independently edited scripts and styles into a webpage as claimed in claim 8, wherein the method further comprises the step of editing the webpage.

Images