Home > Developer > JavaScript
In the previous article "how to ensure the execution sequence of JavaScript-practice", we found that jquery's HTML function can ensure that the Dynamically Loaded Javascript is executed in the introduced sequence.
Let's simply download the htmlsource code (test2.htm ):
<HTML>
<Head>
<Title> </title>
<SCRIPT src = "JS/jquery-1.4.4.js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT>
$ (Function (){
Certificate ('{container'{.html ('<SCRIPT src = "./service. ashx? File = JS/jquery-ui.js & delay = 2000 "type =" text \/JavaScript "> <\/SCRIPT> '+' <SCRIPT> alert (typeof (jquery. UI); <\/SCRIPT> ');
});
</SCRIPT>
</Head>
<Body>
<Div id = "Container">
</Div>
</Body>
</Html>
2. debug and follow up in one step
Line-by-line analysis of jquery source code is quite boring. In this case, I will use test2.htm as the target to debug the jquery source code.
1) first in HTML: open a breakpoint and refresh the page.Here the value is a string: "<SCRIPT src ="./service. ashx? File = JS/jquery-ui.js & delay = 2000 "type =" text/JavaScript "> </SCRIPT> <SCRIPT> alert (typeof (jquery. UI); </SCRIPT>"
Let's look at the condition branch: first, let's look at what rnocache is?
It can be seen that the value contains a <SCRIPT string and does not enter the second condition branch.
2) enter the last condition branch of the HTML Function
Let's take a look at the append function:
3) enter the dommanip Function
Continue the single-step debugging and find the target. Here we can judge the length of the scripts:
It should have analyzed the input string and extracted the script tag. Let's take a look at the content of the local variable scripts:
4) Target discovery
The two local variables scripts and evalscript are important to us. Let's look at them separately:
Scripts, which is an array and contains two SCRIPT tags:
[<SCRIPT src = "./service. ashx? File = JS/jquery-ui.js & delay = 2000 "type =" text/JavaScript "> </SCRIPT>
, <SCRIPT> alert (typeof (jquery. UI); </SCRIPT>]
Evalscript is a function called through the jquery. Each function. Each value in the array above is uploaded as a parameter to this function for execution:
Function evalscript (I, ELEM ){
If (ELEM. SRC ){
Jquery. Ajax ({
URL: ELEM. SRC,
Async: false,
Datatype: "script"
});
} Else {
Jquery. globaleval (ELEM. Text | ELEM. textcontent | ELEM. innerhtml | "");
}
If (ELEM. parentnode ){
ELEM. parentnode. removechild (ELEM );
}
}
3. Oh, understand
After analyzing the scripts, we can see that the jquery.html function first retrieves the script and then applies the evalscript function to each script tag.
In this function, external JavaScript inline Javascript is processed differently.
1) How does jquery.html process external script tags in strings?Jquery. Ajax ({
URL: ELEM. SRC,
Async: false,
Datatype: "script"
});
For external script labels, such as: <SCRIPT src = "./service. ashx? File = JS/jquery-ui.js & delay = 2000 "type =" text/JavaScript "> </SCRIPT>, jquery adopts the synchronous Ajax Scheme (async: false ).This ensures the dynamic performance in different browsers.JSThe key to the order of loading.
2) How does jquery.html process inline SCRIPT tags in strings?Jquery. globaleval (ELEM. Text | ELEM. textcontent | ELEM. innerhtml | "");
Let's take a look at the definition of the globaleval function:
It can be seen that for the inline script tag, jquery creates the script tag in the head for execution.
4. Postscript
At present, all the ins and outs seem to be clearly visible. Have you ever considered that if you dynamically load JavaScript files under different domain names (cross-domain), can jquery still ensure the execution order of Javascript in all browsers?
It is also said that jquery.html is a perfect strategy for accelerating cdnacceleration of popular static resources?
See how to ensure the execution sequence of JavaScript-jquery.html is not the omnipotent key. To be continued...
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
