CN110231964A - The method of repetitive requests is prevented when a kind of dynamically load js resource - Google Patents
The method of repetitive requests is prevented when a kind of dynamically load js resource Download PDFInfo
- Publication number
- CN110231964A CN110231964A CN201910508793.0A CN201910508793A CN110231964A CN 110231964 A CN110231964 A CN 110231964A CN 201910508793 A CN201910508793 A CN 201910508793A CN 110231964 A CN110231964 A CN 110231964A
- Authority
- CN
- China
- Prior art keywords
- resource
- promise
- resource identification
- config
- success
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44505—Configuring for program initiating, e.g. using registry, configuration files
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44568—Immediately runnable code
- G06F9/44578—Preparing or optimising for loading
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Stored Programmes (AREA)
- Devices For Executing Special Programs (AREA)
Abstract
The invention discloses a kind of methods for preventing repetitive requests when dynamically load js resource, method of the invention by using a map object maintenance difference js resource corresponding Promise example, pass through creation script label dynamically load js resource in Promise object instance, when realizing that each component quotes same js resource, the Promise example got is unique, it ensure that different components are consistent the introducing of same js resource, it is therefore prevented that the repetitive requests of same js resource.
Description
Technical field
The present invention relates to prevent repetitive requests when webpage js loading technique field more particularly to a kind of dynamically load js resource
Method.
Background technique
It, can be by creating script label when needing external js resource in the html page, and script label is set
Src attribute, then script label is added to head element, realization dynamically introduces js resource.Using react Development of Framework
Single-page application in, brother or father and son's component when relying on some identical external js resource, may all use creation simultaneously
The method that script label dynamically introduces js resource.Due to this method be it is asynchronous, at first to certain external js resource
Request is when not yet returning successfully, another component judge not yet to obtain this js resource and again by script label dynamically load
Same js resource.It thus may cause to the repetitive requests of same js resource and repeating for introduced js code.
Summary of the invention
In view of the above-mentioned problems, being solved the invention proposes a kind of method for preventing repetitive requests when dynamically load js resource
The problem of repetitive requests being likely to occur when realizing dynamically load js resource by creation script label.
The present invention through the following technical solutions to achieve the above objectives:
The method of repetitive requests is prevented when a kind of dynamically load js resource, comprising the following steps:
Step 1 creates a javascript file, and the javascript for being used as configuration is created in js file
Key in object config, config object is js resource identification, and the value in config object is the address of corresponding js resource；
Step 2 creates a map object, and the key in this map object is also js resource identification, and value is corresponding
Promise object；
Step 3 creates a loadJs function and is exported by export order, receives an id parameter, id parameter is
Js resource identification, loadJs function is interior to judge whether map object includes this js resource identification, and it is corresponding to be returned to id if it exists
Promise object instance；If it does not exist, then create and return a new Promise object, then by js resource identification and correspondence
Promise object instance deposit map object in；
Step 4, in Promise object instance, according to whether there is the attribute run after fame with incoming id on window object
Judge whether the js resource to be introduced has requested that success, exists and just call resolve method by the state of Promise object
Become success, otherwise with regard to dynamic creation script label, is inquired in configuration object config according to js resource identification corresponding
Js resource address url introduces external js resource with this src attribute that script label is arranged, by script label
Call resolve method that the state of Promise object is become success in onload event, i.e., to the request success of js resource；
Step 5, other modules by import order import loadJs function, according to js resource identification obtain
Corresponding Promise example can execute the code of js resource needed for relying in the then method of Primise example；
Add by above step in multiple components to same js resource in the presence of dependence and using creation script label dynamic
When carrying resource, avoid because to the repetitive requests of same resource and repeating for code caused by asynchronous reason.
Further scheme is that js resource identification is used to judge on window object with the presence or absence of this category in the step 1
Property, judge whether third party js resource introduces success with this.
The beneficial effects of the present invention are:
Method of the invention by using a map object maintenance difference js resource corresponding Promise example,
By creation script label dynamically load js resource in Promise object instance, when realizing that each component quotes same js resource,
The Promise example got is uniquely, to ensure that different components are consistent the introducing of same js resource, it is therefore prevented that right
The repetitive requests of same js resource.
Detailed description of the invention
It to describe the technical solutions in the embodiments of the present invention more clearly, below will be to embodiment or description of the prior art
In required practical attached drawing be briefly described, it should be apparent that, the accompanying drawings in the following description is only the one of the present embodiment
A little embodiments for those of ordinary skill in the art without creative efforts, can also be according to these
Attached drawing obtains other attached drawings.
Fig. 1 is flow chart of the method for the present invention.
Specific embodiment
To make the object, technical solutions and advantages of the present invention clearer, technical solution of the present invention will be carried out below
Detailed description.Obviously, the described embodiment is only a part of the embodiment of the present invention, instead of all the embodiments.It is based on
Embodiment in the present invention, those of ordinary skill in the art without making creative work it is obtained it is all its
Its embodiment belongs to the range that the present invention is protected.
In any embodiment, as shown in Figure 1, when a kind of dynamically load js resource of the invention prevents the side of repetitive requests
Method, comprising the following steps:
Step 1 creates a javascript file, and the javascript for being used as configuration is created in js file
Key in object config, config object is js resource identification, and the value in config object is the address of corresponding js resource；Institute
Js resource identification is stated to be used to judge to judge whether third party js resource introduces with the presence or absence of this attribute on window object with this
Success；
Step 2 creates a map object, and the key in this map object is also js resource identification, and value is corresponding
Promise object；
Step 3 creates a loadJs function and is exported by export order, receives an id parameter, id parameter is
Js resource identification, loadJs function is interior to judge whether map object includes this js resource identification, and it is corresponding to be returned to id if it exists
Promise object instance；If it does not exist, then create and return a new Promise object, then by js resource identification and correspondence
Promise object instance deposit map object in；
Step 4, in Promise object instance, according to whether there is the attribute run after fame with incoming id on window object
Judge whether the js resource to be introduced has requested that success, exists and just call resolve method by the state of Promise object
Become success, otherwise with regard to dynamic creation script label, is inquired in configuration object config according to js resource identification corresponding
Js resource address url introduces external js resource with this src attribute that script label is arranged, by script label
Call resolve method that the state of Promise object is become success in onload event, i.e., to the request success of js resource；
Step 5, other modules by import order import loadJs function, according to js resource identification obtain
Corresponding Promise example can execute the code of js resource needed for relying in the then method of Primise example；
Add by above step in multiple components to same js resource in the presence of dependence and using creation script label dynamic
When carrying resource, avoid because to the repetitive requests of same resource and repeating for code caused by asynchronous reason.
In a specific embodiment, as shown in Figure 1, when a kind of dynamically load js resource of the invention prevents repetitive requests
Method, comprising the following steps:
A javascript file is created, the javascript object for being used as configuration is created in js file
Key in config, config object is js resource identification, this is identified as character string, can according on window object whether
There is this attribute to judge whether third party js resource requests success；Value in config object is the address of corresponding js resource；
A map object is created again, and the key in this map object is also js resource identification, is worth for corresponding Promise
Object；
A loadJs function is created again and is exported by export order, an id parameter is received, and id parameter is js money
Source mark, loadJs function is interior to judge whether map object includes this js resource identification, and it is corresponding to be returned to id if it exists
Promise object instance；If it does not exist, then create and return a new Promise object, then by js resource identification and correspondence
Promise object instance deposit map object in；
According to id parameter in Promise object instance, i.e. whether the js resource identification judgement js resource to be introduced has asked
Hope for success function, exist and just call resolve method, otherwise just according to js resource identification in the corresponding js of configuration object config inquiry
Resource address url, and dynamic creation script label, the src attribute of setting script label introduce external js resource, by
Call resolve method that the state of Promise object is become success in the onload event of script label, i.e., to js resource
Request success.
Other modules import loadJs function by import order, obtain corresponding Promise pairs of js resource identification
As guaranteeing only initiate same js resource primary request, prevent in this way when multiple components rely on some external js resource simultaneously
Only repetitive requests and code repeat.
Method of the invention by using a map object maintenance difference js resource corresponding Promise example,
By creation script label dynamically load js resource in Promise object instance, when realizing that each component quotes same js resource,
The Promise example got is uniquely, to ensure that different components are consistent the introducing of same js resource, it is therefore prevented that right
The repetitive requests of same js resource.
The above description is merely a specific embodiment, but scope of protection of the present invention is not limited thereto, any
Those familiar with the art in the technical scope disclosed by the present invention, can easily think of the change or the replacement, and should all contain
Lid is within protection scope of the present invention.Specific technical features described in the above specific embodiments, in not lance
In the case where shield, can be combined in any appropriate way, in order to avoid unnecessary repetition, the present invention to it is various can
No further explanation will be given for the combination of energy.Various embodiments of the present invention can be combined randomly, only
Want it without prejudice to thought of the invention, it should also be regarded as the disclosure of the present invention.
Claims (2)
1. preventing the method for repetitive requests when a kind of dynamically load js resource, which comprises the following steps:
Step 1 creates a javascript file, and the javascript object for being used as configuration is created in js file
Key in config, config object is js resource identification, and the value in config object is the address of corresponding js resource；
Step 2 creates a map object, and the key in this map object is also js resource identification, and value is corresponding
Promise object；
Step 3 creates a loadJs function and is exported by export order, receives an id parameter, and id parameter is js money
Source mark, loadJs function is interior to judge whether map object includes this js resource identification, and it is corresponding to be returned to id if it exists
Promise object instance；If it does not exist, then create and return a new Promise object, then by js resource identification and correspondence
Promise object instance deposit map object in；
Step 4 is sentenced in Promise object instance according to whether there is the attribute run after fame with incoming id on window object
Whether the disconnected js resource to be introduced has requested that success, exists and just resolve method is called to become the state of Promise object
Success is inquired corresponding js in configuration object config according to js resource identification and is provided otherwise with regard to dynamic creation script label
Source address url introduces external js resource with this src attribute that script label is arranged, passes through the onload in script label
Call resolve method that the state of Promise object is become success in event, i.e., to the request success of js resource；
Step 5, other modules by import order import loadJs function, according to js resource identification obtain correspond to
Promise example, the code of js resource needed for relying on can be executed in the then method of Primise example.
2. the method for preventing repetitive requests when a kind of dynamically load js resource as described in claim 1, which is characterized in that the step
Js resource identification is used to judge whether judge third party js resource with this with the presence or absence of this attribute on window object in rapid one
It introduces successfully.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910508793.0A CN110231964B (en) | 2019-06-12 | 2019-06-12 | Method for preventing repeated requests during dynamic loading of js resources |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910508793.0A CN110231964B (en) | 2019-06-12 | 2019-06-12 | Method for preventing repeated requests during dynamic loading of js resources |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110231964A true CN110231964A (en) | 2019-09-13 |
| CN110231964B CN110231964B (en) | 2021-06-22 |
Family
ID=67859876
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910508793.0A Active CN110231964B (en) | 2019-06-12 | 2019-06-12 | Method for preventing repeated requests during dynamic loading of js resources |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110231964B (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112612530A (en) * | 2019-09-18 | 2021-04-06 | 华为技术有限公司 | Class query method and device |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106293714A (en) * | 2016-07-29 | 2017-01-04 | 四川天邑康和通信股份有限公司 | A kind of method of improvement ajax performance based on data Layer |
| CN109710347A (en) * | 2018-10-16 | 2019-05-03 | 北京天地和兴科技有限公司 | A method of list page is generated with filtering function based on MVC frame Efficient Development |
| CN109783183A (en) * | 2019-02-18 | 2019-05-21 | 北京达佳互联信息技术有限公司 | Request processing method, device, electronic equipment and storage medium |
-
2019
- 2019-06-12 CN CN201910508793.0A patent/CN110231964B/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106293714A (en) * | 2016-07-29 | 2017-01-04 | 四川天邑康和通信股份有限公司 | A kind of method of improvement ajax performance based on data Layer |
| CN109710347A (en) * | 2018-10-16 | 2019-05-03 | 北京天地和兴科技有限公司 | A method of list page is generated with filtering function based on MVC frame Efficient Development |
| CN109783183A (en) * | 2019-02-18 | 2019-05-21 | 北京达佳互联信息技术有限公司 | Request processing method, device, electronic equipment and storage medium |
Non-Patent Citations (5)
| Title |
|---|
| MEANTEACHER: "Using multiple requests with promise [duplicate]", 《HTTPS://STACKOVERFLOW.COM/QUESTIONS/44294280/USING-MULTIPLE-REQUESTS-WITH-PROMISE》 * |
| WEIXIN_30739595: "JS解决页面多次，重复请求 的2个方法", 《HTTPS://BLOG.CSDN.NET/WEIXIN_30739595/ARTICLE/DETAILS/98212601》 * |
| WHEATO: "Promise 异步流程控制", 《HTTPS://JUEJIN.CN/POST/6844903501315719176》 * |
| 大白: "axios 的二次封装（拦截重复请求、异常统一处理）", 《HTTPS://SEGMENTFAULT.COM/A/1190000016457844》 * |
| 拉面的无聊时光: "js promise 的使用", 《HTTPS://WWW.JIANSHU.COM/P/1BE39E24F020》 * |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112612530A (en) * | 2019-09-18 | 2021-04-06 | 华为技术有限公司 | Class query method and device |
| CN112612530B (en) * | 2019-09-18 | 2022-05-17 | 华为技术有限公司 | Class query method and device |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110231964B (en) | 2021-06-22 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107507005B (en) | Off-link data access method and system based on alliance chain | |
| CN110348239B (en) | Desensitization rule configuration method, data desensitization method, system and computer equipment | |
| CN101964025A (en) | XSS (Cross Site Scripting) detection method and device | |
| CN102831358B (en) | A kind of method and device preventing webpage tamper | |
| CN107295116B (en) | Domain name resolution method, device and system | |
| CN102135985A (en) | Method and system for searching by calling search result of third-party search engine | |
| CN105337837A (en) | Message transmitting method and device | |
| CN104751030A (en) | User access permission control method and device | |
| CN109933980A (en) | A kind of vulnerability scanning method, apparatus and electronic equipment | |
| CN110231964A (en) | The method of repetitive requests is prevented when a kind of dynamically load js resource | |
| CN102510338B (en) | System, device and method for security certificate for multi-organization interconnection system | |
| CN106357668A (en) | Method for preventing attack of xss | |
| CN104361040A (en) | Method and device for customized query | |
| US20170031888A1 (en) | System and method for automatically inserting correct escaping functions for field references in a multi-tenant computing environment | |
| CN116506427A (en) | Certificate list downloading method and device, vehicle-mounted equipment and storage medium | |
| CN107707569A (en) | DNS request processing method and DNS systems | |
| CN107562428A (en) | Rule-based adaptable software quick interface arrangement method and system | |
| CN107067244A (en) | Service implementation method, method of payment, business realizing device and payment services end | |
| CN111885190B (en) | Service request processing method and system | |
| CN107181747B (en) | handle analytic system containing top-level node | |
| CN110990000B (en) | Data request processing method, device and equipment of MVC pattern design model layer | |
| CN105988785A (en) | RPC (remote procedure call) service development method and device | |
| CN103034545A (en) | Communication framework and method based on ACE (adaptive communication environment) and communication method among function modules | |
| CN112214236A (en) | Method for building management system of application architecture of software rapid development platform | |
| CN106570017A (en) | Data caching method and system |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |