Details about js asynchronous file loader and details about js asynchronous loading _ PHP Tutorial

Details about js asynchronous file loaders and js asynchronous loading. Details about js asynchronous file loaders, details about js asynchronous loading we often encounter this scenario, some pages depend on third-party plug-ins, and these plug-ins are relatively large, it is not suitable for details about js asynchronous file loaders packaged into pages.

We often encounter this scenario where some pages depend on third-party plug-ins, which are relatively large and not suitable for packaging in the main js of the page (assuming we use the cmd method, js will be packaged into a file). at this time, we usually obtain these plug-in files asynchronously and complete the initialization logic after the download is complete.

Taking image upload as an example, we may use the plug-in plupload. js, so we will write it like this:

!window.plupload ?    $.getScript( "/assets/plupload/plupload.full.min.js?1.1.15", function() {      self._initUploader();    }) :    self._initUploader();    

However, our pages are usually composed of multiple independent modules (components). if both modules A and B depend on plupload. js. do you have to write the above code in both places. If you do this, in plupload. before the js file is downloaded, two requests may be initiated. because the js file is downloaded in parallel, the js file may be downloaded repeatedly, instead of the first download and the second cache content.

Is the case where multiple components on the page depend on vue. js (the scenario where jquery and vue are mixed ):

Therefore, locking is required in actual use, that is, when the script is being loaded, the script should not be repeatedly requested. after loading is complete, the subsequent logic should be executed in sequence. a good tool, promise, is available, it is easy to implement.

// Vue loader var promiseStack = []; function loadvue () {var promise = $. deferred (); if (loadvue. lock) {promiseStack. push (promise);} else {loadvue. lock = true; window. vue? Promise. resolve (): // An error is written here, window. when Vue is true, the lock must be set to false. I changed it later $. getScript ("/assets/vue. min. js? 1.1.15 ", function () {loadvue. lock = false; promise. resolve (); promiseStack. forEach (function (prom) {prom. resolve () ;}) ;}return promise ;}window. loadvue = loadvue;

Then in the dependency on vue. js:

loadvue().then(function() { // do something }); 

Let's look at the request:

Well, it seems that the problem has been solved here, but if there are multiple plug-in dependencies on my page, for example, dependency on plupload. js depends on vue again. js, do I want to write the above code again (how do I feel like I have said this )? Isn't it redundant? Therefore, we need an asynchronous loader generator to help us generate multiple asynchronous loaders.

/*** @ Des: js asynchronous loader * @ param {string} name loader name * @ param {string} global variable * @ param {string} url loading address **/var promiseStack = {}; exports. generate = function (name, global, url) {var foo = function () {if (! PromiseStack [name]) {promiseStack [name] = [];} var promise = $. deferred (); if (foo. lock) {promiseStack [name]. push (promise);} else {foo. lock = true; if (window [global]) {foo. lock = false; promise. resolve ();} else {$. getScript (url, function () {foo. lock = false; promise. resolve (); promiseStack [name]. forEach (function (prom) {prom. resolve () ;}) ;}}} return promise ;}; return foo ;};

Then we can generate an asynchronous loader and assign it to window

// Global loader window. loadvue = loader. generate ('Vue ', 'Vue', '/assets/vue/Vue. min. js '); window. loadPlupload = loader. generate ('plupload', 'plupload', '/assets/plupload. full. min. js ');

The problem is basically solved.

The above is a detailed description of the js asynchronous file loader, hoping to help you learn it.

Articles you may be interested in:

• Relatively simple code for loading JS files asynchronously
• Js achieves Image pre-loading (js operates Image object attribute complete, event onload asynchronously loads images)
• Javascript asynchronous loading (loading method of browsers in javascript)
• Implementation principle of synchronous loading and asynchronous loading of javascript files
• Three solutions for js asynchronous loading
• Use jQuery's deferred object to asynchronously load JS files in sequence
• Asynchronously and dynamically load js and css file js code
• Example of asynchronous loading of javascript loadScript

In this scenario, some pages depend on third-party plug-ins, which are relatively large and not suitable for packaging to pages...