JavaScript の実行順序を保証する方法 - jQuery.html_jquery の詳細な分析-jsチュートリアル-php.cn

JavaScript の実行順序を保証する方法 - jQuery.html_jquery の詳細な分析

WBOY

リリース： 2016-05-16 18:10:03

オリジナル

886 人が閲覧しました

HTML ソースコード (test2.htm) を簡単に確認してみましょう:

>< ;/div> 退屈なこと。ここでは test2.htm をターゲットとして使用してデバッグし、jQuery ソースコードを入力します。
1) まず html: にブレークポイントを作成し、ページを更新します。

ここでの値は文字列です: "<script>alert(typeof(jQuery.ui));</script>
内容を見てみましょう条件分岐: まず、rnocache とは何なのか見てみましょう。

value には , <script>alert(typeof(jQuery.ui));</script>] evalScript、これは jQuery.each 関数を通じて呼び出される関数です。上記の配列の各要素はそれぞれの値になります。実行のためにこの関数にパラメータとして渡されます:

コードをコピーします

コードは次のとおりです:

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 || "" ); elem.parentNode ) {

elem.parentNode.removeChild( elem );

} 
} 

3. 上記の分析を通じて、次のことができます。 jQuery.html 関数は最初にスクリプトを取得し、次に evalScript 関数を各スクリプト タグに適用します。 
この関数では、外部 JavaScript とインライン JavaScript で処理が異なります。 
1) jQuery.html が文字列内の外部スクリプト タグを処理する方法 

コードをコピー 

 コードは次のとおりです:

jQuery.ajax({
url: elem.src,
async: false,
dataType: "script"
});
For external script tags, such as: , jQuery A synchronous Ajax solution is adopted (async: false). This is also the key to ensuring the loading order of dynamic JS in various browsers.
2) How jQuery.html handles inline script tags in strings
jQuery.globalEval( elem.text || elem.textContent || elem.innerHTML || "" );
Let’s take a look The definition of the globalEval function:

It can be seen that for inline script tags, jQuery executes by creating a script tag in the head.
4. Postscript
At present, the ins and outs of everything seem to be clearly visible. So have you ever considered that if JavaScript files under different domain names (Cross-Domain) are dynamically loaded, can jQuery still ensure the execution order of JavaScript under all browsers?
In other words, in the current popular CDN acceleration situation of static resources, is jQuery.html a complete solution?
Please see the next article on how to ensure the execution order of JavaScript - jQuery.html is not a master key. to be continued. . .