PHP程序员站--PHP编程开发平台
 当前位置:主页 >> 网页制作 >> Javascript >> 

JQuery另类视角-动态执行脚本的BUG

JQuery另类视角-动态执行脚本的BUG

来源:互联网  作者:  发布时间:2010-07-16
最近再用JQuery写一些东西,昨天突然出了个很奇怪的问题: 我通

最近再用JQuery写一些东西,昨天突然出了个很奇怪的问题:
  我通过Ajax请求服务器上的数据(包括html和script),然后将请求的数据动态加载到页面的一个div中,这其实是个很简单的程序,首次执行是很顺利,但是当你执行这个相同动作两次之后,html元素依然可以顺利加载,不过script脚本就失效了!

使用的是JQuery的1.4.1版本,加载的程序是用JQuery中的$(...).append()方法。类试代码如下:

$("#testdiv").append("<script type='text/javascript'> a = 1 ;alert(a);" + "<" + "/script>");
你执行后会发现,前两次能很成功的弹出提示框,但是从第三次开始就失效了!

为什么?javascript本身不可能不支持这种程序的,难道是JQuery程序的BUG吗?!是的,该BUG已经在1.4.2版本中进行了修复,你可以换成JQuery-1.4.2版本来试下。真是郁闷,这个问题害的我查了一个晚上才发现.....

下面让我们分析下这个BUG的原因:

首先看下append函数中主要的执行流程,
 

执行script脚本的程序是在domManip函数中,大概的逻辑如下:

导致该问题的函数是buildFragment函数,对比下该函数在这两个版本的代码,

jquery-1.4.1
function buildFragment( args, nodes, scripts ) {
    var fragment, cacheable, cacheresults, doc;

    
// webkit does not clone 'checked' attribute of radio inputs on cloneNode, so don't cache if string has a checked
    if (args.length === 1 && typeof args[0=== "string" && args[0].length < 512 && args[0].indexOf("<option"< 0 
        
&& (jQuery.support.checkClone || !rchecked.test( args[0] )) ) {
        cacheable 
= true;
        cacheresults 
= jQuery.fragments[ args[0] ];
        
if ( cacheresults ) {


            
if ( cacheresults !== 1 ) {
                fragment 
= cacheresults;
            }
        }
    }

    
if ( !fragment ) {
        doc 
= (nodes && nodes[0? nodes[0].ownerDocument || nodes[0] : document);

        fragment 
= doc.createDocumentFragment();
        jQuery.clean( args, doc, fragment, scripts );
    }

    
if ( cacheable ) {
        jQuery.fragments[ args[
0] ] = cacheresults ? fragment : 1;
    }

    
return { fragment: fragment, cacheable: cacheable };
}
jquery-1.4.2
function buildFragment( args, nodes, scripts ) {
    var fragment, cacheable, cacheresults,
        doc 
= (nodes && nodes[0? nodes[0].ownerDocument || nodes[0] : document);

    
// Only cache "small" (1/2 KB) strings that are associated with the main document
    
// Cloning options loses the selected state, so don't cache them
    
// IE 6 doesn't like it when you put <object> or <embed> elements in a fragment
    
// Also, WebKit does not clone 'checked' attributes on cloneNode, so don't cache
    if ( args.length === 1 && typeof args[0=== "string" && args[0].length < 512 && doc === document &&
        
!rnocache.test( args[0] ) && (jQuery.support.checkClone || !rchecked.test( args[0] )) ) {

        cacheable 
= true;
        cacheresults 
= jQuery.fragments[ args[0] ];
        
if ( cacheresults ) {
            
if ( cacheresults !== 1 ) {
                fragment 
= cacheresults;
            }
        }
    }

    
if ( !fragment ) {
        fragment 
= doc.createDocumentFragment();
        jQuery.clean( args, doc, fragment, scripts );
    }

    
if ( cacheable ) {
        jQuery.fragments[ args[
0] ] = cacheresults ? fragment : 1;
    }

    
return { fragment: fragment, cacheable: cacheable };
}
仔细看完这两段代码后,会发现这个函数内设置scripts的程序是jQuery.clean( args, doc, fragment, scripts ),这行代码在执行之前有个判断:如果该传入的脚本数据允许支持缓存,并且数据在缓存jQuery.fragments中存在,那么这行代码是跳过的!否则,该行代码执行,设置scripts数据。
  现在把关注点放到"允许支持缓存"这句话上,比较这两个版本对于该程序的不同。!rnocache.test( args[0] ),这是1.4.2版本中多加的一行代码。终于找到它,它是这个BUG解决的关键所在。让我们看下这个rnocache的正则表达式:

rnocache = /<script|<object|<embed|<option|<style/i,
看了这么多发现原因了吗!原来1.4.1版本会对script脚本进行缓存,一旦script缓存在脚本后,该脚本中的程序是不会执行的,而1.4.2多加了上面的正则,目的就是对script等这些数据不进行缓存,只要存在就会去执行

延伸阅读:
什么是jquery
jQuery简单应用
jQuery1.4 Alpha 2发布
3K大小的万能JQuery弹出层类库
推荐10个jquery动画菜单 十分漂亮的插件
二十个超级酷和最实用的jQuery实例
jQuery 表格插件汇总
jQuery+CSS图片展示特效
jQuery图片切换效果插件
jQuery网页内容切换效果插件

Tags: jQuery   动态   脚本   bug     执行  
最新文章
推荐阅读
月点击排行榜
PHP程序员站 Copyright © 2007-2010,PHPERZ.COM All Rights Reserved 粤ICP备07503606号