JavaScript의 실행 순서를 보장하는 방법: jQuery.html은 *_jquery가 아닙니다.

1. 소개
이전 글 "JavaScript의 실행 순서를 확인하는 방법 - jQuery.html 심층 분석"에서 jQuery.html 함수를 사용할 수 있는 이유를 밝혔습니다. 다양한 브라우저 동적 JS를 순차적으로 실행하는 비결은 외부 JavaScript의 동기식 AJAX 검색입니다.
HTML 소스 코드(test2.htm)를 간단히 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

<script> { <br>$( '#container').html('<script src="http://test1.sanshi.me/jsorder/service.ashx?file=js/jquery-ui.js&delay=2000" 유형 ="text/javascript" ></script>' '<script>alert(typeof(jQuery.ui));</script>')

/html>


可以看到，其中的jQueryUI脚本指向的是第二个域名下的（test1.sanshi.me）。
3) 在不同浏览器下测试

	test2_1.htm 使用jQuery.html函数动态加载其它域下的JavaScript
Firefox 3.6
IE 8
Chrome 10
Safari 4
Opera 11

3. jQuery.html并非万能钥匙，那么
不知道大家是否还记得我们在第一篇文章中提到的test3.htm不，这个结果和那个示例的结果一模一样，jQuery.html也并非万能钥匙。这不禁让我们怀疑这两个示例的内部逻辑是否一样？
但是第二篇文章不是明明白白告诉我们，jQuery.html使用的是同步AJAX的机制来加载外部JS的么？等等。。。。。。
大家有没有从上面的分析中发现问题，AJAX来加载其他域的资源，这不是明摆着违背了大名鼎鼎的同源策略（Same Origin Policy）了么？所以jQuery不可能这么实现，我们来看看jQuery.ajax文档是怎么说的：

看来我们在第二篇文章中看到的这个函数（evalScript）内部并非真的通过同步AJAX来获取数据：

4. 深入jQuery.ajax函数，看看怎么加载不同域下的JS文件

注释已经写的很清楚了，如果是通过GET方式请求JavaScript文件，并且这个文件是在其他域下面的（remote），那么就通过在head中添加script标签来处理，而不是走AJAX的流程。所以在这个条件分支结束的时候，直接从函数体返回：

经过分析，我们发现在动态加载不同域的JavaScript时，jQuery.html其实采用了在head中添加script标签的做法（不管是外部JS或者内联JS），这和我们在第一篇文章中提到的test3.htm是一模一样的逻辑，这也验证了我们的想法：

 

由此可见，如果想兼容CDN加速静态资源的情况，还必须使用第一篇文章中提到的“方案一，如何在动态添加script标签时确保执行顺序”。

5. 추첨

원래 이 시리즈의 기사는 여기서 끝났어야 했습니다. 그런데 jQuery1.5.1을 테스트해보니 제가 예전부터 알고 있던 jQuery1.4.4와는 다르다는 것을 알게 되었습니다. AJAX 부분을 리팩토링했는데, 의외로 우리 코드에 약간의 영향을 미쳤습니다.

구체적인 영향에 대해서는 다음 문서를 참조하세요.

jQuery1.5.1과 jQuery1.5.1 사이에서 JavaScript - 의 실행 순서를 보장하는 방법 🎜>jQuery1.4.4의 약간의 차이. 계속됩니다. . .

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.