Page display, source code file compilation method, device, equipment and medium

Abstract

The embodiment of the present invention discloses a method, device, computer equipment and storage medium for browser display of a front-end page and compilation of a source code file. The method for browser display of the front-end page includes: obtaining a page file that matches the target page to be displayed, wherein the page file includes: a compilation plug-in and a page source code file; calling the compilation plug-in to compile the page source code file to form a page compilation result that matches the page source code file; loading the page compilation result to display the target page in the browser. The embodiment of the present invention, through the above method, solves the problem of the prior art that after generating a page compilation file, cumbersome subsequent operations are required to generate a displayable page compilation result, thereby reducing the complexity of the developer's work.

Description

Technical Field

[0001] The embodiments of the present invention relate to computer data processing technology, and in particular to a browser display of a front-end page, a compilation method, device, computer equipment and storage medium of a source code file. Background Art

[0002] Front-end page development is the process of creating Web (World Wide Web) pages or APP (application) and other front-end interfaces to present to users. Through HTML (Hyper Text Markup Language), CSS (Cascading Style Sheets) and JavaScript and various derived technologies, frameworks, and solutions, the user interface interaction of Internet products is realized. Front-end page development has evolved from web page production, and the name has obvious characteristics of the times. In the evolution of the Internet, web page production is a product of the Web 1.0 era. The main content of early websites was static, mainly pictures and texts, and users' behavior in using websites was mainly browsing. With the development of Internet technology and the application of HTML5 and CSS3, modern web pages are more beautiful, interactive, and powerful.

[0003] At present, in the existing front-end development, the MVVM (Model-View-ViewModel) framework of React and Vue, which uses modularization and data binding technology, allows users to easily develop large-scale applications. However, development requires the installation of scaffolding tools such as node npm, and requires a series of configurations, packaging and compilation to generate the final front-end page that can be displayed in the browser. For developers, the operation is cumbersome and difficult to implement, and the requirements for developers are high. In addition, since the library function code used by the above framework is large, even if the above framework is used to develop a small page (typically, H5 page), the final packaged page size will be very large, and the distribution, downloading and dissemination of the page will bring a lot of redundant waste. Summary of the invention

[0004] The embodiments of the present invention provide a method, device, computer equipment and storage medium for browser display of a front-end page and compilation of a source code file, which greatly simplifies the developer's development of the front-end page operation and greatly reduces the code size of the front-end page, thereby achieving the purpose of streamlining the page code.

[0005] In a first aspect, an embodiment of the present invention provides a browser display method for a front-end page, which is executed by a browser and includes:

[0006] Obtaining a page file that matches the target page to be displayed, wherein the page file includes: a compiled plug-in and a page source code file;

[0007] Calling the compilation plug-in to compile the page source code file to form a page compilation result that matches the page source code file;

[0008] The page compilation result is loaded to display the target page in the browser.

[0009] Furthermore, the page source code file is compiled by the compilation plug-in to form a page compilation result matching the page source code file, including:

[0010] Whenever the compilation plug-in detects a data change in the page source code file, the DOM node included in the page source code file is updated according to the data change to form the page compilation result.

[0011] Further, detecting data changes in the page source code file through the compilation plug-in includes:

[0012] The compiler plug-in uses the observer mode to detect data changes in the page source code file.

[0013] Furthermore, the page source code file is a source code file that complies with the grammatical rules of the React programming framework;

[0014] In the compilation plug-in, a streamlined React framework is used to generate page compilation results.

[0015] In a second aspect, an embodiment of the present invention further provides a source code file compilation method, which is executed by a compilation plug-in in a page file, comprising:

[0016] When triggered by the browser, the page source code file in the page file is compiled to form a page compilation result matching the page source code file;

[0017] The browser is used to obtain a page file matching the target page to be displayed, wherein the page file includes: a compilation plug-in and a page source code file;

[0018] The page compilation result is provided to the browser for loading, so as to display the target page in the browser.

[0019] Furthermore, compiling the page source code file in the page file to form a page compilation result matching the page source code file includes:

[0020] Whenever a data change is detected in the page source code file, the DOM nodes included in the page source code file are updated according to the data change to form the page compilation result.

[0021] In a third aspect, an embodiment of the present invention further provides a browser display device for a front-end page, which is executed by a browser and includes:

[0022] A page file acquisition module is used to acquire a page file matching the target page to be displayed, wherein the page file includes: a compilation plug-in and a page source code file;

[0023] A compiling plug-in calling module, used to call the compiling plug-in to compile the page source code file to form a page compilation result matching the page source code file;

[0024] The page compilation result loading module is used to load the page compilation result to display the target page in the browser.

[0025] In a fourth aspect, an embodiment of the present invention further provides a source code file compilation device, which is executed by a compilation plug-in in a page file, and includes:

[0026] A source code compiling module, which is used to compile the page source code file in the page file when triggered by the browser, to form a page compilation result matching the page source code file;

[0027] The browser is used to obtain a page file matching the target page to be displayed, wherein the page file includes: a compilation plug-in and a page source code file;

[0028] The compilation result providing module is used to provide the page compilation result to the browser for loading, so as to display the target page in the browser.

[0029] In a fifth aspect, an embodiment of the present invention further provides a computer device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the computer program, the browser display method of the front-end page as described in any one of the embodiments of the present invention is implemented, or the source code file compilation method as described in any one of the embodiments of the present invention is implemented.

[0030] In a sixth aspect, an embodiment of the present invention also provides a storage medium of computer executable instructions, on which a computer program is stored. When the program is executed by a processor, it implements the browser display method of the front-end page as described in any one of the embodiments of the present invention, or implements the compilation method of the source code file as described in any one of the embodiments of the present invention.

[0031] The technical solution provided by the embodiment of the present invention obtains a page file matching a target page to be displayed; calls the compilation plug-in to compile the page source code file to form a page compilation result matching the page source code file; loads the page compilation result, and uses a technical means to display the target page in the browser. The compilation plug-in is carried in the page file and transmitted together with the page source code file, so that after obtaining the page file, the browser can directly use the compilation plug-in to compile the page source code file to obtain a target page that can be directly displayed in the browser. The technical solution of the embodiment of the present invention can enable developers to directly write page source code files, which can be previewed in the browser without the need for subsequent packaging and compilation operations. The written page source code file (JS code) is the final file. On the basis of ensuring the front-end programming framework programming habits of programmers, the operation steps of developers to develop and obtain the front-end page are reduced, and the code volume of the front-end page is greatly reduced, thereby achieving the purpose of streamlining the page code. BRIEF DESCRIPTION OF THE DRAWINGS

[0032] Figure 1 A flowchart of a browser display method for a front-end page provided in Embodiment 1 of the present invention;

[0033] Figure 2 is a flow chart of a method for compiling a source code file provided in Embodiment 2 of the present invention;

[0034] Figure 3 It is a structural diagram of a browser display device for a front-end page provided in Embodiment 3 of the present invention;

[0035] Figure 4 It is a schematic diagram of the structure of a source code file compiling device provided by a fourth embodiment of the present invention;

[0036] Figure 5 It is a structural diagram of a computer device provided in Embodiment 5 of the present invention. DETAILED DESCRIPTION

[0037] The present invention will be further described in detail below in conjunction with the accompanying drawings and embodiments. It is to be understood that the specific embodiments described herein are only used to explain the present invention, rather than to limit the present invention. It should also be noted that, for ease of description, only parts related to the present invention, rather than all structures, are shown in the accompanying drawings.

[0038] Embodiment 1

[0039] Figure 1A flowchart of a browser display method for a front-end page provided in Embodiment 1 of the present invention. This embodiment can be applied to the case where a page source code file written by a programmer using a preset front-end programming framework syntax rule is directly displayed in a browser. The method of this embodiment can be executed by a browser display device for a front-end page, which can be implemented by software and / or hardware, and can be configured in a browser installed in a server or terminal device.

[0040] Accordingly, the method specifically comprises the following steps:

[0041] S110 , obtaining a page file that matches the target page to be displayed, wherein the page file includes: a compiled plug-in and a page source code file.

[0042] The page file includes all the contents used to generate a target page that can be directly displayed in a browser, and the page file includes a compilation plug-in and a page source code file.

[0043] The page source code file specifically refers to a source code file written by a programmer using a preset front-end programming framework syntax rule and used to generate a setting front-end page.

[0044] The front-end programming framework grammar rules refer to programming rules that match the front-end programming framework (or programming language), which are used to describe what kind of strings in the front-end programming framework are considered valid programs. These rules define the grammar in the front-end programming framework.

[0045] Among them, source code files (also called source programs) refer to uncompiled text files written in accordance with certain programming language specifications. They are a collection of human-readable computer language instructions (i.e., source code). The ultimate goal of computer source code files is to translate human-readable text into binary instructions that can be executed by computers. This process is called compilation and is completed by a compiler.

[0046] In an optional implementation of this embodiment, considering that the React programming framework has become the mainstream front-end page programming framework, more and more programmers choose to use the React programming framework to develop front-end pages. Accordingly, the front-end programming framework can be the React programming framework.

[0047] For example, for the React programming language, it is necessary to meet the front-end programming framework syntax rules such as each file contains only one React component, uses JSX syntax, and uses class as the basis for writing components. For page source code files, specifically, the React programming language can be the basis of programs and websites, and can also exist in each software. The software is executed according to the React programming language, and the commonly used format is a text file.

[0048] Among them, the React programming framework can be a JavaScript library for building user interfaces, mainly used to build UI (User Interface), rather than an MVC framework, but React can be used as the View layer of the MVC architecture and easily used in existing projects. It is a JavaScript library for building user interfaces, originated from Facebook's internal project, and used to build Instagram's website. React has high performance and very simple code logic, and more and more people have begun to pay attention to and use it.

[0049] It should be emphasized that the inventor has proposed a new technical solution of adding a compilation plug-in to the page file in response to various problems of the prior art. By using the compilation plug-in, programmers no longer need to install scaffolding tools such as node npm, and need a series of configurations, packaging and compilation to generate the final front-end page (executable file) that can be displayed in the browser. Instead, they only need to attach the above-mentioned compilation plug-in to the page file, and the compilation plug-in can automatically implement the above-mentioned configuration, packaging and compilation process, that is, the conversion from the page source code file to the executable file is realized. Furthermore, it allows developers to directly write JS files and preview them in the browser without packaging and compiling. The written JS file is the final file.

[0050] S120: Calling the compilation plug-in to compile the page source code file to form a page compilation result that matches the page source code file.

[0051] In an optional implementation manner of this embodiment, taking the front-end programming framework as the React programming framework as an example, calling the compilation plug-in to compile the page source code file to form a page compilation result matching the page source code file may be:

[0052] Whenever the compilation plug-in detects data changes in the page source code file, the DOM (Document Object Model) nodes included in the page source code file are updated according to the data changes to form the page compilation result.

[0053] Optionally, detecting, by the compilation plug-in, that a data change occurs in the page source code file, may specifically include: detecting, by the compilation plug-in, that a data change occurs in the page source code file by adopting an observer mode.

[0054] In an optional implementation of this embodiment, the page source code file is a source code file that complies with the grammatical rules of the React programming framework; accordingly, a streamlined React framework can be used in the compilation plug-in to generate a page compilation result.

[0055] As mentioned above, if the compilation plug-in is used to perform the above-mentioned configuration, packaging and compilation process for the React source code file, it is necessary to enter the React framework in the compilation plug-in. The inventor takes into account that the content included in the React framework is very rich and complex. Therefore, when the target page is a lightweight page, it is possible to consider introducing a streamlined React framework in the compilation plug-in, thereby reducing the code size of the front-end page and achieving the purpose of streamlining the page code.

[0056] S130: Load the page compilation result to display the target page in the browser.

[0057] In this embodiment, since the compilation plug-in directly forms the page compilation result dynamically according to the implementation mechanism of the React programming framework, and then, through a layer of translation process of the compilation plug-in, from the developer's perspective, the page source code file compiled by it can be directly displayed in the browser and can be directly sent to other users for viewing, which greatly reduces the developer's development steps to obtain the front-end page and lowers the technical threshold for developers.

[0058] The technical solution provided by the embodiment of the present invention obtains a page file matching a target page to be displayed; calls the compilation plug-in to compile the page source code file to form a page compilation result matching the page source code file; loads the page compilation result, and uses a technical means to display the target page in the browser. The compilation plug-in is carried in the page file and transmitted together with the page source code file, so that after obtaining the page file, the browser can directly use the compilation plug-in to compile the page source code file to obtain a target page that can be directly displayed in the browser. The technical solution of the embodiment of the present invention can enable developers to directly write page source code files, which can be previewed in the browser without the need for subsequent packaging and compilation operations. The written page source code file (JS code) is the final file. On the basis of ensuring the front-end programming framework programming habits of programmers, the operation steps of developers to develop and obtain the front-end page are reduced, and the code volume of the front-end page is greatly reduced, thereby achieving the purpose of streamlining the page code.

[0059] On the basis of the above embodiments, the compilation plug-in is called to compile the page source code file to form a page compilation result matching the page source code file in the following manner:

[0060] Call the compilation plug-in to convert the page source code file into an associated page source code file that conforms to the grammatical rules of the associated front-end programming framework, the code amount of the associated front-end programming framework is smaller than the code amount of the front-end programming framework of the page source code file; compile the associated page source code file to form a page compilation result that matches the page source code file.

[0061] In this optional implementation, considering that the React programming framework is used to develop the front-end page, the amount of library function code used by the framework is large, even if the above framework is used to develop a small page (typically, an H5 page), the page size of the target page formed will be large. Therefore, in order to streamline the code and reduce the page size, the associated front-end programming framework can be the jQuery programming framework.

[0062] jQuery programming framework is a fast and concise JavaScript framework. It is another excellent JavaScript code library framework after Prototype. It was released by John Resig in January 2006. The design principle of jQuery is "write Less, Do More", which advocates writing less code and doing more things. It encapsulates the commonly used functional codes of JavaScript, provides a simple JavaScript design mode, and optimizes HTML document operations, event processing, animation design and Ajax interaction.

[0063] In an optional implementation of this embodiment, the compilation plug-in is called to convert the page source code file into an associated page source code file that conforms to the grammatical rules of the associated front-end programming framework in the following manner:

[0064] The page source code file is parsed to obtain the first function code included in the page source code; each first function code is matched with each front-end programming framework template code, and based on the matching result, the front-end programming framework template code corresponding to each first function code and the matching configuration parameter filling value are obtained; based on the mapping relationship between the front-end programming framework template code and the associated front-end programming framework template code, the associated front-end programming framework template code corresponding to each first function code is obtained; each configuration parameter filling value is filled in the matching associated front-end programming framework template code to form each second function code; each first function code included in the page source code file is traversed in turn, and each first function code is replaced with a matching second function code to generate the associated page source code file.

[0065] The page source code file includes one or more different first function codes, each of which is used to implement an independent and complete page layout function. Typically, the first function code can be used to set the page position in the developed front-end page, and display or arrange page elements of a set type (pictures or videos, etc.). Specifically, the first function codes included in the page source code can be identified by parsing the preset function code start character and function code end character.

[0066] Considering that the front-end page development functions that can be achieved by using the syntax rules of the front-end programming framework are known, for example, inserting pictures, inserting dates and times, or laying out page function controls, etc., therefore, multiple front-end programming framework template codes can be formed in advance for the front-end programming framework (for example, the React framework), and different front-end programming framework template codes correspond to different front-end page development functions.

[0067] Each front-end programming framework template code includes one or more blank areas for filling in custom configuration parameter filling values, such as layout position, storage address of inserted page elements, etc.

[0068] In this embodiment, by matching each first function code with each front-end programming framework template code, it can be determined that each first function code is obtained by filling in which first front-end programming framework template code the configuration parameter filling value is filled.

[0069] In a specific example, if it is determined that the first function code A has the highest match with the preset front-end programming framework template code B, then by matching the location of the blank area of ​​the front-end programming framework template code B with the first function code A, the customized configuration parameter fill values ​​input for the front-end programming framework template code B can be obtained from the first function code A.

[0070] In this embodiment, since both the front-end programming framework and the associated front-end programming framework are for realizing the development of the front-end page, by using the associated front-end programming framework syntax rules to write the code, the same front-end page development function as that written using the front-end programming framework syntax rules can be obtained. Based on this, the programmer can pre-write the associated front-end programming framework template code that corresponds one-to-one with each of the front-end programming framework template codes to correspond to different front-end page development functions.

[0071] Furthermore, by querying the pre-established mapping relationship between the front-end programming framework template code and the associated front-end programming framework template code, the associated front-end programming framework template code corresponding to each first function code in the page source code file can be queried.

[0072] As mentioned above, the associated front-end programming framework template code matches the front-end programming framework template code, and further, each associated front-end programming framework template code includes one or more blank areas for filling in custom configuration parameter filling values.

[0073] Accordingly, by filling the configuration parameter filling values ​​obtained from each first function code in the page source code file into the matching associated front-end programming framework template code, a second function code corresponding to each first function code can be formed. The second function code is a code that implements the same front-end page development function as the matching first function code and conforms to the grammatical rules of the associated front-end programming framework.

[0074] In an optional implementation of this embodiment, the configuration parameter filling value can be directly filled in the associated front-end programming framework template code, or the configuration parameter filling value can be converted into a format that matches the grammatical rules of the associated front-end programming framework and then filled in the associated front-end programming framework template code. This embodiment does not limit this.

[0075] The associated page source code file may be a source code file composed of a plurality of second function codes to implement the same front-end page development function as the page source code file.

[0076] Specifically, taking the front-end programming framework as the React programming framework and the associated front-end programming framework as the jQuery programming framework as an example, after using the jQuery programming framework template codes with different functions and the corresponding configuration parameter filling values ​​to form multiple second function codes, the associated page source code file can be composed according to the multiple second function codes.

[0077] Exemplarily, by traversing each first function code included in the page source code file written using the React programming framework syntax rules, the React programming framework template code corresponding to each first function code and the corresponding configuration parameter filling value can be obtained. Further, the configuration parameters can be filled in the jQuery programming framework template code corresponding to each React programming framework template code to form the second function code corresponding to the jQuery programming framework, and by replacing each first function code in the page source code file with each second function code, the associated page source code file that conforms to the jQuery programming framework syntax rules can be finally obtained.

[0078] In this embodiment, since the page source code file is implemented by multiple first function codes, it is necessary to traverse the page source code file. Further, the traversed multiple first function codes are replaced with matching second function codes respectively. Correspondingly, according to the multiple second function codes, an associated page source code file is further generated.

[0079] The advantage of such a setting is that by traversing the page source code file, a plurality of first function codes are obtained, and further, the first function codes are converted into corresponding second function codes, and an associated page source code file can be further generated. In this way, the associated page source code file is used to accurately implement the function of the page source code file, which can reduce errors and the loss of some functions.

[0080] The purpose of converting the source code files is that since the React programming framework is used to develop the front-end page, the library function code used by the framework is very large. Even if the framework is used to develop a small page (typically, an H5 page), the target page finally compiled will be very large. Therefore, the jQuery programming framework can be used as the associated front-end programming framework to further streamline the code and reduce the page size.

[0081] Embodiment 2

[0082] Figure 2 A flowchart of a source code file compilation method provided in the second embodiment of the present invention. This embodiment is applicable to the case where a page source code file written by a programmer using a preset front-end programming framework syntax rule is directly displayed in a browser. The method of this embodiment can be executed by a source code file compilation device, which can be implemented by software and / or hardware. The device can generally be configured in a compilation plug-in in a page file. Accordingly, the embodiment of the present invention can specifically include:

[0083] S210: When triggered by the browser, compile the page source code file in the page file to form a page compilation result that matches the page source code file.

[0084] The browser is used to obtain a page file that matches a target page to be displayed, wherein the page file includes: a compilation plug-in and a page source code file.

[0085] Specifically, compiling the page source code file in the page file to form a page compilation result matching the page source code file may include:

[0086] Whenever a data change is detected in the page source code file, the document object model DOM node included in the page source code file is updated according to the data change to form the page compilation result.

[0087] Further, detecting that data changes occur in the page source file may specifically include:

[0088] The observer mode is adopted to detect data changes in the page source code file.

[0089] Furthermore, the page source code file is a source code file that complies with the grammatical rules of the React programming framework;

[0090] In the compilation plug-in, a streamlined React framework is used to generate page compilation results.

[0091] S220: providing the page compilation result to the browser for loading, so as to display the target page in the browser.

[0092] The technical solution provided by the embodiment of the present invention uses a compilation plug-in to compile the page source code file to form a technical means of a page compilation result that matches the page source code file. The compilation plug-in is carried in the page file and transmitted together with the page source code file, so that after the browser obtains the page file, it can directly use the compilation plug-in to compile the page source code file to obtain a target page that can be directly displayed in the browser. The technical solution of the embodiment of the present invention can enable developers to directly write page source code files and preview them in the browser without the need for subsequent packaging and compilation operations. The written page source code file (JS code) is the final file. On the basis of ensuring the front-end programming framework programming habits of programmers, the developer's development steps to obtain the front-end page are reduced, and the code volume of the front-end page is greatly reduced, thereby achieving the purpose of streamlining the page code.

[0093] Embodiment 3

[0094] Figure 3 This is a schematic diagram of the structure of a browser display device for a front-end page provided in the third embodiment of the present invention. The front-end page generation device provided in this embodiment can be implemented by software and / or hardware, and can be configured in a computer device with a browser installed to implement a browser display method for a front-end page in the embodiment of the present invention. Figure 3 As shown, the device may specifically include: a page file acquisition module 310, a compilation plug-in calling module 320 and a page compilation result loading module 330, wherein:

[0095] The page file acquisition module 310 is used to acquire a page file matching the target page to be displayed, wherein the page file includes: a compilation plug-in and a page source code file;

[0096] A compiling plug-in calling module 320 is used to call the compiling plug-in to compile the page source code file to form a page compilation result matching the page source code file;

[0097] The page compilation result loading module 330 is used to load the page compilation result to display the target page in the browser.

[0098] The technical solution provided by the embodiment of the present invention obtains a page file matching a target page to be displayed; calls the compilation plug-in to compile the page source code file to form a page compilation result matching the page source code file; loads the page compilation result, and uses a technical means to display the target page in the browser. The compilation plug-in is carried in the page file and transmitted together with the page source code file, so that after obtaining the page file, the browser can directly use the compilation plug-in to compile the page source code file to obtain a target page that can be directly displayed in the browser. The technical solution of the embodiment of the present invention can enable developers to directly write page source code files, which can be previewed in the browser without the need for subsequent packaging and compilation operations. The written page source code file (JS code) is the final file. On the basis of ensuring the front-end programming framework programming habits of programmers, the operation steps of developers to develop and obtain the front-end page are reduced, and the code volume of the front-end page is greatly reduced, thereby achieving the purpose of streamlining the page code.

[0099] Based on the above embodiments, the compile plug-in calling module 320 can be specifically used for:

[0100] Whenever the compilation plug-in detects a data change in the page source code file, the DOM node included in the page source code file is updated according to the data change to form the page compilation result.

[0101] Based on the above embodiments, the compile plug-in calling module 320 can be specifically used for:

[0102] The compiler plug-in uses the observer mode to detect data changes in the page source code file.

[0103] On the basis of the above embodiments, the page source code file may be a source code file that complies with the grammatical rules of the React programming framework;

[0104] In the compilation plug-in, a streamlined React framework is used to generate page compilation results.

[0105] The above-mentioned browser display device for the front-end page can execute the browser display method for the front-end page provided by any embodiment of the present invention, and has the corresponding functional modules and beneficial effects of the execution method.

[0106] Embodiment 4

[0107] Figure 4 1 is a schematic diagram of the structure of a source code file compilation device provided by the fourth embodiment of the present invention. The source code file compilation device provided by this embodiment can be implemented by software and / or hardware, and can be configured in a compilation plug-in in a page file to implement a source code file compilation method in the embodiment of the present invention. Figure 4 As shown, the device may specifically include: a source code compiling module 410 and a compiling result providing module 420, wherein:

[0108] The source code compiling module 410 is used to compile the page source code file in the page file to form a page compilation result matching the page source code file when triggered by the browser;

[0109] The browser is used to obtain a page file matching the target page to be displayed, wherein the page file includes: a compilation plug-in and a page source code file;

[0110] The compilation result providing module 420 is used to provide the page compilation result to the browser for loading, so as to display the target page in the browser.

[0111] The technical solution provided by the embodiment of the present invention uses a compilation plug-in to compile the page source code file to form a technical means of a page compilation result matching the page source code file. The compilation plug-in is carried in the page file and transmitted together with the page source code file, so that after the browser obtains the page file, it can directly use the compilation plug-in to compile the page source code file to obtain a target page that can be directly displayed in the browser. The technical solution of the embodiment of the present invention can enable developers to directly write page source code files and preview them in the browser without the need for subsequent packaging and compilation operations. The written page source code file (JS code) is the final file. On the basis of ensuring the front-end programming framework programming habits of programmers, the operating steps for developers to develop and obtain the front-end page are reduced, and the code volume of the front-end page is greatly reduced, thereby achieving the purpose of streamlining the page code.

[0112] Embodiment 5

[0113] Figure 5 Schematic diagram of the structure of a computer device provided by Embodiment 5 of the present invention. Figure 5 As shown, the device includes a processor 510, a memory 520, an input device 530, and an output device 540; the number of processors 510 in the device can be one or more. Figure 5A processor 510 is taken as an example; the processor 510, the memory 520, the input device 530 and the output device 540 in the device can be connected via a bus or other means. Figure 5 The example of connecting through bus is taken in the following.

[0114] The memory 520, as a computer-readable storage medium, can be used to store software programs, computer executable programs and modules, such as program instructions / modules corresponding to the method for generating a front-end page in an embodiment of the present invention (for example, the page file acquisition module 310, the compilation plug-in calling module 320 and the page compilation result loading module 330, or the source code compilation module 410 and the compilation result providing module 420). The processor 510 executes various functional applications and data processing of the device by running the software programs, instructions and modules stored in the memory 520, that is, implements the above-mentioned browser display method of a front-end page executed by a browser, which includes:

[0115] Obtaining a page file that matches the target page to be displayed, wherein the page file includes: a compiled plug-in and a page source code file;

[0116] Calling the compilation plug-in to compile the page source code file to form a page compilation result that matches the page source code file;

[0117] The page compilation result is loaded to display the target page in the browser.

[0118] Alternatively, the above-mentioned method for compiling a source code file executed by a compiling plug-in in a page file is implemented, the method comprising:

[0119] When triggered by the browser, the page source code file in the page file is compiled to form a page compilation result matching the page source code file;

[0120] The browser is used to obtain a page file matching the target page to be displayed, wherein the page file includes: a compilation plug-in and a page source code file;

[0121] The page compilation result is provided to the browser for loading, so as to display the target page in the browser.

[0122] The memory 520 may mainly include a program storage area and a data storage area, wherein the program storage area may store an operating system and at least one application required for a function; the data storage area may store data created according to the use of the terminal, etc. In addition, the memory 520 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, or other non-volatile solid-state storage device. In some instances, the memory 520 may further include a memory remotely arranged relative to the processor 510, and these remote memories may be connected to the device via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0123] The input device 530 may be used to receive input digital or character information and generate key signal input related to user settings and function control of the device. The output device 540 may include a display device such as a display screen.

[0124] Embodiment 6

[0125] Embodiment 6 of the present invention further provides a storage medium including computer executable instructions, wherein the computer executable instructions are used to implement a browser display method of a front-end page executed by a browser when executed by a computer processor, the method comprising:

[0126] Obtaining a page file that matches the target page to be displayed, wherein the page file includes: a compiled plug-in and a page source code file;

[0127] Calling the compilation plug-in to compile the page source code file to form a page compilation result that matches the page source code file;

[0128] The page compilation result is loaded to display the target page in the browser.

[0129] Alternatively, a method for compiling a source code file executed by a compiling plug-in in a page file is implemented, the method comprising:

[0130] When triggered by the browser, the page source code file in the page file is compiled to form a page compilation result matching the page source code file;

[0131] The browser is used to obtain a page file matching the target page to be displayed, wherein the page file includes: a compilation plug-in and a page source code file;

[0132] The page compilation result is provided to the browser for loading, so as to display the target page in the browser.

[0133] Of course, the computer executable instructions of a storage medium including computer executable instructions provided by an embodiment of the present invention are not limited to the operations of the method described above, and can also execute related operations in the front-end page generation method provided by any embodiment of the present invention.

[0134] Through the above description of the implementation methods, the technicians in the relevant field can clearly understand that the present invention can be implemented by means of software and necessary general hardware, and of course it can also be implemented by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present invention, in essence, or the part that contributes to the prior art, can be embodied in the form of a software product, and the computer software product can be stored in a computer-readable storage medium, such as a computer floppy disk, a read-only memory (ROM), a random access memory (RAM), a flash memory (FLASH), a hard disk or an optical disk, etc., including a number of instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods described in each embodiment of the present invention.

[0135] It is worth noting that in the embodiments of the above-mentioned browser display device of the front-end page and the compilation device of the source code file, the various units and modules included are only divided according to functional logic, but are not limited to the above-mentioned division, as long as the corresponding functions can be achieved; in addition, the specific names of the functional units are only for the convenience of distinguishing each other, and are not used to limit the scope of protection of the present invention.

[0136] Note that the above are only preferred embodiments of the present invention and the technical principles used. Those skilled in the art will understand that the present invention is not limited to the specific embodiments described herein, and that various obvious changes, readjustments and substitutions can be made by those skilled in the art without departing from the scope of protection of the present invention. Therefore, although the present invention has been described in more detail through the above embodiments, the present invention is not limited to the above embodiments, and may include more other equivalent embodiments without departing from the concept of the present invention, and the scope of the present invention is determined by the scope of the appended claims.

Claims

1. A browser display method for a front-end page, executed by a browser, characterized in that: include: Obtaining a page file that matches the target page to be displayed, wherein the page file includes: a compiled plug-in and a page source code file; Calling the compilation plug-in to compile the page source code file to form a page compilation result that matches the page source code file; Loading the page compilation result to display the target page in the browser; The step of calling the compilation plug-in to compile the page source code file to form a page compilation result matching the page source code file includes: Calling the compilation plug-in to convert the page source code file into an associated page source code file that conforms to the grammatical rules of an associated front-end programming framework, wherein the code volume of the associated front-end programming framework is smaller than the code volume of the front-end programming framework of the page source code file; compiling the associated page source code file to form a page compilation result that matches the page source code file; The calling of the compiling plug-in to convert the page source code file into an associated page source code file that complies with the grammatical rules of the associated front-end programming framework includes: The page source code file is parsed to obtain the first function code included in the page source code; each first function code is matched with each front-end programming framework template code, and based on the matching result, the front-end programming framework template code corresponding to each first function code and the matching configuration parameter filling value are obtained; based on the mapping relationship between the front-end programming framework template code and the associated front-end programming framework template code, the associated front-end programming framework template code corresponding to each first function code is obtained; each configuration parameter filling value is filled in the matching associated front-end programming framework template code to form each second function code; each first function code included in the page source code file is traversed in turn, and each first function code is replaced with a matching second function code to generate the associated page source code file.

2. The method according to claim 1, characterized in that Compiling the page source code file through the compilation plug-in to form a page compilation result matching the page source code file, including: Whenever the compilation plug-in detects a data change in the page source code file, the document object model DOM node included in the page source code file is updated according to the data change to form the page compilation result.

3. The method according to claim 2, characterized in that Detecting data changes in the page source code file through the compilation plug-in includes: The compiler plug-in uses the observer mode to detect data changes in the page source code file.

4. The method according to claim 3, characterized in that The page source code file is a source code file that conforms to the grammatical rules of the React programming framework; In the compilation plug-in, a streamlined React framework is used to generate page compilation results.

5. A method for compiling a source code file, executed by a compiling plug-in in a page file, characterized in that: include: When triggered by the browser, the page source code file in the page file is compiled to form a page compilation result matching the page source code file; The browser is used to obtain a page file matching the target page to be displayed, wherein the page file includes: a compilation plug-in and a page source code file; Providing the page compilation result to the browser for loading, so as to display the target page in the browser; When triggered by the browser, the page source code file in the page file is compiled to form a page compilation result matching the page source code file, including: When triggered by a browser, the page source code file is converted into an associated page source code file that conforms to the grammatical rules of an associated front-end programming framework, wherein the code volume of the associated front-end programming framework is smaller than the code volume of the front-end programming framework of the page source code file; the associated page source code file is compiled to form a page compilation result that matches the page source code file; The step of converting the page source code file into an associated page source code file that complies with the grammatical rules of an associated front-end programming framework includes: The page source code file is parsed to obtain the first function code included in the page source code; each first function code is matched with each front-end programming framework template code, and based on the matching result, the front-end programming framework template code corresponding to each first function code and the matching configuration parameter filling value are obtained; based on the mapping relationship between the front-end programming framework template code and the associated front-end programming framework template code, the associated front-end programming framework template code corresponding to each first function code is obtained; each configuration parameter filling value is filled in the matching associated front-end programming framework template code to form each second function code; each first function code included in the page source code file is traversed in turn, and each first function code is replaced with a matching second function code to generate the associated page source code file.

6. The method according to claim 5, characterized in that Compiling the page source code file in the page file to form a page compilation result matching the page source code file includes: Whenever a data change is detected in the page source code file, the document object model DOM node included in the page source code file is updated according to the data change to form the page compilation result.

7. A browser display device for a front-end page, executed by a browser, characterized in that: include: A page file acquisition module is used to acquire a page file matching the target page to be displayed, wherein the page file includes: a compilation plug-in and a page source code file; A compiling plug-in calling module, used to call the compiling plug-in to compile the page source code file to form a page compilation result matching the page source code file; A page compilation result loading module, used for loading the page compilation result to display the target page in the browser; Wherein, the compiling plug-in calling module includes: A compiling plug-in calling unit is used to call the compiling plug-in to convert the page source code file into an associated page source code file that conforms to the grammatical rules of an associated front-end programming framework, wherein the code volume of the associated front-end programming framework is smaller than the code volume of the front-end programming framework of the page source code file; compile the associated page source code file to form a page compilation result that matches the page source code file; Wherein, the compiling plug-in calling unit includes: The associated page source code generation subunit is used to parse the page source code file to obtain the first function code included in the page source code; match each first function code with each front-end programming framework template code, and obtain the front-end programming framework template code corresponding to each first function code and the matching configuration parameter filling value based on the matching result; obtain the associated front-end programming framework template code corresponding to each first function code according to the mapping relationship between the front-end programming framework template code and the associated front-end programming framework template code; fill each configuration parameter filling value into the matching associated front-end programming framework template code to form each second function code; traverse each first function code included in the page source code file in turn, and replace each first function code with a matching second function code to generate the associated page source code file.

8. A source code file compilation device, executed by a compilation plug-in in a page file, characterized in that: include: A source code compiling module, which is used to compile the page source code file in the page file when triggered by the browser, to form a page compilation result matching the page source code file; The browser is used to obtain a page file matching the target page to be displayed, wherein the page file includes: a compilation plug-in and a page source code file; A compilation result providing module, used for providing the page compilation result to the browser for loading, so as to display the target page in the browser; Wherein, the source code compilation module includes: A source code compiling unit, which is used to convert the page source code file into an associated page source code file that conforms to the grammatical rules of an associated front-end programming framework when triggered by a browser, wherein the code volume of the associated front-end programming framework is smaller than the code volume of the front-end programming framework of the page source code file; compile the associated page source code file to form a page compilation result that matches the page source code file; Wherein, the source code compilation unit includes: The page source code compilation subunit is used to parse the page source code file to obtain the first function code included in the page source code; match each first function code with each front-end programming framework template code, and obtain the front-end programming framework template code corresponding to each first function code and the matching configuration parameter filling value according to the matching result; obtain the associated front-end programming framework template code corresponding to each first function code according to the mapping relationship between the front-end programming framework template code and the associated front-end programming framework template code; fill each configuration parameter filling value into the matching associated front-end programming framework template code to form each second function code; traverse each first function code included in the page source code file in turn, and replace each first function code with a matching second function code to generate the associated page source code file.

9. A computer device comprising a memory, a processor and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, the browser display method of the front-end page according to any one of claims 1-4 is implemented, or the source code file compilation method according to any one of claims 5-6 is implemented.

10. A computer executable instruction storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, it implements the browser display method of the front-end page as described in any one of claims 1-4, or implements the compilation method of the source code file as described in any one of claims 5-6.

Images