Before two are introduced, by dynamically loading JS file or JS module, is how to achieve one step at a time.
The first is to implement the separation between the module loading and the callback function through the synchronization strategy, and then the asynchronous strategy is used to separate the module loading from the callback function.
This article, mainly to talk about how to optimize the asynchronous strategy, and implementation of arbitrary loading (not in any order load modules), the page after the ready load file. Let's pick up the last question.
1, after the page ready load
2. Add modules to load randomly
Look at the first question, this problem is actually relatively simple, mainly listening to the page domcontentloaded events, here is not much to explain, the network search, a bunch of answers, directly on the code.
Copy Code code as follows:
Using.ready = function (callback) {
Readylist.push (callback);
if (Document.addeventlistener) {
Document.addeventlistener ("domcontentloaded", _ready,false);
Return
}
For IE
var domready = function () {
try{
Document.documentElement.doScroll ("left");
_ready ();
}catch (ex) {
SetTimeout (domready,1);
Return
}
}
Domready ();
}
The most incomprehensible part of this code is
Copy Code code as follows:
Document.documentElement.doScroll ("left");
Here is actually the page of IE loaded the event, simply said that ie inside the tag after loading, is able to operate scroll, it is based on this principle to determine whether the page is loaded in IE.
There is a _ready function that is used to perform all the loaded functions after the page is loaded. Put a little bit of code
(edit this paragraph: page loaded ready function is not what we think of the original JS Window.load, simply said that only the page of the DOM structure loaded, specific information, you can own Baidu Google)
Copy Code code as follows:
var readylist = [];
var _ready = function () {
while (Readylist.length > 0) {
var func = Readylist.shift ();
Func ();
}
Document.removeeventlistener ("domcontentloaded", _ready,false);
}
Here is the key to this blog post. Let's just take a look at the code.
Copy Code code as follows:
Using.asyn = function (callback) {
Asynqueue.push (callback);
if (!_execasyn.isrunning) {
_execasyn ();
}
}
or notify using to load the required modules, but the inside add a asynqueue array and _execasyn function, their role is
Asynqueue is used to save the function to be called back after the asynchronous load, nothing to explain, is an array, can be understood as creating a function of the queue
The _execasyn is used to perform the saved callback functions, which are to be executed one at a while. Take a look at the code and comment on each line's function in the code
Copy Code code as follows:
var _execasyn = function () {
Create a variable to cache functions that need to be executed
var func = null;
If there are still functions in the queue that are not executed, perform the action
if (Asynqueue.length > 0) {
To modify the _execasyn function to run state
_execasyn.isrunning = true;
Get the first function in the queue that needs to be executed
Func = Asynqueue.shift ();
Call the asynchronous Load module Using.fn.script function and pass in the callback function that needs to be executed after the load completes
Using.fn.script (function () {
Functions that are currently required to execute
Func ();
Iteration _execasyn until there is no function to execute in the queue
_execasyn ();
});
If there is no function to execute in the queue
}else{
The _execasyn run state is changed to False
_execasyn.isrunning = false;
}
}
This function, which is nothing special to explain, is one of the functions that execution needs to be performed. The only thing to note, then, is why the operations queue does not use loops, but rather iterations. The reason is
1, the queue may be a new function at any time need to execute, using the loop, you may not be able to perform the most recent functions, because the function is always inserted into the tail of the queue
2, Using.fn.script is asynchronous, if it is a loop, the current function has not finished, perhaps the next function has entered the execution state. So, in itself, several functions can be executed at the same time, the rate may be higher, why do you want to limit the number of parallel functions? The reason is also very simple, because each execution of the function in the queue, you may need to load the corresponding module, if just friends two or more dependent on the same module of the function needs to be executed, and in parallel execution, it may appear the same module load multiple times, and may cause subsequent functions can not be executed, an exception occurred.
This is the core part of the whole usingjs. In which I added the Using.Class.create function, which is mentioned at the end of the JavaScript dynamic loading article.
Finally, look at the use of the page:
Copy Code code as follows:
<script type= "Text/javascript" src= "Js/using-0.4.2.min.js" ></script>
<script type= "Text/javascript" >
Using ("JQ");
Using ("Userview");
Using ("JQ");
Using.ready (function () {
Using.asyn (function () {
$ ("#panel"). Click (function () {
Alert ("by jquery");
});
});
});
Using.ready (function () {
Using ("Http");
Using.asyn (function () {
var http = new Using.Modules.Http ();
Http.set ("xxx");
Http.show ();
});
Using.asyn (function () {
var h = new Using.Modules.Http ();
H.set ("Ooo");
H.show ();
});
Using ("JQ");
Using.asyn (function () {
$ ("#panel"). Click (function () {
Alert ("Loaded jquery");
});
});
});
</script>
This section of code, deliberately repeated loading, multiple ready events and ready after the Using guide package.
There's a special place to watch.
Copy Code code as follows:
Using ("Http");
Using.asyn (function () {
var http = new Using.Modules.Http ();
Http.set ("xxx");
Http.show ();
});
If you use it in this place
var ht = new Using.Modules.Http ();
It's a Using.Modules.Http, not a constructor.
The reason is
Any operation is asynchronous, and the using ("Http") module loading may not be completed when this sentence is executed
This is a mistake the Zhongmo makes when it's used to multiple friends. Always think the guide bag is all right.
Yes, it's supposed to be like this. After the guide package can be arbitrarily referenced anywhere
But there's gotta be a premise.
So please write down all the code within Using.asyn.
Using.asyn (function () {
var h = new Using.Modules.Http ();
H.set ("Ooo");
H.show ();
});
Usingjs Download
