WO2017124952A1

WO2017124952A1 - Webpage script loading method and device

Info

Publication number: WO2017124952A1
Application number: PCT/CN2017/070890
Authority: WO
Inventors: 郑欣
Original assignee: 阿里巴巴集团控股有限公司; 郑欣
Priority date: 2016-01-21
Filing date: 2017-01-11
Publication date: 2017-07-27
Also published as: TW201732647A; CN106990976A

Abstract

A webpage script loading method and a webpage script loading device. The method comprises: loading a first script (110); according to the dependency definition of the first script, parsing the dependencies of the first script (120); if the dependency of the first script includes a plurality of second scripts, then acquiring and loading the plurality of second scripts (130); if the dependency of the first script includes html files, then obtaining the html files through a third-party plug-in and rendering them (140); if the dependency of the first script includes respective cascading style files, then obtaining the respective cascading style files through a third party plug-in and rendering them (150); after completing the processing of all the dependencies of the first script, executing the service logic of the first script (160). The method provides clear dependency relationships among the services of webpage codes, strong reusability of code of each function, thereby reducing the code amount, the clear webpage code structure enables the logic of each service to be decoupled, thereby conveniently modifying the webpage codes, and facilitating service splitting and other operations.

Description

Webpage script loading method and device

Technical field

The present application relates to the field of webpage technologies, and in particular, to a webpage script loading method and a webpage script loading apparatus.

Background technique

With the development of the Internet, there are more and more webpages. In the prior art, when the front end develops the webpage code, if the webpage has new business requirements, the new business code is added to the webpage code according to the requirement, and the webpage code is relatively scattered as the business changes and increases. miscellaneous.

Among them, the front end in web development: usually developed for client programs such as browsers, is a program running on the browser side; the front end is something that users can see and see in the web application, including the web. The structure of the page, the visual appearance of the web page, and the interactive implementation of the web page. Correspondingly, the backend: for the server, it should be developed for the server side accurately, the program that provides the data is running in the server; the back end is more to interact with the database to handle the corresponding business logic. What needs to be considered is how to implement functions, data access, platform stability and performance.

In the above case, if some services have overlapping functions, it is necessary to repeatedly write corresponding codes for the functions in each service code, the code reusability is poor, and the code amount is large; and the above-mentioned scattered code may lead to logical coupling of services. When the modification is made to a certain business, due to the logical coupling, it is necessary to modify a large amount of code related to other services; in addition, if the business is to be split for the webpage, it is difficult to split due to code confusion and logical coupling.

Summary of the invention

In view of the above problems, embodiments of the present application have been made in order to provide a webpage script loading method and a corresponding webpage script loading apparatus that overcome the above problems or at least partially solve the above problems.

In order to solve the above problem, the present application discloses a webpage script loading method, including:

Load the first script;

Parsing the dependency of the first script according to a dependency definition for the first script;

When the dependency of the first script includes each second script, acquiring each second script to load;

When the dependency of the first script includes an html file, the html file is obtained by a third-party plug-in and rendered;

When the dependency of the first script includes a hierarchical style file, the third-level plug-in obtains each level of the style file and renders;

After all the dependencies of the first script are processed, the business logic of the first script is executed.

The application also discloses a webpage script loading device, comprising:

a first script loading module for loading the first script;

a dependency parsing module, configured to parse a dependency of the first script according to a dependency definition for the first script;

a second script processing module, configured to: when the dependency of the first script includes each second script, acquire each second script to load;

An html file processing module, configured to: when the dependency of the first script includes an html file, obtain the html file by using a third-party plug-in and render;

a cascading style file processing module, configured to: when the dependency of the first script includes a plurality of style files, acquire a style file of each level through a third-party plug-in and render;

The first script execution module is configured to execute the business logic of the first script after all the dependencies of the first script are processed.

Embodiments of the present application include the following advantages:

In this embodiment of the present application, the corresponding function modules of the webpage may be preset in advance. Second script, html (HyperText Mark-up Language) files for each business or function, CSS (Cascading Style Sheets) files for each script, and then for a certain business of the web page or Function, if it needs a corresponding second script, html file, cascading style sheet, then the second script that the first script depends on may be defined in the dependency definition of the first script corresponding to the business or function, html Files and individual CSS files. Then, after obtaining the first script, the client first parses the dependent second script, html file, cascading style sheet file and the like from its dependency definition. For the second script, then the second script is first loaded for loading; for the html file, the html file can be obtained and rendered by the third-party plug-in; for the cascading style file, the third-level plug-in can obtain the style files of each level and Rendering, after all the dependencies of the first script are processed, the client executes the code of the business logic of the first script. In this way, the dependencies of each service of the webpage code are clear, the code reusability of each function is strong, the code amount can be reduced, the webpage code structure is clear, the logic of each service can be decoupled, the webpage code can be easily modified, and the business splitting is facilitated. jobs.

DRAWINGS

1 is a flow chart of steps of an embodiment of a webpage script loading method of the present application;

2 is a flow chart of steps of another embodiment of a webpage script loading method of the present application;

2A is a logical example diagram of a webpage script loading method of the present application;

3 is a structural block diagram of an embodiment of a webpage script loading apparatus of the present application.

detailed description

The above described objects, features and advantages of the present application will become more apparent and understood.

One of the core concepts of the embodiments of the present application is that a corresponding second script, a html (HyperText Mark-up Language) file of each service or function, and each of the function modules required for each web page may be preset. The CSS (Cascading Style Sheets) file corresponding to the script, and then for a web page, a certain business or function, if it needs the corresponding second script, html file, cascading style The table may define, in the dependency definition of the corresponding first script, each second script, html file and each css file on which the first script depends. Then, after obtaining the first script, the client can utilize requirejs (requirejs is a JavaScript module loading framework, which is one of the implementers of the AMD (Asynchronous Module Definition) specification), etc., first from The second script, html file, and cascading style file whose dependencies are resolved in the dependency definition. For the html file, the html file can be obtained and rendered by a third-party plug-in; for the cascading style file, the cascading style files can be obtained and rendered by the third-party plug-in, after all the dependencies of the first script are completely processed. The client then executes the code of the business logic of the first script. In this way, the dependencies of each service of the webpage code are clear, the code reusability of each function is strong, the code amount can be reduced, the webpage code structure is clear, the logic of each service can be decoupled, the webpage code can be easily modified, and the business splitting is facilitated. jobs.

Embodiment 1

Referring to FIG. 1 , a flow chart of steps of an embodiment of a webpage script loading method of the present application is shown, which may specifically include the following steps:

Step 110, loading a first script;

In the embodiment of the present application, when the webpage is built in the front end, the loading interface of the first script may be preset in the html code of the main html document of the webpage. For example, add the above load interface in the <script> of the html code.

For example, the load interface of the requirejs library is used. The load interface example is as follows: <script data-main="main"src="require.js"></script>. Where src="require.js" represents the path of the first script on the server, and data-main="main" represents the main function of the first script.

Of course, in the actual application, the loading interface of the first script may also be added in other locations, which is not limited in the embodiment of the present application.

In the embodiment of the present application, a loading interface of the first script may be added to the webpage code, and a loading interface of the plurality of first scripts may be added, which is not limited in the embodiment of the present application. Of course, if there are multiple loading interfaces of the first script, the business logic of each first script is different.

In the embodiment of the present invention, after the client obtains the main html document, parsing the html code therein, and when parsing the loading interface of the first script, acquiring the corresponding first script from the server, and then loading the first script.

In the embodiment of the present application, in the first script, a dependency definition is preset, for example, one or more second scripts, html files, and CSS files that the first script depends on are defined in the main function of the first script. . Then place the dependent second scripts, and/or html files, and/or CSS files under the folder of the corresponding path of the server.

It can be understood that in the actual application, when the client obtains the main html document, parses other html code, and may also parse other parts, such as other tags in the html code. The embodiments of the present application do not limit them.

Of course, the loading interface of other libraries may also be used in the present application, which is not limited in the embodiment of the present application.

It can be understood that the client can be a browser or other program or application capable of processing html code. The browser can be a personal computer browser or a browser of a smart mobile terminal. The embodiments of the present application do not limit them.

Step 120: Parse the dependency of the first script according to a dependency definition for the first script.

Since the present application sets a dependency definition for the first script in advance, after loading the first script, the dependency of the first script is first parsed from the dependency definition of the first script.

In a practical application, a second script that writes a requirement in the dependency definition of the first script may be a second script, and/or an html file, and/or a CSS file according to a business requirement, according to a technical developer on the server side. And / or html files, and / or CSS files. Then, in the embodiment of the present application, there may be multiple situations when parsing the dependency of the first script, such as:

1. Only rely on the second script.

2, only rely on html files.

3. Only rely on CSS files.

In this case, the CSS file can be a CSS file for the first script.

4. Rely on each second script and html file.

5, rely on the second script and CSS file;

In this case, if there are multiple CSS files, the multiple CSS files may be CSS files for some of the first script and the second script.

6, rely on html files, and CSS files;

In this case, the CSS file can be a CSS file for the first script.

7, rely on the second script, html file, CSS file.

Then, in the embodiment of the present application, the dependency of the first script is parsed, and according to the preset situation, it may be resolved to the above several cases.

Step 130: When the dependency of the first script includes each second script, acquire each second script to load;

In the embodiment of the present application, if the dependency obtained by the foregoing parsing includes each second script, each second script is acquired from the server under the folder of the foregoing path, and then each second script may be loaded.

In the embodiment of the present application, when the first script depends on one or some second scripts, and the second script is also used as the identity of the first script, after loading the first script, performing steps 120-160 .

Step 140: When the dependency of the first script includes an html file, the html file is obtained and rendered by a third-party plug-in;

In the embodiment of the present application, a third-party plug-in of requirejs may be loaded for the client when the client accesses the webpage or before. Then if the dependencies obtained by the above parsing include html files, you can obtain them from the server through the third-party plugin of requirejs in the folder of the aforementioned path. Each html file can then be rendered based on the html file.

In the embodiment of the present application, the html file is rendered corresponding to a sub-interface of the webpage of the foregoing main html document.

In another preferred embodiment of the present application, the html file includes an html template, user data, and an internationalization file.

The user data includes service data such as user personalized information. Internationalized document package internationalization of copywriting data. The html template is a predetermined various page templates, and the html template includes at least a plurality of fields filled in data, such as fields filled in various personalized information of the user and fields filled in the internationalized copy data.

Further, step 140 includes sub-steps 141-143:

Sub-step 141, obtaining an html template, user data, and an internationalization file;

In the embodiment of the present application, the html file that the first script depends on includes an html template, user data, and an internationalization file. This application can obtain html templates, user data and internationalization files.

In another preferred embodiment of the present application, sub-step 141 includes sub-step A11:

Sub-step A11, acquiring an html template of the text type of the html template.

The third-party plugin for requirejs takes the text file type, from the server or html template file, and then stores it into memory.

This way, the client (such as a browser) can directly obtain the code of the html template, and then directly parse and render the code of the html template, resulting in no actual data display in the rendered webpage.

Sub-step 142, calling a template rendering engine, splicing the html template, user data, and internationalization file into an html code;

In the embodiment of the present application, the template rendering engine may be invoked, and the user data and the internationalization file are filled into the html template to obtain the html code.

In the embodiment of the present application, the template rendering engine may be ejs (EJS is the default of Canjs). Template language) template rendering engine.

In the embodiment of the present application, taking the ejs template rendering engine as an example, an ejs template rendering engine may be pre-built. And in the code of the html file that the first script depends on, add a <script> tag, and then reference the ejs template rendering engine in the <script> tag such as: <script type="text/javascript"src="/js/ejs. Js"></script>. After the browser obtains the main html document and executes the <script>......</script> code, it will get the script of the ejs engine and then load it.

The html template file, user data, and internationalization files can be built according to the specifications of the ejs template rendering engine. For example, the html template file is set to:

Internationalized files can be set up in a form similar to user data. Of course, in practical applications, the code for the internationalized file that conforms to the ejs template rendering template can be repackaged into a json (JavaScript Object Notation, a lightweight data exchange format) file format.

In another preferred embodiment of the present application, the internationalization document includes internationalized copy data in various languages.

In the embodiment of the present application, for a certain copy, the different locales may be different, such as a Chinese locale, an English locale, a German locale, etc., in order to facilitate the webpage to be accessed by a browser of a different locale. When the webpage is displayed, the corresponding locale's copy can be displayed on the webpage. The application can pre-translate the file into an internationalized copy in a different language environment, and then compile it according to the data format specified by the ejs template rendering engine, and then The compiled internationalized copy data is encapsulated into a json file.

Further, the calling template rendering engine, the step of splicing the html template, user data, and internationalization file into html code includes sub-step 1421 - sub-step 1423:

Sub-step 1421, obtaining a locale of the current system;

Since the json file of the international copy includes the internationalized copy of the multi-language, and in order to adapt the user's local language environment and facilitate the user to read the webpage, the embodiment of the present application first needs to obtain the locale of the current client system. For example, if the current locale of the system is Chinese, you can obtain the locale identifier, such as CN.

Sub-step 1422, extracting internationalized copy data corresponding to the locale from the internationalization file;

Then, according to the CN, the internationalized copy data corresponding to the CN is extracted from the json file.

Sub-step 1423, calling a template rendering engine, the html template, user data, and country The analytic copy data is spliced into html code.

Then call the ejs template rendering engine, extract the aforementioned temporary html template "html", and then splicing the internationalized copy data corresponding to data and CN to the html template "html" to obtain a real executable html code.

Sub-step 143, executing the html code, and rendering the sub-interface corresponding to the html code into a specified container.

The html code obtained by splicing the template rendering engine executes the code, and then renders according to the html code and renders to the specified container. The specified container is a container obtained by rendering the aforementioned main html document.

Step 150: When the dependency of the first script includes multiple levels of style files, the third-party plug-in obtains each level of the style file and renders;

In the embodiment of the present application, the third-party plug-in of requirejs may be loaded into the browser in the first script in advance. Then, if the dependency obtained by the foregoing parsing includes a CSS style file, the third-party plug-in of requirejs can be used to obtain each CSS style file from the server and then render the CSS style file under the folder of the aforementioned path.

In another preferred embodiment of the present application, when the level-of-level cascading style files include a cascading style file of the first script and a cascading style file of the at least one second script, the step 150 includes the sub-steps. 151-153:

Sub-step 151, acquiring a cascading style file of the first script and a cascading style file of the at least one second script;

In the embodiment of the present application, if the first script includes a CSS script, and one or more of the second scripts that it depends on include a CSS file, the third-party plug-in may be first used in the folder of the corresponding directory of the server or listed. CSS file.

In the embodiment of the present application, the CSS file obtained by the logic of avoiding requirejs is directly rendered. In the embodiment of the present application, the CSS file is obtained from the server in a format that requiresjs cannot be loaded.

In another preferred embodiment of the present application, sub-step 151 includes sub-step A21:

Sub-step A21: Acquire a cascading style file of a text type of the cascading style file of the first script.

In the embodiment of the present application, the CSS file of the first script may be obtained from the server by using a text type, and then stored in the memory. At this time, requrejs cannot directly load the CSS file.

Sub-step 152, loading and rendering a cascading style file of the at least one second script;

In the embodiment of the present application, the second script CSS file is first loaded and rendered.

In another preferred embodiment of the present application, sub-step 152 includes sub-step A31:

Sub-step A31, loading and rendering the cascading style file of the at least one second script through a link tag.

In the actual application, for each second script CSS file, add it to the link tag, and then requirejs can directly load and render the CSS file corresponding to the link.

Sub-step 153, after the cascading style file of the second script is rendered, the cascading style file of the first script is loaded and rendered.

After the rendering of the CSS file of all the second scripts is completed, the embodiment of the present application loads the CSS file of the first script.

In another preferred embodiment of the present application, sub-step 153 includes sub-step A41:

Sub-step A31, after the cascading style file of the second script is finished, the cascading style file of the text type is loaded and rendered by the style tag.

In the embodiment of the present application, since the CSS file of the first record style file is temporarily stored in the memory, after the CSS file of the second script is rendered, the CSS file may be extracted from the memory, and then the style tag is used. Load the text type file. In this way, it is guaranteed that the CSS file of the first script can be loaded at the end, and the style of the first script is not overwritten by the style of the second script.

Of course, in the embodiment of the present application, if the first script does not have a CSS file, for each second The CSS style of the script can be loaded directly using the link tag.

Step 160: After all the dependencies of the first script are processed, execute the business logic of the first script.

In the embodiment of the present application, after all the processing of the first script is completed, the processing result of the dependency is input as a parameter, and the first script can execute its specific business logic according to the parameter.

In the embodiment of the present application, a corresponding second script, a html (HyperText Mark-up Language) file for each service or function, and a CSS corresponding to each script (Cascading Style) may be preset for each functional module of the webpage requirement. Sheets, cascading style sheets) files, and then for a business or function of a web page, if it requires a corresponding second script, html file, cascading style sheet, then the corresponding first script in the business or function depends In the definition, define each second script, html file and each CSS file that the first script depends on. Then, after obtaining the first script, the client first parses the dependent second script, html file, cascading style sheet file and the like from its dependency definition. For the second script, then the second script is first loaded for loading; for the html file, the html file can be obtained and rendered by the third-party plug-in; for the cascading style file, the third-level plug-in can obtain the style files of each level and Rendering, after all the dependencies of the first script are processed, the client executes the code of the business logic of the first script. As such, the embodiments of the present application have the following advantages:

First, the application divides the functions of the requirements of the webpage into functional modules according to functional modules, and then edits the codes according to the modules, and then stores them in the server. The codes of each module are basically independent of each other, if a certain webpage When the first script needs a function, the module name and directory of the function are defined in the dependency of the first script, and the code of the module can be used. Thus, for front-end development, the code reuse rate is high, reducing the amount of code on the web page.

Second, since each module is divided according to the function module, in the code of the webpage, the first script relies on the code of each module, and the client can extract the code of the corresponding module according to the definition, and then execute according to the corresponding execution logic, Define global variables for each module in the main html document, the logic of each module can be decoupled, if you want to modify the generation of a function module The code, due to its ability to be decoupled, has a small amount of code for front-end development.

Third, based on the above process, the structure of the webpage code is clear, the logic of each business can be decoupled, and the work of business splitting is facilitated.

.

Embodiment 2

Referring to FIG. 2, a flow chart of steps of another embodiment of a webpage script loading method of the present application is shown, which may specifically include the following steps:

Step 210: Load a first script; the dependencies defined in the dependency definition of the first script include: each second script, an html file, and a hierarchical style file; the html file includes an html template, user data, and internationalization a file; the internationalization file includes internationalized copy file data in various languages; the hierarchical cascading style file includes a cascading style file of the first script and a cascading style file of the at least one second script;

The embodiment of the present application is described in conjunction with FIG. 2A. In the example of FIG. 2A, the first script A.js is defined in advance, A.js depends on the second script, and the second script includes B.js, C.js, D.js, And rely on html files, html files include html template "html", user data "data", international file "international copy", and rely on CSS files, CSS files include the first script A CSS file A.css, second The CSS file C.css of script C and the CSS file D.css of the second script D.

The above A.js, B.js, C.js, D.js, html template "html", user data "data", internationalization file "internationalized copy", A.css, C.css, D.css can Put it in a folder in the specified directory of the server.

Of course, in the dependency definition of the first script, it is also possible to configure the paths that depend on the server, such as the dependencies in the folder of the specified directory mentioned above.

After the client obtains the first script A.js, the A.js is loaded in B10 as shown in FIG. 2A.

Step 212: Parse the dependency of the first script according to a dependency definition for the first script.

After the A.js is loaded in the embodiment of the present application, the dependency definition is parsed, and the above Lai, namely B.js, C.js, D.js, html template "html", user data "data", internationalization file "internationalized copy", A.css, C.css, D.css. As shown in B20 of FIG. 2A, after A.js is loaded, the dependency of the A.js is parsed. Then enter B21 for js dependent loading, B22 for html template rendering, and B23 for css rendering.

Step 214: Acquire each second script to load;

As shown in FIG. 2A, the loading process of the A.js dependent js is performed in B21.

Then, the embodiment of the present application can separately obtain B.js, C.js, D.js from the server, and then perform recursive loading in B211. In the embodiment of the present application, if the second script also depends on a deeper script, the second script may be placed in the role of the first script, first parsing its dependencies, then loading the scripts it depends on, and then recursively loading the same script. Other scripts at the level.

As shown in FIG. 2A, if it is determined in B212 that B.js, C.js, and D.js are all loaded, then B30 is entered.

Step 216: Obtain an html template of the text type of the html template, and user data and an internationalization file by using a third-party plug-in of requirejs;

As in FIG. 2A, the rendering of the html template is performed in B22.

In the embodiment of the present application, for the html template "html", the file of the text type of "html", the user data "data", and the internationalization file "internationalized copy" are acquired.

In the embodiment of the present application, the internationalization file may be stored in the form of a json file, and then the path of the json file is specified. For example, the aforementioned directory in the server. In practical applications, json files can be maintained in this json file according to different language environments, with language type as the label, and internationalized copy of multiple languages.

Step 218: Obtain a locale of the current system.

Step 220: Extract internationalized copy data corresponding to the locale from the internationalization file;

Step 222, the ejs template rendering engine is invoked, and the html template, the user data, and the international copy data are spliced into an html code.

As shown in FIG. 2A, in B221, the ejs template rendering engine is invoked, the html template "html" of the aforementioned text type is loaded, and then the data and the internationalized copy data corresponding to the CN are spliced to the html template "html", and the output is true. The html code that can be executed normally.

Step 224: Execute the html code, and render the sub-interface corresponding to the html code into a specified container.

The html code is then executed for corresponding rendering, and the corresponding object is rendered into the specified container as described in the first embodiment.

As shown in FIG. 2A, if it is determined in B222 that the html is finished rendering, the process proceeds to step B30.

The step 216-step 224 is the preferred step of the first step of the first embodiment.

Step 226: Obtain a cascading style file of a text type of the cascading style file of the first script and a cascading style file of at least one second script by using a third-party plug-in of requirejs;

As the foregoing example, the first script A.js includes a cascading style file A.css, the second script C.js includes C.css, and the second script D.js includes D.css. The second script B.js does not include cascading style files.

Then, as shown in FIG. 2A, for A.css, the file of the A.css text type can be obtained through the third-party plugin of requirejs, and then temporarily stored in the memory in B231. At the same time, C.css and D.css can be obtained normally.

Step 228, loading and rendering a cascading style file of the at least one second script by using a link tag;

For C.css and D.css in Figure 2A, C.css and D.css are rendered in B232 via the link tag.

Step 230: After the cascading style file of the second script is finished, load and render the cascading style file of the text type through the style tag.

As shown in FIG. 2A, if it is determined in B233 that C.css and D.css are finished rendering, they are transferred to B234, and A.css is obtained from the memory, and A.css is rendered by the style tag. If it is judged that the A.css is rendered in B235, it will enter B30.

The step 226 to step 230 are the preferred steps of the first step of the first embodiment.

Step 232: After all the dependencies of the first script are processed, execute the business logic of the first script.

As shown in FIG. 2A, in actual application, B21, B22, and B23 may be executed asynchronously, and each part may not be processed at the same time. Then, in Embodiment B30 of the present application, it is determined whether all parts are executed, and if all are completed, then in B40. The code that executes the business logic of A.js. After the B40 is executed, the user can operate the A.js related functions on the page on the browser side.

In the embodiment of the present application, a corresponding second script, a html (HyperText Mark-up Language) file for each service or function, and a CSS corresponding to each script (Cascading Style) may be preset for each functional module of the webpage requirement. Sheets, cascading style sheets) files, and then for a business or function of a web page, if it requires a corresponding second script, html file, cascading style sheet, then the corresponding first script in the business or function depends In the definition, define each second script, html file and each CSS file that the first script depends on. Then, after obtaining the first script, the client first parses the dependent second script, html file, cascading style sheet file and the like from its dependency definition. For the second script, then the second script is first loaded for loading; for the html file, the html file can be obtained and rendered by the third-party plug-in; for the cascading style file, the third-level plug-in can obtain the style files of each level and Rendering, after all the dependencies of the first script are processed, the client executes the code of the business logic of the first script. In this way, the dependencies of each service of the webpage code are clear, the code reusability of each function is strong, the code amount can be reduced, the webpage code structure is clear, the logic of each service can be decoupled, the webpage code can be easily modified, and the business splitting is facilitated. jobs.

It should be noted that, for the method embodiment, for the sake of simple description, it is expressed as one. Combinations of the actions of the series, but those skilled in the art should understand that the embodiments of the present application are not limited by the order of the operations described, because some steps may be performed in other orders or simultaneously according to the embodiments of the present application. In the following, those skilled in the art should also understand that the embodiments described in the specification are all preferred embodiments, and the actions involved are not necessarily required in the embodiments of the present application.

Embodiment 3

Referring to FIG. 3, a structural block diagram of an embodiment of a webpage script loading apparatus of the present application is shown, which may specifically include the following modules:

The first script loading module 310 is configured to load the first script;

The dependency parsing module 320 is configured to parse the dependency of the first script according to the dependency definition for the first script;

The second script processing module 330 is configured to: when the dependency of the first script includes each second script, acquire each second script to load;

The html file processing module 340 is configured to: when the dependency of the first script includes an html file, acquire the html file by using a third-party plug-in and render the html file;

a cascading style file processing module 350, configured to: when the dependency of the first script includes a level-of-featured style file, obtain a level-of-featured file by using a third-party plug-in and render;

The first script execution module 360 is configured to execute the business logic of the first script after all the dependencies of the first script are processed.

In the embodiment of the present application, the webpage script loading device is in the client, for example, in a browser, and can acquire corresponding data from the server when executing.

In a preferred embodiment of the present application, the html file includes: an html template, user data, and an internationalization file;

The html file processing module 340 then includes:

a first obtaining submodule for acquiring an html template, user data, and an internationalization file;

a splicing sub-module, configured to invoke a template rendering engine, and splicing the html template, user data, and internationalization file into an html code;

The Html rendering sub-module is configured to execute the html code and render the sub-interface corresponding to the html code into a specified container.

In a preferred embodiment of the present application, the first obtaining submodule includes:

The first text file obtaining module is configured to acquire an html template of a text type of the html template.

In a preferred embodiment of the present application, the internationalization file includes internationalized copy data in various languages;

The splicing submodule includes:

The locale acquisition submodule is used to obtain the locale of the current system;

a copy data extraction module, configured to extract internationalized copy data corresponding to the locale from the internationalization file;

The first splicing sub-module is configured to invoke a template rendering engine to splicing the html template, user data, and international copy data into html code.

In a preferred embodiment of the present application, when the level-by-level cascading style files include a cascading style file of the first script and a cascading style file of the at least one second script,

The cascading style file processing module 350 then includes:

a second obtaining submodule, configured to acquire a cascading style file of the first script and a cascading style file of the at least one second script;

a dependent style processing submodule for loading and rendering a cascading style file of the at least one second script;

The dependency style processing submodule is configured to load and render the cascading style file of the first script after the cascading style file of the second script is finished.

In a preferred embodiment of the present application, the second obtaining submodule includes:

And a second text file obtaining module, configured to acquire a cascading style file of a text type of the cascading style file of the first script.

In a preferred embodiment of the present application, the dependent style processing sub-module includes:

The style tag processing submodule is configured to load and render the cascading style file of the text type through the style tag after the cascading style file of the second script is finished.

The link tag processing module is configured to load and render the cascading style file of the at least one second script by using a link tag.

For the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the description of the method embodiment.

In the embodiment of the present application, a corresponding second script, a html (HyperText Mark-up Language) file for each service or function, and a CSS (Cascading Style Sheets) corresponding to each script may be preset in advance for each function of the webpage requirement. Linking a style sheet to a file, and then for a certain business or function of the web page, if it needs a corresponding second script, html file, cascading style sheet, the first definition can be defined in the dependency definition of the corresponding first script. The second script, html file and each css file that the script depends on. Then, after obtaining the first script, the client can utilize requirejs (RequireJS is a JavaScript module loading framework, which is one of the implementers of the AMD (Asynchronous Module Definition) specification), first from its library. Relying on the second script, html file, cascading style sheet whose definition is resolved, and then acquiring each second script for loading, obtaining the html file through a third-party plug-in and rendering, and obtaining the level by the third-party plug-in The style file is rendered and executed, and after the respective dependencies of the first script are all processed, the business logic of the first script is executed. In this way, the dependencies of the various services of the webpage code are clear, the corresponding webpage code structure is clear, the logic of each business can be decoupled, the amount of code is reduced, the webpage code is conveniently modified, and the business splitting is facilitated.

The various embodiments in the present specification are described in a progressive manner, and each embodiment focuses on differences from other embodiments, and the same similar parts between the various embodiments can be referred to each other.

Those skilled in the art will appreciate that embodiments of the embodiments of the present application can be provided as a method, apparatus, or computer program product. Therefore, the embodiments of the present application may take the form of an entirely hardware embodiment, an entirely software embodiment, or an embodiment combining software and hardware. Moreover, embodiments of the present application can take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) including computer usable program code.

In a typical configuration, the computer device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory. The memory may include non-persistent memory, random access memory (RAM), and/or non-volatile memory in a computer readable medium, such as read only memory (ROM) or flash memory. Memory is an example of a computer readable medium. Computer readable media includes both permanent and non-persistent, removable and non-removable media. Information storage can be implemented by any method or technology. The information can be computer readable instructions, data structures, modules of programs, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read only memory. (ROM), electrically erasable programmable read only memory (EEPROM), flash memory or other memory technology, compact disk read only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, Magnetic tape cartridges, magnetic tape storage or other magnetic storage devices or any other non-transportable media can be used to store information that can be accessed by a computing device. As defined herein, computer readable media does not include non-persistent computer readable media, such as modulated data signals and carrier waves.

Embodiments of the present application are described with reference to flowcharts and/or block diagrams of methods, terminal devices (systems), and computer program products according to embodiments of the present application. It will be understood that each flow and/or block of the flowchart illustrations. Or a combination of processes and/or blocks in a block diagram. These computer program instructions can be provided to a processor of a general purpose computer, special purpose computer, embedded processor or other programmable data processing terminal device to produce a machine such that instructions are executed by a processor of a computer or other programmable data processing terminal device Means are provided for implementing the functions specified in one or more of the flow or in one or more blocks of the flow chart.

The computer program instructions can also be stored in a computer readable memory that can direct a computer or other programmable data processing terminal device to operate in a particular manner, such that the instructions stored in the computer readable memory produce an article of manufacture comprising the instruction device. The instruction device implements the functions specified in one or more blocks of the flowchart or in a flow or block of the flowchart.

These computer program instructions can also be loaded onto a computer or other programmable data processing terminal device such that a series of operational steps are performed on the computer or other programmable terminal device to produce computer-implemented processing, such that the computer or other programmable terminal device The instructions executed above provide steps for implementing the functions specified in one or more blocks of the flowchart or in a block or blocks of the flowchart.

While a preferred embodiment of the embodiments of the present application has been described, those skilled in the art can make further changes and modifications to the embodiments once they are aware of the basic inventive concept. Therefore, the appended claims are intended to be interpreted as including all the modifications and the modifications

Finally, it should also be noted that in this context, relational terms such as first and second are used merely to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply these entities. There is any such actual relationship or order between operations. Furthermore, the terms "comprises" or "comprising" or "comprising" or any other variations are intended to encompass a non-exclusive inclusion, such that a process, method, article, or terminal device that includes a plurality of elements includes not only those elements but also Other elements that are included, or include elements inherent to such a process, method, article, or terminal device. An element defined by the phrase "comprising a ..." does not exclude the presence of additional identical elements in the process, method, article, or terminal device that comprises the element, without further limitation.

The above is a detailed description of a webpage script loading method and a webpage script loading apparatus provided by the present application. The principle and implementation manner of the present application are described in the specific examples, and the description of the above embodiment is only used. To help understand the method of the present application and its core ideas; at the same time, for those of ordinary skill in the art, in accordance with the idea of the present application, there will be changes in the specific embodiments and application scope. The content should not be construed as limiting the application.

Claims

A webpage script loading method, comprising:

Load the first script;

Parsing the dependency of the first script according to a dependency definition for the first script;

When the dependency of the first script includes each second script, acquiring each second script to load;

When the dependency of the first script includes an html file, the html file is obtained by a third-party plug-in and rendered;

When the dependency of the first script includes a hierarchical style file, the third-level plug-in obtains each level of the style file and renders;

After all the dependencies of the first script are processed, the business logic of the first script is executed.
The method according to claim 1, wherein the html file comprises: an html template, user data, and an internationalization file;

The step of obtaining the html file by the third-party plug-in and rendering the method includes:

Get html templates, user data, and internationalization files;

Calling a template rendering engine to splicing the html template, user data, and internationalization files into html code;

Executing the html code and rendering the sub-interface corresponding to the html code into a specified container.
The method of claim 2, wherein the step of obtaining an html template comprises:

Obtain an html template of the text type of the html template.
Method according to claim 2 or 3, characterized in that said internationalization file Includes internationalized copywriting data in various languages;

Then, the calling template rendering engine, the step of splicing the html template, user data, and internationalization file into html code includes:

Get the locale of the current system;

Extracting internationalized copy data corresponding to the language environment from the internationalization file;

The template rendering engine is invoked to stitch the html template, user data, and international copy data into html code.
The method according to claim 1, wherein when said each level of concatenation style file comprises a concatenation style file of a first script and a concatenation style file of at least one second script,

Then, the steps of obtaining the hierarchical style files and rendering by the third-party plug-in include:

Obtaining a cascading style file of the first script and a cascading style file of the at least one second script;

Loading and rendering a cascading style file of the at least one second script;

After the cascading style file of the second script is rendered, the cascading style file of the first script is loaded and rendered.
The method according to claim 5, wherein the step of acquiring the cascading style file of the first script comprises:

Obtaining a cascading style file of a text type of the cascading style file of the first script.
The method according to claim 6, wherein the step of loading and rendering the cascading style file of the first script after the cascading style file of the second script is finished comprises:

After the cascading style file of the second script is rendered, the cascading style file of the text type is loaded and rendered by the style tag.
The method of claim 6 wherein said loading and rendering said said At least one step of the second script's cascading style file, including:

The cascading style file of the at least one second script is loaded and rendered by a link tag.
A webpage script loading device, comprising:

a first script loading module for loading the first script;

a dependency parsing module, configured to parse a dependency of the first script according to a dependency definition for the first script;

a second script processing module, configured to: when the dependency of the first script includes each second script, acquire each second script to load;

An html file processing module, configured to: when the dependency of the first script includes an html file, obtain the html file by using a third-party plug-in and render;

a cascading style file processing module, configured to: when the dependency of the first script includes a plurality of style files, acquire a style file of each level through a third-party plug-in and render;

The first script execution module is configured to execute the business logic of the first script after all the dependencies of the first script are processed.
The device according to claim 9, wherein the html file comprises: an html template, user data, and an internationalization file;

Then the html file processing module includes:

a first obtaining submodule for acquiring an html template, user data, and an internationalization file;

a splicing sub-module, configured to invoke a template rendering engine, and splicing the html template, user data, and internationalization file into an html code;

The Html rendering sub-module is configured to execute the html code and render the sub-interface corresponding to the html code into a specified container.
The device according to claim 10, wherein the first obtaining submodule comprises:

The first text file obtaining module is configured to acquire an html template of a text type of the html template.
The apparatus according to claim 10, wherein said internationalization file comprises internationalized copy data in various languages;

The splicing submodule includes:

The locale acquisition submodule is used to obtain the locale of the current system;

a copy data extraction module, configured to extract internationalized copy data corresponding to the locale from the internationalization file;

The first splicing sub-module is configured to invoke a template rendering engine to splicing the html template, user data, and international copy data into html code.
The apparatus according to claim 10, wherein when said each level cascading style file comprises a cascading style file of the first script and a cascading style file of at least one second script,

Then the cascading style file processing module includes:

a second obtaining submodule, configured to acquire a cascading style file of the first script and a cascading style file of the at least one second script;

a dependent style processing submodule for loading and rendering a cascading style file of the at least one second script;

The dependency style processing submodule is configured to load and render the cascading style file of the first script after the cascading style file of the second script is finished.
The apparatus according to claim 13, wherein the second obtaining submodule comprises:

And a second text file obtaining module, configured to acquire a cascading style file of a text type of the cascading style file of the first script.
The apparatus of claim 14 wherein said dependent style processing The submodules include:

The style tag processing submodule is configured to load and render the cascading style file of the text type through the style tag after the cascading style file of the second script is finished.
The apparatus according to claim 14, wherein said dependent style processing sub-module comprises:

The link tag processing module is configured to load and render the cascading style file of the at least one second script by using a link tag.