Shulou(Shulou.com)06/03 Report--

This article mainly shows you "js how to achieve asynchronous file loader", the content is easy to understand, clear, hope to help you solve your doubts, the following let Xiaobian lead you to study and learn "js how to achieve asynchronous file loader" this article.

We often encounter this scenario where some pages rely on third-party plug-ins, but these plug-ins are too large to be packaged into the main js of the page (assuming we are using cmd, and the js will be packaged into a file). At this time, we usually get these plug-in files asynchronously and complete the initialization logic after the download is completed.

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

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

But our page is usually composed of multiple independent modules (components), if the An and B modules on the page are dependent on plupload.js, should we write the above code in both places? If you do this, two requests may be made before the plupload.js is downloaded, and because the js file is downloaded in parallel, the js file may be downloaded repeatedly instead of the first download and the second time the cached contents are fetched.

The following figure shows how multiple components of the page depend on vue.js (in the scenario where jquery and vue are mixed):

Therefore, it needs to be locked in practical use, that is, when the script is being loaded, you should not repeat the request script, wait for the completion of the loading, and then execute the following logic in turn. There is a good tool called promise, which 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 (): / / wrong. Set lock to false when window.Vue is true. I changed it to $.getScript ("/ assets/vue/vue.min.js", function () {loadvue.lock = false; promise.resolve (); promiseStack.forEach (function (prom) {prom.resolve ();} return promise) later. } window.loadvue = loadvue

Then in places that rely on vue.js:

Loadvue () .then (function () {/ / do something})

Look at the request again:

Well, this seems to solve the problem, but if I have multiple plug-in dependencies on my page, such as relying on both plupload.js and vue.js, am I going to write the above code again (why do I feel like I said that)? Isn't that redundant? So we need an asynchronous loader generator that can help us generate multiple asynchronous loaders.

/ * * @ des: js Asynchronous Loader producer * @ param {string} name Loader name * @ param {string} global Global variable * @ param {string} url load address * / var promiseStack = {}; exports.generate = function (name, global, url) {var foo = function () {if (! promiseStack [name]) {promiseStack [name] = [];} var promise = $.Deferred () If (foo.lock) {promoeStack [name] .push (promise);} else {foo.lock = true; if (window [global]) {foo.lock = false; promise.resolve ();} else {$.getScript (url, function () {foo.lock = false; promise.resolve () Return promise; [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/plupload.full.min.js')

It is the same as above when using it, which basically solves our problem.

These are all the contents of the article "how to implement an asynchronous file loader in js". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.