zoukankan      html  css  js  c++  java
  • [原创]如何确保JavaScript的执行顺序 – 之jQuery.html深度分析

    上一篇:[原创]如何确保JavaScript的执行顺序 – 之实战篇

    1.      引言

    在上一篇文章《如何确保JavaScript的执行顺序 - 之实战篇》中,我们发现jQueryhtml函数能够确保动态加载的JavaScript按照引入顺序执行。

    我们先来简单回顾下HTML源代码(test2.htm):

    <html>

    <head>

        <title></title>

        <script src="js/jquery-1.4.4.js" type="text/javascript"></script>

        <script>

            $(function(){

                $('#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.      调试,单步跟进

    逐行分析jQuery源代码是一件相当枯燥的事情。我这里会以test2.htm为目标,调试进入jQuery源代码。

    1)     首先在html: 打一个断点,刷新页面

    这里的value是字符串:"<script src="./service.ashx?file=js/jquery-ui.js&delay=2000" type="text/javascript"></script><script>alert(typeof(jQuery.ui));</script>"

    我们来看会进入那个条件分支:首先看看rnocache是啥?

    可见value中含有 <script 字符串,不会进入第二个条件分支。

    2)     进入html函数的最后一个条件分支

    来看看append函数:

    3)     进入domManip函数

    继续单步调试,发现目标,这里有对scripts的长度判断:

    应该是已经分析了输入字符串,并提取了其中的script标签,我们来看下这里的局部变量scripts的内容:

    4)     发现目标

    这里的两个局部变量scriptsevalScript是我们重点需要关注的,我们分别来看下:

    scripts,这是一个数组,包含两个script标签:

    [<script src="./service.ashx?file=js/jquery-ui.js&delay=2000" type="text/javascript"></script>

    , <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 || "" );

         }

         if ( elem.parentNode ) {

                  elem.parentNode.removeChild( elem );

         }

    }

    3.      哦,明白了

    通过上面的分析,我们清楚的看到jQuery.html函数会首先把其中的script检索出来,然后对于每个script标签应用evalScript函数。

    在这个函数中,对于外部JavaScript内联JavaScript,进行了不同的处理。

    1)     jQuery.html如何处理字符串中的外部script标签

    jQuery.ajax({

         url: elem.src,

         async: false,

         dataType: "script"

    });         

    对于外部script标签,比如:<script src="./service.ashx?file=js/jquery-ui.js&delay=2000" type="text/javascript"></script>jQuery采用了同步Ajax方案(async: false)。这也是在各种不同浏览器中能够保证动态JS的加载顺序的关键所在。

    2)     jQuery.html如何处理字符串中的内联script标签

    jQuery.globalEval( elem.text || elem.textContent || elem.innerHTML || "" );

    来看下globalEval函数的定义:

    由此可见,对于内联的script标签,jQuery通过在head中创建script标签来执行。

    4.      后记

    目前来看,一切来龙去脉似乎清晰可见。那么大家有没有考虑过,如果动态加载加载不同域名下(Cross-Domain)的JavaScript文件,jQuery还能确保在所有浏览器下的JavaScript的执行顺序吗?

    也就是说在当前流行的静态资源的CDN加速情况下,jQuery.html是不是一个完全之策呢?

    请看下篇 如何确保JavaScript的执行顺序 - jQuery.html并非万能钥匙。待续。。。

  • 相关阅读:
    请教JDBC中的thin和OCI的区别
    ORACLE中查询被锁定的表,以及如何解锁
    oracle批量插入测试数据
    oracle查看用户表
    decode 函数及其用法
    oracle序列详解
    MySQL数据库远程连接开启方法
    CentOS下MySQL忘记root密码解决方法【转载】
    oracle实现同时多表插入
    MyCat:第七章:MyCAT的亿级别任务
  • 原文地址:https://www.cnblogs.com/sanshi/p/1968275.html
Copyright © 2011-2022 走看看