In the previous JavaScript dynamic loading, it was mentioned that using a synchronous load policy is a way to implement a
Copy Code code as follows:
Using ("jquery");
Using ("User");
$ ("#ID"). Click (function () {
var user = new User ();
User.Name = "XX";
User.show ();
});
Because JS is single-threaded, the synchronization strategy brings many disadvantages, such as blocking the code after the operation, causing the browser to suspend animation and other problems.
Using asynchronous policies is also difficult to implement after the pilot package is used. Can only take the form of callback, which is not usingjs want to achieve, after all, the Getscript function of jquery can be achieved this way.
After some thinking, in the end how to solve the guide package and is asynchronous way, finally come to a solution. Let's take a look at the way the program is programmed.
Copy Code code as follows:
<div id= "Panel" ></div>
<script type= "Text/javascript" src= "Js/using-0.4.js" ></script>
<script type= "Text/javascript" >
Using ("JQ");
Using ("JQ");
Using ("Http");
Using.asyn (function () {
$ ("#panel"). Click (function () {
Alert ("Using jquery object");
});
Using.fetch ("Http", function () {
var http = new Using.Modules.Http ();
Http.set ("xxx");
Http.show ();
});
});
</script>
As shown in the code above, the overall and synchronization strategy is not much modified, but only two times to import jquery, there is obviously a need to deal with only the guide package once, and it added a Using.asyn function, what the specific function to do, and then analyzed.
Are aware that asynchronous policies, is not affected by the current running, then, I import the package, if the load, and the subsequent code is also running, there is just a dependency between the two, then there will be an exception, how to solve the relationship between the two, the current only solution is the callback function.
According to the thought of using, it must be used after the pilot package. Asynchronous solution is in the module before the use of the file is not really to pull, but will need to place the JS file into an object, such as array, when there is a real need, and then one by one to load. To see
Copy Code code as follows:
Using ("JQ");
Using ("JQ");
Using ("Http");
How it works. Previous piece of code
Copy Code code as follows:
var modulelist = [];
Using.fn = Using.prototype;
using.fn.initialize= function (module) {
!this.exist (modulelist,module)? Modulelist.push (module): null;
}
This code is an initialization method that omits the context and intercepts the used prototypes, from which the main responsibility is to place the modules that need to be loaded into the modulelist, and to judge if the modulelist contains the modules that need to be loaded at the time, No action is made.
So, when does it load? This used the Using.asyn method mentioned earlier, that is, the notification using, now it is necessary to load the file asynchronously, and, after loading, call the Using.asyn function's callback function. Same last piece of code
Copy Code code as follows:
Using.asyn = function (callback) {
Using.fn.script (callback);
}
As you can only briefly see from the code, the Using.asyn function calls the Using.fn.script function and passes the callback function to it. Naturally, you need to see how it works.
Copy Code code as follows:
Using.fn.script = function (callback) {
var _this = this,
Complete = 0,
Count = Modulelist.length,
len = 0;
if (count < 1) {
Return
}
var loadscript = function () {
while (Len < count) {
_this.ajax (Using.config[modulelist[len]],function () {
complete++;
if (complete >= count) {
Callback ();
}
});
len++;
}
}
! Using.config? _this.ajax ("/js/config", function () {
Loadscript ();
}): Loadscript ();
}
First look at Using.config, the module configuration file mentioned in the previous article, to notify using the module name to load the corresponding module file.
The second is through the internal function loadscript to do the loading of module files, through a counter complete to determine the current loaded a few modules, when all the modules loaded, then call the callback function.
Integration of the above code, the whole idea is that, through the using object to guide the package, and record, through Using.asyn to notify using for asynchronous loading, and finally by Using.fn.script to implement asynchronous loading and execution of callback functions.
Also note that the Using.fetch function, the entire function is mainly to solve the current code to run to a certain degree or a requirement to load the file, similar to the $.getscript file, before loading will be judged to determine whether the current needs of the module has been loaded, If loaded, the callback function is executed directly.
This time around, the main purpose of this usingjs change is to change the synchronization policy to asynchronous, but there are also a lot of problems, such as $ (document). Ready, which is only executed when the document is loaded, is not difficult to implement, but when writing code, Brain messy, for a while no way to solve Using.asyn multiple calls, due to asynchronous and generated many times loaded with a module, or a variety of inexplicable problems, temporarily without a clue, so, the problem is deferred, step-by-step solution.
There is the order of the Guide package, not in any order, at that time also want to make any guide package, by adding dependencies, to do the code to solve the loading sequence, but also think that this approach does not have much practical significance, the coder must know the dependencies between the files, if the encoding of the people do not know the file loading sequence, is to use the <script> tag form, there will be errors, and make dependencies not only increase the volume of using, more importantly, do a duplication of things. I don't know if that's the right idea.
