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

Source: Internet
Author: User
Tags getscript

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 ...

  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.