Detailed JS asynchronous file loader, detailed JS asynchronous loading _php Tutorial

Detailed JS asynchronous file loader, detailed JS asynchronous loading

We often encounter this scenario, some pages rely on third-party plug-ins, and these plug-ins are larger, not suitable for packaging into the main JS page (assuming that we are using the Cmd method, JS will be packaged into a file), then this time we will usually asynchronously get these plug-in files, and complete the initialization logic after the download is complete.

Take image upload as an example, we may use plupload.js this plugin, then we will write:

!window.plupload?    $.getscript ("/assets/plupload/plupload.full.min.js", function () {      self._inituploader ();    }):    self._ Inituploader ();    

However, our page is usually composed of several independent modules (components), if the page A, b two modules are dependent on plupload.js, it is not in two places to write the above code again. If this is done, before the plupload.js is downloaded, two requests may be initiated, because it is a parallel download, the JS file may be repeated download, rather than the first download down, the second time to take the cached content.

Is the case where multiple components of the page depend on Vue.js (jquery and Vue mixed scenarios):

Therefore, in the actual use of lock, that is, when the script is loading, should not repeat the request script, waiting for the load to complete, followed by the subsequent logic, there is promise this good tool, implementation is very simple.

Vue loader var promisestack = [];function Loadvue () {  var promise = $. Deferred ();  if (loadvue.lock) {    Promisestack.push (promise);      } else {    Loadvue.lock = true;    Window. Vue?        Promise.resolve ()://Here is the wrong write, window. When Vue is true, lock is set to false, and I change it back to       $.getscript ("/assets/vue/vue.min.js", function () {        loadvue.lock = false;        Promise.resolve ();        Promisestack.foreach (function (Prom) {          prom.resolve ();});}      );  return promise;} Window.loadvue = Loadvue;

Then in the dependent vue.js place:

Look at the request again:

Well, it seems to solve the problem here, but if there are multiple plugins on my page, such as relying on plupload.js and relying on vue.js, do I have to write the above code again (how do I feel like saying this)? So it's not redundant? So we need a generator for the async loader that can help us build multiple asynchronous loaders.

/** * @des: JS Asynchronous Loader producer * @param {string} name  Loader name * @param {string} global global variable * @param {string} URL  load address **/va R 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 the asynchronous loader and assign it to the window

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

The use of the same time, so that the basic solution to our problem.

The above is about the JS asynchronous file loader details, hope that everyone's learning has helped.

Articles you may be interested in:

• Simple code to load the JS file asynchronously
• JS implementation picture pre-load (JS operation Image Object Properties complete, event onload load picture asynchronously)
• JavaScript asynchronous loading in detail (how browsers are loaded in JavaScript)
• The implementation principle of synchronous loading and asynchronous loading of JavaScript files
• Three solutions for JS asynchronous loading
• Using jquery's deferred object to asynchronously load JS files sequentially
• Asynchronously dynamically loading JS and CSS files JS code
• JavaScript loadscript Asynchronous Load Script example explained

http://www.bkjia.com/PHPjc/1095276.html www.bkjia.com true http://www.bkjia.com/PHPjc/1095276.html techarticle detailed JS asynchronous file loader, detailed JS asynchronous loading we often encounter this scenario, some pages rely on third-party plug-ins, and these plug-ins are relatively large, not suitable for packaging to the page ...

