博客园_Kevin-moon

在IE中本地浏览与服务器浏览同一Html后，出现了奇异的结果

2011-08-03T16:14:00Z

今天在写html的时候，发现了一个郁闷的事情，相同一个Html页面都是通过ie浏览器来浏览，不同的只是在浏览方式上：本地浏览和服务器浏览，可是却出现了不同的效果。

1、本地浏览

将test.html文件放置在本地，然后直接双击打开后，界面如下：

点击按钮后，弹出提示框“97”（就是document.getElementById("float_area").offsetTop）

2、服务器浏览
将test.html文件放置在服务器上或通过VS2010中右键的“View In Browser”进行浏览，界面如下：

点击按钮后，弹出提示框“19”（就是document.getElementById("float_area").offsetTop）

test.html全部代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function getTop() {

            alert(document.getElementById("float_area").offsetTop);
        }
    </script>
</head>
<body>
    <div style="border: 1px solid #000000; height: 86px; width: 500px;">
        header
    </div>
    <div id="area_1" style="border: 1px solid #000000; height: 121px; width: 500px;">
        area_1
        <div id="float_area" style="border: 1px solid #FF0000; width: 100px; height: 100px; float: left">float_area</div>
    </div>
    <input id="Button1" type="button" value="获取area的offsetTop" onclick="getTop();" />
</body>
</html>

现在我百思不得其解，不知大家有无碰到该类试情况的，该问题到底是ie的问题，还是程序本身的问题？！不同浏览器之间对于获取offsetTop的确存在不同，不过都在ie下面，为什么还会不一致呢。。。。。

本文链接

如何避免JQuery Dialog的内存泄露

2010-06-18T09:18:00Z

对于页面来说，JQuery中的Dialog从效果上来说还可以，而且使用简单，只要短短几行绑定的代码就可以实现弹出效果。

$('#dialog').dialog({
                 autoOpen: false,
                 width: 600,
                 buttons: {
                     "Ok": function() {
                         $(this).dialog("close");
                     },
                     "Cancel": function() {
                         $(this).dialog("close");
                     }
                 }
             });

在一些JS交互性不多的一般页面来说，没有任何问题！但是对于交互性强的，需要动态加载与释放DOM的页面来说，它就是一个悲剧的东西！为什么这样说？大家看下下面的例子：

一段简单的代码，一个DIV是通过动态加载到页面上，然后对该DIV用Dialog进行绑定，以达到弹出的目的！下面的test元素就是<div id="test"></div>。

接着，我需要删除该DOM元素，一般来说，正常的做法都是$("#test").empty();这行简单的代码就完成了！这样有效吗？！当执行完这样代码后，你再用$('#dialog')来获取dialog元素，郁闷的事情发生了，既然获取到了！为什么！不是已经empty了吗！

下面我们来看下这一悲剧是如何造成的，

我们把注意点放到$('#dialog').dialog上面，然后看看JQuery的实现代码是如何写的，当我们跟踪代码到dialog类中的_create方法的时候，问题的原因找到了，看下面这段代码：

uiDialog = (self.uiDialog = $('<div></div>'))
                .appendTo(document.body)
                .hide()
                .addClass(uiDialogClasses + options.dialogClass)
                .css({
                    zIndex: options.zIndex
                })
                // setting tabIndex makes the div focusable
                // setting outline to 0 prevents a border on focus in Mozilla
                .attr('tabIndex', -1).css('outline', 0).keydown(function(event) {
                    if (options.closeOnEscape && event.keyCode &&
                        event.keyCode === $.ui.keyCode.ESCAPE) {

                        self.close(event);
                        event.preventDefault();
                    }
                })
                .attr({
                    role: 'dialog',
                    'aria-labelledby': titleId
                })
                .mousedown(function(event) {
                    self.moveToTop(false, event);
                }),

它既然也动态创建一个div，而且把该div加到了Body上面，然后把dialog中的元素从<div id=test>中移除，加入到该新的div中.....

这就是为什么我们$("#test").empty()后，却对内部的dialog没有起作用了！而且这有一个最不好的一个地方，也是最容易出现内存泄露的地方：它动态的在Body中创建了一个div，这样如果窗体不关闭的话，而你又在不察觉的情况下不断的使用上面的TestAppend方法来动态加载DOM，就会创建N个这样的div！

其实这个问题郁闷的地方不是在如何解决，而且隐藏的很深，很难发现！那么发现之后解决起来就变的简单多了：

if ($('#dialog')[0]) {
$('#dialog').parent().empty();
$('#dialog').parent().remove();
}

当前加上这段后代码后，再做$("#dialog")来测试下，期望的结果终于出现了！dialog元素消失了！

本文链接

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

2010-06-11T12:21:00Z

最近再用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函数，对比下该函数在这两个版本的代码，

仔细看完这两段代码后，会发现这个函数内设置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另类视角-动态扩展对象

2010-05-24T14:20:00Z

本文试着从自己的角度上去猜测JQuery的开发者是如何设计出access函数，让它去支持动态扩展对象，并且说明access函数的执行流程.....

如何重构代码-简单、灵活的实现对象复制

2010-05-14T00:51:00Z

写代码的时候不要因为前人怎么写，你也去模仿怎么写，这样会让你变得思维方式固化，一定要有新意，养成这种思维的习惯，并且合理地去实现它;善于从不同的事务中去发现共同点，并抽象这个共同点来达到代码复用的目的.....

如何重构代码-重构计划

2010-05-10T15:09:00Z

初步重构老项目不要去理想化，它的首要目的是解决现有存在的问题，对于理想化的东西我们放到以后的持续重构中去实现.....

如何重构代码-思路和方法

2010-05-10T00:54:00Z

先从接触过的几个老项目经历来谈谈，对于老项目来说，大家在初步接触的过程中，大多总是抱着抵触的情绪，甚至有些是蔑视。总喜欢对以前的代码挑出一大堆的问题，接着就开始抱怨代码、抱怨以前的开发人员，经过一段时间郁闷的抱怨阶段后，处于职业的责任心，就很想去改变这一切，希望把自己认为好的方式给带进来，于是接下来的工作就是重构代码了!

谈谈多线程的思维方式

2009-04-24T00:53:00Z

前段时间仔细看过些关于多线程方面的资料，项目中用到线程的地方也不少，可是，当看了Jeffrey的一篇关于锁的文章后，发现自己虽然一直都在使用多线程，但是缺少了做多线程编程需要的思维！所以想从Jeffrey的Optex（锁）入手，来谈谈我从其中体会的东西..... 多线程编程虽然复杂，但是我觉得很有意思和挑战性，而且随着硬件的发展，多线程编程会更加重要，既然已经上路就让我们走到尽头！

简单的数据移动算法(C#)

2009-04-14T03:06:00Z

数据移动算法，其实是一个比较简单的程序，当移动的数据是一个的时候，只是移动的数据和被移动的数据相互交换下排序值Seq就可以了，不过当移动的数据不止一个的时候，有多个数据，而且这些数据可能是连续的，也可能是不连续的，这个时候虽然也不复杂，但是还是有点烦琐的。前段时间我正好碰到了个这样的需求，就写了个比较通用的算法.....

[ASP.NET MVC]-理解Routing

2009-03-10T10:42:00Z

ASP.NET MVC的了解，让我们从Routing开始，站在应用的角度上看，这绝对是个非常简单的，因为应用程序中只需要寥寥几行代码就可以了！所以让我们从本质的角度上去了解，认清它的工作机制。