A Javascript module dynamic loading method and terminal

Abstract

The present invention discloses a Javascript module dynamic loading method and terminal, which takes the Javascript module as a target object and the loading request corresponding to the module as an observer object. When receiving the loading request corresponding to the Javascript module, when the loading status of the Javascript module is loading, the loading request is created as an observer object to add a subscription to the target object. When the loading status is loaded, the loading request corresponding to the Javascript module is directly notified to respond. When the loading status is updated and updated from loading to loaded or loading fails, each observer object in the observer array is executed to notify the loading request corresponding to the Javascript module to respond. By applying the observer pattern to the dynamic loading of the Javascript module, as long as the status of the target object changes, an event is actively initiated to notify the observer object to respond. After observing the event change, corresponding processing is performed, thereby effectively avoiding the problem of repeated loading during the dynamic loading of the Javascript module.

Description

Technical Field

[0001] The present invention relates to the technical field of resource loading, and in particular to a Javascript module dynamic loading method and terminal. Background Art

[0002] With the development of the internet, front-end development has become increasingly complex. From initial form validation to current projects involving thousands or even tens of thousands of lines of code, teamwork is an inevitable part of front-end development. To better manage functional logic, the concept of modularization has gradually emerged. A module is a JavaScript file that implements a specific function. Modularization offers the following advantages:

[0003] 1. Maintainability. Each module is independent, which can greatly reduce the coupling of the project and facilitate maintenance;

[0004] 2. Reusability. The encapsulation of front-end module functions greatly improves code reusability. The JavaScript community has also seen the emergence of numerous excellent third-party libraries for developers to reuse, avoiding reinventing the wheel and improving project development speed and quality.

[0005] Therefore, current front-end project development inevitably requires the introduction of various third-party Javascript modules.

[0006] Initially, JavaScript modules are loaded by adding a script tag in the HTML file. Figure 1 As shown, in order to export the HTML table from row 12 to row 30 as an Excel file, the third-party Javascript library xlsx is introduced through the script tag in row 5. Then, in the code from row 34 to row 35, the table_to_book method provided by xlsx can be used to convert the user table into an Excel file and download it.

[0007] This loading method is called static loading, because all JavaScript modules that need to be imported must be written into the HTML file in advance. Static loading is simple and intuitive, but it has the following disadvantages:

[0008] 1. Some Javascript modules do not need to be executed immediately after the page is opened. They may only be needed in certain scenarios. If the user does not enter these scenarios, they do not need to be loaded. In this case, inserting js into the page will increase the page size, waste network bandwidth, and affect the page loading speed.

[0009] 2. Different user types need to load different Javascript modules, and some judgments need to be made on the users. Based on the judgment conditions, different Javascript modules can be run on the page. For static loading solutions, all Javascript modules can only be loaded into the page, which will also increase the page size, waste network bandwidth, and affect the page loading speed.

[0010] To address the above two shortcomings, Javascript developers proposed a dynamic loading technology solution. The dynamic loading solution is to use the characteristics of the Document Object Model (DOM) to allow JavaScript to dynamically create almost all the content of HTML documents. Through Javascript code, script tags are dynamically created during program execution and inserted into HTML documents. When the script tag is added to the page, the browser will immediately start downloading the corresponding Javascript module. Figure 2 As shown in the figure, a dynamic loading solution is adopted. Instead of directly introducing the xlsx module in the HTML page, a loadScript method is introduced in the 5th line of code. Then in the 34th line of code, the loadScript method is called to dynamically load the xlsx module. Figure 3 As shown, within the loadScript method, a script tag object is dynamically created using the document.createElement method on line 4 and inserted into the head tag of the HTML document using the appendChild method on line 10. This automatically causes the browser to load the corresponding module. Once the module is downloaded, the onload method on line 6 is triggered, executing the Promise's resolve method. If the module download fails, the onerror method on line 7 is triggered, executing the Promise's reject method.

[0011] Using a dynamic loading solution can achieve on-demand loading of third-party JavaScript modules, saving page size and network bandwidth, and improving page loading speed. However, the dynamic loading solution also has the problem of repeated loading.

[0012] With the rise of component frameworks such as React and Vue, a page in current Web front-end projects is composed of various nested components. Each component may load the same third-party Javascript module. Figure 4 As shown, an administrator page consists of component 1 and component 2. Both components need to dynamically load the xlsx module to implement the Excel export function.

[0013] like Figure 5As shown, when the administrator clicks "Export User List" and "Export Product List", the loadScript method will be called to dynamically load the xlsx module. Specifically, when the administrator clicks the "Export User List" button, the click callback function on line 33 will be triggered. Inside the callback function, the loadScript method on line 34 will be executed to dynamically load the xlsx module. When the administrator clicks the "Export Product List" button, the click callback function on line 65 will be triggered. Inside the callback function, the loadScript method on line 66 will be executed to dynamically load the xlsx module. For the convenience of demonstration, Figure 5 In the sample code, the codes of both components are placed in one file. In fact, the codes of different components are completely isolated and stored in different files.

[0014] Currently, the traditional approach to the repeated loading problem when dynamically loading Javascript modules is to set a global variable to save the module loading status. Before dynamic loading, first check whether the module has been loaded. If it has been loaded, return directly, otherwise start dynamic loading and update the corresponding module status in the global variable after loading is completed. Figure 6 As shown, in the second line of code, the SCRIPTS variable is set to save the status of the dynamically loaded Javascript module. Each module has three states: "unload (not loaded)", "loaded (loaded successfully)", and "failed (load failed)". When the loadScript method is called externally to dynamically load a third-party module, in lines 12 to 14 of the code, first determine whether the module has been loaded. If it has been loaded, return directly. Otherwise, execute the code in lines 16 to 31 to start loading the third-party module. After the loading is completed, if the loading is successful, the status in SCRIPTS is updated to "loaded" through line 25 of the code. If the loading fails, the status in SCRIPTS is updated to "failed" through line 27 of the code.

[0015] This solution can prevent the problem of repeated loading to a certain extent, but when a module is being loaded and a dynamic loading request is initiated for the module, this solution cannot solve the repeated loading problem in this scenario. Summary of the Invention

[0016] The technical problem to be solved by the present invention is to provide a Javascript module dynamic loading method and terminal, which can effectively avoid the repeated loading problem when the Javascript module is dynamically loaded.

[0017] In order to solve the above technical problems, a technical solution adopted by the present invention is:

[0018] A method for dynamically loading a Javascript module, comprising the steps of:

[0019] Initialize a target object, which is a Javascript module, and initialize a global object corresponding to the target object, which includes the loading status of the Javascript module and an observer array corresponding to the target object;

[0020] When receiving a load request corresponding to the Javascript module, if the loading status is loading, creating an observer object for the load request corresponding to the Javascript module, and saving the observer object into the observer array;

[0021] If the loading status is not loaded or loading fails, dynamically load the Javascript module and update the loading status to loading;

[0022] If the loading status is loaded, directly notifying the loading request corresponding to the Javascript module to respond;

[0023] If the loading status is updated from loading to loaded or loading fails, each observer object in the observer array is executed to notify the loading request corresponding to the Javascript module to respond.

[0024] In order to solve the above technical problems, another technical solution adopted by the present invention is:

[0025] A Javascript module dynamic loading terminal includes a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, the following steps are implemented:

[0026] Initialize a target object, which is a Javascript module, and initialize a global object corresponding to the target object, which includes the loading status of the Javascript module and an observer array corresponding to the target object;

[0027] When receiving a load request corresponding to the Javascript module, if the loading status is loading, creating an observer object for the load request corresponding to the Javascript module, and saving the observer object into the observer array;

[0028] If the loading status is not loaded or loading fails, dynamically load the Javascript module and update the loading status to loading;

[0029] If the loading status is loaded, directly notifying the loading request corresponding to the Javascript module to respond;

[0030] If the loading status is updated from loading to loaded or loading fails, each observer object in the observer array is executed to notify the loading request corresponding to the Javascript module to respond.

[0031] The beneficial effects of the present invention are: taking the Javascript module as the target object, taking the loading request corresponding to the Javascript module as the observer object, while receiving the loading request corresponding to the Javascript module, when the loading status of the Javascript module is loading, the loading request will be created as an observer object to add a subscription to the target object, and when the loading status is loaded, the loading request corresponding to the Javascript module will be directly notified to respond, and when the loading status is updated and updated from loading to loaded or loading fails, each observer object in the observer array will be executed to notify the loading request corresponding to the Javascript module to respond, by applying the observer pattern to the dynamic loading of the Javascript module, as long as the state of the target object changes, it will actively initiate an event to notify the observer object to respond, and the observer object will perform corresponding processing after observing the event change, thereby effectively avoiding the problem of repeated loading during dynamic loading of the Javascript module. BRIEF DESCRIPTION OF THE DRAWINGS

[0032] Figure 1 This is a code diagram of statically importing a Javascript module in the prior art;

[0033] Figure 2 This is a code diagram of the prior art in which dynamic loading does not directly introduce a Javascript module;

[0034] Figure 3 This is a code diagram for implementing dynamic loading using the loadScript method in the prior art;

[0035] Figure 4 A schematic diagram of a scene that needs to be dynamically loaded in the prior art;

[0036] Figure 5 A schematic diagram of the code for each module in the prior art calling loadScript to load a third-party Javascript module;

[0037] Figure 6 A schematic diagram of code for preventing repeated loading in the prior art;

[0038] Figure 7 This is a flowchart of a method for dynamically loading a Javascript module according to an embodiment of the present invention;

[0039] Figure 8 This is a structural diagram of a Javascript module dynamic loading terminal according to an embodiment of the present invention;

[0040] Figure 9 This is a schematic diagram of the observer pattern in the Javascript module dynamic loading method according to an embodiment of the present invention;

[0041] Figure 10 Schematic diagram of the SCRIPTS object data structure in the Javascript module dynamic loading method according to an embodiment of the present invention;

[0042] Figure 11 This is a code diagram of initializing the target object and the global object in the Javascript module dynamic loading method according to an embodiment of the present invention;

[0043] Figure 12 A code diagram of an observer object and its subscription process in a Javascript module dynamic loading method according to an embodiment of the present invention;

[0044] Figure 13 This is a schematic diagram of code being loaded and processed in the Javascript module dynamic loading method according to an embodiment of the present invention;

[0045] Figure 14 This is a code diagram for handling unloaded or failed loading in the Javascript module dynamic loading method according to an embodiment of the present invention;

[0046] Figure 15 This is a schematic diagram of the loaded code in the Javascript module dynamic loading method according to an embodiment of the present invention;

[0047] Figure 16 A code diagram illustrating a Javascript module being requested simultaneously by different components in the prior art;

[0048] Figure 17 A schematic diagram of code for repeated loading in the prior art;

[0049] Figure 18This is a schematic diagram showing the result of loading a Javascript module only once in the Javascript module dynamic loading method according to an embodiment of the present invention;

[0050] Figure 19 The figure is a schematic diagram of the dynamic loading process in the Javascript module dynamic loading method according to an embodiment of the present invention. DETAILED DESCRIPTION

[0051] To illustrate the technical content, achieved objectives and effects of the present invention in detail, the following description is given in conjunction with the embodiments and accompanying drawings.

[0052] Please refer to Figure 7 , an embodiment of the present invention provides a method for dynamically loading a Javascript module, comprising the steps of:

[0053] Initialize a target object, which is a Javascript module, and initialize a global object corresponding to the target object, which includes the loading status of the Javascript module and an observer array corresponding to the target object;

[0054] When receiving a load request corresponding to the Javascript module, if the loading status is loading, creating an observer object for the load request corresponding to the Javascript module, and saving the observer object into the observer array;

[0055] If the loading status is not loaded or loading fails, dynamically load the Javascript module and update the loading status to loading;

[0056] If the loading status is loaded, directly notifying the loading request corresponding to the Javascript module to respond;

[0057] If the loading status is updated from loading to loaded or loading fails, each observer object in the observer array is executed to notify the loading request corresponding to the Javascript module to respond.

[0058] From the above description, it can be seen that the beneficial effect of the present invention is: taking the Javascript module as the target object, and taking the loading request corresponding to the Javascript module as the observer object, while receiving the loading request corresponding to the Javascript module, when the loading status of the Javascript module is loading, the loading request will be created as an observer object to add a subscription to the target object, and when the loading status is loaded, the loading request corresponding to the Javascript module is directly notified to respond, and when the loading status is updated and updated from loading to loaded or loading fails, each observer object in the observer array is executed to notify the loading request corresponding to the Javascript module to respond, by applying the observer pattern to the dynamic loading of the Javascript module, as long as the state of the target object changes, it will actively initiate an event to notify the observer object to respond, and the observer object will perform corresponding processing after observing the event change, thereby effectively avoiding the problem of repeated loading during dynamic loading of the Javascript module.

[0059] Furthermore, the executing of each observer object in the observer array notifying the load request corresponding to the Javascript module to respond includes:

[0060] Clears the array of observers corresponding to the target object.

[0061] From the above description, it can be seen that after the Javascript module is loaded successfully, its corresponding observer array is cleared to enable the next round of observer mode.

[0062] Furthermore, the directly notifying and responding to the loading request corresponding to the Javascript module includes:

[0063] Directly notify the loading request corresponding to the Javascript module to respond to a successful loading.

[0064] As can be seen from the above description, when a loading request for a Javascript module is received, if the loading status is loaded, the loading request corresponding to the Javascript module can be directly notified to respond with a successful loading, and the user can be notified of the loading status of the Javascript module in a timely manner.

[0065] Furthermore, the dynamically loading the Javascript module includes:

[0066] Dynamically create a script tag, the script tag contains the source code address of the Javascript module, and bind the script tag to a loading success trigger event and a loading failure trigger event;

[0067] Insert the bound script tag into the HTML document for dynamic loading;

[0068] The loading success triggering event does not pass in preset parameters after the Javascript module is successfully downloaded, and the loading failure triggering event passes in preset parameters after the Javascript module fails to be downloaded.

[0069] From the above description, it can be seen that through the above method, the browser can download the Javascript module according to the source code address of the Javascript module in the script tag. When the download is successful, the loading success event will be automatically triggered. When the download fails, the loading failure event will be automatically triggered, and the preset parameters will be passed in the event, so that the preset parameters can be used to determine whether the loading request needs to be responded to as a failure or success, thereby realizing the smooth loading of the Javascript module.

[0070] Furthermore, the executing of each observer object in the observer array to notify the load request corresponding to the Javascript module to respond includes:

[0071] Execute each observer object in the observer array to determine whether the preset parameter exists. If not, notify the loading request corresponding to the Javascript module through the observer object to respond to a successful load. If so, notify the loading request corresponding to the Javascript module through the observer object to respond to a failed load.

[0072] As can be seen from the above description, when the preset parameters do not exist, it is considered that the Javascript module is loaded successfully. At this time, the loading request corresponding to the Javascript module can be notified to respond to the successful loading, thereby completing the dynamic loading of the Javascript module.

[0073] Please refer to Figure 8 A Javascript module dynamic loading terminal includes a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, the following steps are implemented:

[0074] Initialize a target object, which is a Javascript module, and initialize a global object corresponding to the target object, which includes the loading status of the Javascript module and an observer array corresponding to the target object;

[0075] When receiving a load request corresponding to the Javascript module, if the loading status is loading, creating an observer object for the load request corresponding to the Javascript module, and saving the observer object into the observer array;

[0076] If the loading status is not loaded or loading fails, dynamically load the Javascript module and update the loading status to loading;

[0077] If the loading status is loaded, directly notifying the loading request corresponding to the Javascript module to respond;

[0078] If the loading status is updated from loading to loaded or loading fails, each observer object in the observer array is executed to notify the loading request corresponding to the Javascript module to respond.

[0079] From the above description, it can be seen that the beneficial effect of the present invention is: taking the Javascript module as the target object, and taking the loading request corresponding to the Javascript module as the observer object, while receiving the loading request corresponding to the Javascript module, when the loading status of the Javascript module is loading, the loading request will be created as an observer object to add a subscription to the target object, and when the loading status is loaded, the loading request corresponding to the Javascript module is directly notified to respond, and when the loading status is updated and updated from loading to loaded or loading fails, each observer object in the observer array is executed to notify the loading request corresponding to the Javascript module to respond, by applying the observer pattern to the dynamic loading of the Javascript module, as long as the state of the target object changes, it will actively initiate an event to notify the observer object to respond, and the observer object will perform corresponding processing after observing the event change, thereby effectively avoiding the problem of repeated loading during dynamic loading of the Javascript module.

[0080] Furthermore, the executing of each observer object in the observer array notifying the load request corresponding to the Javascript module to respond includes:

[0081] Clears the array of observers corresponding to the target object.

[0082] From the above description, it can be seen that after the Javascript module is loaded successfully, its corresponding observer array is cleared to enable the next round of observer mode.

[0083] Furthermore, the directly notifying and responding to the loading request corresponding to the Javascript module includes:

[0084] Directly notify the loading request corresponding to the Javascript module to respond to a successful loading.

[0085] As can be seen from the above description, when a loading request for a Javascript module is received, if the loading status is loaded, the loading request corresponding to the Javascript module can be directly notified to respond with a successful loading, and the user can be notified of the loading status of the Javascript module in a timely manner.

[0086] Furthermore, the dynamically loading the Javascript module includes:

[0087] Dynamically create a script tag, the script tag contains the source code address of the Javascript module, and bind the script tag to a loading success trigger event and a loading failure trigger event;

[0088] Insert the bound script tag into the HTML document for dynamic loading;

[0089] The loading success triggering event does not pass in preset parameters after the Javascript module is successfully downloaded, and the loading failure triggering event passes in preset parameters after the Javascript module fails to be downloaded.

[0090] From the above description, it can be seen that through the above method, the browser can download the Javascript module according to the source code address of the Javascript module in the script tag. When the download is successful, the loading success event will be automatically triggered. When the download fails, the loading failure event will be automatically triggered, and the preset parameters will be passed in the event, so that the preset parameters can be used to determine whether the loading request needs to be responded to as a failure or success, thereby realizing the smooth loading of the Javascript module.

[0091] Furthermore, the executing of each observer object in the observer array to notify the load request corresponding to the Javascript module to respond includes:

[0092] Execute each observer object in the observer array to determine whether the preset parameter exists. If not, notify the loading request corresponding to the Javascript module through the observer object to respond to a successful load. If so, notify the loading request corresponding to the Javascript module through the observer object to respond to a failed load.

[0093] As can be seen from the above description, when the preset parameters do not exist, it is considered that the Javascript module is loaded successfully. At this time, the loading request corresponding to the Javascript module can be notified to respond to the successful loading, thereby completing the dynamic loading of the Javascript module.

[0094] The above-mentioned Javascript module dynamic loading method and terminal of the present invention can be applied to scenarios where Javascript modules need to be loaded, and are described below through specific implementation methods:

[0095] Example 1

[0096] Definition of noun:

[0097] Observer pattern:

[0098] The Observer pattern defines a one-to-many dependency relationship between objects. When the state of an object changes, all objects that depend on it will be notified and automatically updated. The Observer pattern has the following characteristics:

[0099] 1. There is a target object (Subject) that can add, delete, and notify observer objects (Observer);

[0100] 2. There are multiple observer objects that can receive and process notifications of target object state changes;

[0101] 3. When the state of the target object changes, all observer objects will be notified.

[0102] like Figure 9 As shown, through the subscription interface, the target object adds a series of observer objects. The target object is responsible for maintaining the connection with these observer objects. When the state of the target object changes, it will actively initiate an event to notify the observer object to respond. The observer object will perform corresponding processing after observing the event change.

[0103] Please refer to Figure 7 and Figures 10-19 , a Javascript module dynamic loading method of this embodiment includes the steps of:

[0104] In an optional embodiment, before S1, the following further steps are included: S0, defining a global function that receives a URL address string and returns a promise object (i.e., a Promise object). The global function is the loadScript method, which is an asynchronous method attached to the windows object. The loadScript method returns immediately after creating and inserting the script tag into the HTML document, without blocking subsequent code execution. The method is used to notify the observer object to respond after the browser loads the corresponding JavaScript module.

[0105] S1. Initialize the target object, which is a Javascript module, and initialize the global object (i.e., SCRIPTS) corresponding to the target object. The global object includes the loading status of the Javascript module and the observer array corresponding to the target object, such as Figure 19 As shown;

[0106] Among them, such as Figure 10 As shown, SCRIPTS is an Object object used to store a collection of key-value pairs. The key value is the URL address of the JavaScript module to be dynamically loaded, and the value is an Object object with two fields: state and observers. The state field is used to store the loading status of the JavaScript module, and observers is an Array object used to store the array of observers corresponding to the target object.

[0107] The loading status includes loading, unloaded, loaded or loading failed, which are represented by the character strings loading, unload, loaded and failed respectively.

[0108] Specifically, such as Figure 11 As shown, in the second line of code, when the global function is introduced, the global object will be initialized to an empty Object object. In the fifth to tenth lines of code, when the loadScript method is executed, the target object will be initialized according to the passed URL. The initial value of the target object's loading state is unload, and the initial value of the observer array is an empty array.

[0109] S2, while receiving the loading request corresponding to the Javascript module, Figure 19 As shown, if the loading state is loading, execute S21;

[0110] S21, creating an observer object (Observer) corresponding to the load request of the Javascript module, and saving the observer object into the observer array;

[0111] The observer object is an arrow function that accepts a preset parameter (i.e., the err parameter). The err parameter is an error object. When the err parameter does not exist, it means that the Javascript module is loaded successfully. The observer object will call the resolve method provided by the Promise object to notify the loading request to respond to the successful loading. When the err parameter exists, it means that the Javascript module fails to load. The observer object will call the reject method provided by the Promise object to notify the loading request to respond to the failed loading. Figure 12 As shown, the 54th line of code represents the Promise object to be returned, and the arrow function wrapped by the push method in the 55th line of code is an observer object. When the browser completes downloading the Javascript module, it will actively trigger the corresponding event and execute the arrow function to determine whether the err parameter needs to be passed in. When the err parameter does not exist, the observer object will call the resolve method provided by the Promise object in the 54th line to notify the loading request for a successful loading response, as shown in the 59th line of code. When the err parameter exists, the observer object will call the reject method provided by the Promise object in the 54th line to notify the loading request for a loading failure response, as shown in the 57th line of code.

[0112] Specifically, such as Figure 12 As shown, in line 55 of the code, the push method is used to add the observer object to the observers array of the target object, and finally a Promise object is returned through the return statement in line 54 to complete the subscription process.

[0113] That is to say, if Figure 13As shown, in line 14 of the code, if the target object has been loaded, there is no need to create an observer, because the state of the target object has been determined and can be returned directly. In line 19 of the code, if the target object is not loading, then the possible states of the target object at this time are: not loaded or loading failed. Regardless of whether it is not loaded or loading failed, you need to create a script tag to start dynamically loading the Javascript module, and update the state of the target object to: loading; in lines 53 to 62 of the code, the observer object is created when the target object is in the loading state; in fact, this includes the observer object created when the state changes from unloaded to loading, the observer object created when the state changes from failed to load to loading, and the observer object created when it is already in the loading state and there is a new loading request.

[0114] S3. If the loading status is not loaded or loading fails, dynamically load the Javascript module and update the loading status to loading. Figure 19 As shown, specifically including:

[0115] S31. If the loading status is not loaded, execute S311;

[0116] S311, dynamically load the Javascript module and update the loading status to loading;

[0117] S32. If the loading status is loading failure, execute S321;

[0118] S321. Dynamically load the Javascript module and update the loading status to loading.

[0119] The dynamically loading of the Javascript module specifically includes:

[0120] Dynamically create a script tag, the script tag contains the source code address of the Javascript module, and bind the script tag to a loading success trigger event and a loading failure trigger event;

[0121] Insert the bound script tag into the HTML document for dynamic loading;

[0122] The loading success triggering event does not pass in preset parameters after the Javascript module is successfully downloaded, and the loading failure triggering event passes in preset parameters after the Javascript module fails to be downloaded.

[0123] Specifically, such as Figure 14As shown, in lines 19 to 30 of the code, if the loading status is not loading, that is, not loaded or loading fails, as shown Figure 19 As shown, loadScript starts to dynamically create a script tag (i.e., a script tag), binds the onload event (i.e., a loading success trigger event) and the onerror event (i.e., a loading failure trigger event), and finally inserts it into an HTML document (i.e., a Hypertext Markup Language document); the onload and onerror events are triggered by the browser. When the script tag is inserted into the HTML document, the browser recognizes the newly added script tag, starts to parse the tag and extracts the src address (i.e., the source code address) in the script tag, and then starts to download the corresponding Javascript module;

[0124] When the target object is downloaded, the browser will actively trigger the onload event and execute the specified method in the onload attribute of the script object. The specified method executes the resolve method in line 25. Calling the resolve method of Promise will immediately execute the method wrapped by the then method of Promise, that is, the method in line 30 will be executed. In the method on line 30, the observer object in the observer array of the target object will be executed eventually.

[0125] When the target object fails to download, the browser actively triggers the onerror event, executes the specified method in the onerror property of the script object, and passes the corresponding error object to the method. The method executes the reject method in line 26 and passes in the err parameter. Calling the reject method of Promise will immediately execute the method wrapped by the catch method of Promise, that is, the method in line 39 will be executed. In the method on line 39, the observer object in the observer array of the target object will be executed.

[0126] S4. If the loading status is loaded, directly notify the loading request corresponding to the Javascript module to respond, such as Figure 19 and Figure 15 As shown, through Figure 15 Lines 12 to 16 of the code implement this, that is, if the target object has been loaded, then directly execute Promise.resolve() to return a Promise object to notify the loading request for a successful loading response.

[0127] S5. If the loading status is updated from loading to loaded or loading fails, each observer object in the observer array is executed to notify the loading request corresponding to the Javascript module to respond.

[0128] Specifically, each observer object in the observer array is executed to determine whether the preset parameter exists. If not, the observer object notifies the loading request corresponding to the Javascript module to respond with a successful load. If so, the observer object notifies the loading request corresponding to the Javascript module to respond with a failed load.

[0129] In an optional implementation, once the state of the observer object changes, the loading state of the observer object is correspondingly updated.

[0130] S6. Clear the observer array corresponding to the target object.

[0131] When a loading request corresponding to the Javascript module is received, S2-S5 will be executed, and S2-S5 may not be executed in sequence.

[0132] like Figure 16 As shown in the actual application scenario, the product manager feels that loading the xlsx module only when clicking the button is not a good user experience, so he hopes to preload the xlsx module to improve the response speed of clicking the button. Figure 16 In the code of lines 33 and 66, the xlsx module is dynamically loaded when the two components are initialized. Figure 6 The code knows when Figure 16 When the 66th line of code is executed, Figure 6 The status of the xlsx module in SCRIPTS is still "unload" because at this time, Figure 16 Although the 33rd line of code has been executed, the xlsx module is still being downloaded, so, Figure 16 When the 66th line of code is executed, the script tag will still be dynamically created and the xlsx module will be loaded repeatedly. Figure 17 As shown, when component 1 loads the xlsx module, component 2 simultaneously initiates a dynamic loading request for xlsx, and two script tags are created in the page to load the xlsx module at the same time.

[0133] like Figure 18As shown, after the page is opened, the 33rd and 66th lines of code will be executed immediately. After using the above method of the present invention, only one xlsx script tag is created in the Elements panel of the browser, that is, there is no need to consider the timing problem of dynamic loading. No matter when it is called, the same Javascript module can always be loaded only once, which reduces the workload of developers, improves code quality, reduces page size, saves network bandwidth and increases page loading speed.

[0134] The present invention Figures 11-18 The codes in the figure are only examples of a code implementation method and can be replaced by other codes that can implement the above steps.

[0135] Example 2

[0136] Please refer to Figure 8 A resume generation terminal in this embodiment includes a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, each step in the resume generation method in the first embodiment is implemented.

[0137] In summary, the resume generation method and terminal provided by the present invention take the Javascript module as the target object and the loading request corresponding to the Javascript module as the observer object. When receiving the loading request corresponding to the Javascript module, when the loading status of the Javascript module is loading, the loading request is created as an observer object to add a subscription to the target object. When the loading status is loaded, the loading request corresponding to the Javascript module is directly notified to respond. When the loading status is updated and updated from loading to loaded or loading fails, each observer object in the observer array is executed to notify the loading request corresponding to the Javascript module to respond. By applying the observer pattern to the dynamic loading of Javascript modules, as long as the state of the target object changes, it will actively initiate an event to notify the observer object to respond. After observing the event change, the observer object will perform corresponding processing, thereby effectively avoiding the problem of repeated loading when the Javascript module is dynamically loaded; at the same time, the browser can download the Javascript module according to the source code address of the Javascript module in the script tag. When the download is successful, the load success event will be automatically triggered. When the download fails, the load failure event will be automatically triggered. Preset parameters will be passed in this event, so that the preset parameters can be used to determine whether the load request needs to be responded to as a failure or success, thereby achieving the smooth loading of the Javascript module.

[0138] The above descriptions are merely embodiments of the present invention and are not intended to limit the patent scope of the present invention. Any equivalent transformations made using the contents of the present invention's description and drawings, or directly or indirectly applied in related technical fields, are also included in the patent protection scope of the present invention.

Claims

1. A Javascript module dynamic loading method, characterized in that: Including steps: Initialize a target object, which is a Javascript module, and initialize a global object corresponding to the target object, which includes the loading status of the Javascript module and an observer array corresponding to the target object; When receiving a load request corresponding to the Javascript module, if the loading status is loading, creating an observer object for the load request corresponding to the Javascript module, and saving the observer object into the observer array; If the loading status is not loaded or loading fails, dynamically load the Javascript module and update the loading status to loading; If the loading status is loaded, directly notifying the loading request corresponding to the Javascript module to respond; If the loading status is updated from loading to loaded or loading fails, each observer object in the observer array is executed to notify the loading request corresponding to the Javascript module to respond.

2. A Javascript module dynamic loading method according to claim 1, characterized in that: After executing each observer object in the observer array to notify the load request corresponding to the Javascript module to respond, the method further includes: Clears the array of observers corresponding to the target object.

3. A Javascript module dynamic loading method according to claim 1, characterized in that: The directly notifying and responding to the loading request corresponding to the Javascript module includes: Directly notify the loading request corresponding to the Javascript module to respond to a successful loading.

4. A Javascript module dynamic loading method according to claim 1, characterized in that: The dynamically loading of the Javascript module includes: Dynamically create a script tag, the script tag contains the source code address of the Javascript module, and bind the script tag to a loading success trigger event and a loading failure trigger event; Insert the bound script tag into the HTML document for dynamic loading; The loading success triggering event does not pass in preset parameters after the Javascript module is successfully downloaded, and the loading failure triggering event passes in preset parameters after the Javascript module fails to be downloaded.

5. A Javascript module dynamic loading method according to claim 4, characterized in that: The executing each observer object in the observer array notifies the loading request corresponding to the Javascript module to respond to the loading request, including: Execute each observer object in the observer array to determine whether the preset parameter exists. If not, notify the loading request corresponding to the Javascript module through the observer object to respond to a successful load. If so, notify the loading request corresponding to the Javascript module through the observer object to respond to a failed load.

6. A Javascript module dynamic loading terminal, 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 following steps are implemented: Initialize a target object, which is a Javascript module, and initialize a global object corresponding to the target object, which includes the loading status of the Javascript module and an observer array corresponding to the target object; When receiving a load request corresponding to the Javascript module, if the loading status is loading, creating an observer object for the load request corresponding to the Javascript module, and saving the observer object into the observer array; If the loading status is not loaded or loading fails, dynamically load the Javascript module and update the loading status to loading; If the loading status is loaded, directly notifying the loading request corresponding to the Javascript module to respond; If the loading status is updated from loading to loaded or loading fails, each observer object in the observer array is executed to notify the loading request corresponding to the Javascript module to respond.

7. A Javascript module dynamic loading terminal according to claim 6, characterized in that: After executing each observer object in the observer array to notify the load request corresponding to the Javascript module to respond, the method further includes: Clears the array of observers corresponding to the target object.

8. A Javascript module dynamic loading terminal according to claim 6, characterized in that: The directly notifying and responding to the loading request corresponding to the Javascript module includes: Directly notify the loading request corresponding to the Javascript module to respond to a successful loading.

9. A Javascript module dynamic loading terminal according to claim 6, characterized in that: The dynamically loading of the Javascript module includes: Dynamically create a script tag, the script tag contains the source code address of the Javascript module, and bind the script tag to a loading success trigger event and a loading failure trigger event; Insert the bound script tag into the HTML document for dynamic loading; The loading success triggering event does not pass in preset parameters after the Javascript module is successfully downloaded, and the loading failure triggering event passes in preset parameters after the Javascript module fails to be downloaded.

10. A Javascript module dynamic loading terminal according to claim 9, characterized in that: The executing each observer object in the observer array notifies the loading request corresponding to the Javascript module to respond to the loading request, including: Execute each observer object in the observer array to determine whether the preset parameter exists. If not, notify the loading request corresponding to the Javascript module through the observer object to respond to a successful load. If so, notify the loading request corresponding to the Javascript module through the observer object to respond to a failed load.

Images