披荆斩棘，勇往直前

问题起因：在原来产品中实现的 ajax tree上面添加拖拽效果，为了方便，使用了prototype来简化开发。代码中使用了Poistion.absolutize来改变拖动标签时改变它的坐标为绝对坐标显示，拖动结束后再使用Poistion.relativize变回相对坐标。

其实一开始测试时都挺好的，但后来在tree上面使用时就发生问题，在拖动过程，标签跟着鼠标的移动而改变，没有问题，但在鼠标释放后，标签并没有放置在鼠标释放的位置，而是向左和向上偏移了，而这偏移的距离刚好就是tree显示位置的left和top。在对拖动结束后的位置计算的代码，拖动过程坐标计算的代码debug了一天没有收获后，突然想到把样式中的滚动条设置（overflow-x : "auto", overflow-y: "scroll",）删掉试下，没想到就可以了。

经过反复验证，终于证实是滚动条惹的祸，接着就跟踪了prototype中的相关代码，在实现Position.absolutize方法时是这样写的：

Position.absolutize  =   function (element)  {
    element  =  $(element);
     if  (element.style.position  ==  'absolute')  return ;
    Position.prepare();

var  offsets  =  Position.positionedOffset(element);

     var  top      =  offsets[ 1 ];
     var  left     =  offsets[ 0 ];
     var  width    =  element.clientWidth;
     var  height   =  element.clientHeight;

    element._originalLeft    =  left  -  parseFloat(element.style.left   ||   0 );
    element._originalTop     =  top   -  parseFloat(element.style.top  ||   0 );
    element._originalWidth   =  element.style.width;
    element._originalHeight  =  element.style.height;

    element.style.position  =  'absolute';
    element.style.top     =  top  +  'px';
    element.style.left    =  left  +  'px';
    element.style.width   =  width  +  'px';
    element.style.height  =  height  + &nsp;'px';
} ;

其中Position.positionedOffset就是取当前标签到body的偏移量，然后将信息存入_original*的相关属性中，等到调用Position.relativize时，再从这些_original*属性中从新计算出当前标签的相对位置。
再看一下Position.positionedOffset的实现：

Position.relativize = function(element) {
    element = $(element);
    if (element.style.position == 'relative') {
        return;    
    }
    
    Position.prepare();
    
    element.style.position = 'relative';
    var top  = parseFloat(element.style.top  || 0) - (element._originalTop  || 0);
    var left = parseFloat(element.style.left || 0) - (element._originalLeft || 0);
    element.style.left   = left + 'px';
    element.style.top    = top  + 'px';
    element.style.height = element._originalHeight;
    element.style.width  = element._originalWidth;
};

嗯，处理得非常漂亮，没有存在什么问题，以下是用来测试有html，试下会有什么效果

<div style="height:50px"></div>
<div style="width:500px;overflow-y:auto;height:300px">
<div style="height:200px"></div>
<div style="height:300px">
<div id="test" style="height:20px">test</div>
    <input type="button" value="abs" onclick="Position.absolutize('test');">
    <input type="button" value="rel" onclick="Position.relativize('test');">
    </div>
</div>

没错，按下abs按钮后，test向下移了50px左右(第二个div的offsetTop)，也向右移了一点（第二个div的offsetLeft）。（如果把overflow-y:aut去掉，则没有此情况出现）而再按下rel按钮后，test能回复正常的位置，这就表示它在算法上没有什么问题，问题出在了absolutize后的位置上了，而与位置相关的信息有 _originalTop 和_originalLeft，而它们的值是与Position.positionedOffset直接相关的，再查看了Position.positionedOffset的代码：

Position.positionedOffset = function (element) {    
    var node = element.parentElement;    
    var valueT = 0, valueL = 0;
    
    do {
        valueT += element.offsetTop || 0;
        valueL += element.offsetLeft || 0;
        element = element.offsetParent;
        if (element) {        
            p = Element.getStyle(element, "position");
            if (p == "relative" || p == "absolute" ){
                break;
            }
        }
    } while (element);        
    
    return [valueL, valueT];
};

看起来似乎也无法从中找出什么毛病来。可是，查了一下html的相关文档后，发现这段代码存在着相当严重的bug。html文档里，当样式position取绝对坐标"absolute "时，其内容如下：
absolute ：Object is positioned relative to parent element's position—or to the body object if its parent element is not positioned—using the top and left properties.
结合文档内容，经过测试，如果标签的所有祖先节点中，有任何一个是可滚动的（overflow,overflow-y,overflow-x其中一个属性的值为auto或scroll），那标签的绝对定位就是在此标签中的坐标位置，而不是对于BODY的。
所以positionedOffset方法没有考虑到这种情况而处理，当然在一般情况下行得通了，所以代码更改如下：

Position.positionedOffset = function (element) {    
    var node = element.parentElement;
    
    /**//*
     * 经过测试，如果标签的所有祖先节点中，有任何一个是可滚动的（overflow,overflow-y,overflow-x其中一个属性的值为auto或scroll），
     * 那标签的绝对定位就是在此标签中的坐标位置，而不是对于BODY的。所以在返回时应该将此祖先节点对于body的偏移量减掉.
     */
        
    var valueT = 0, valueL = 0;
    
    do {
        valueT += element.offsetTop || 0;
        valueL += element.offsetLeft || 0;
        element = element.offsetParent;
        if (element) {
            var scrollable = [element.style.overflow, element.style.overflowX, element.style.overflowY];
            p = Element.getStyle(element, "position");
            if (p == "relative" || p == "absolute" || scrollable.include( "auto" ) || scrollable.include( "scroll" )) {
                break;
            }
        }
    } while (element);        
    
    return [valueL, valueT];
};

决定将BLOG搬到blogjava上去了。算是一个新的开始，专注于技术方面。

http://www.blogjava.net/errorfun/

今天自己也发现了prototype的一个定位的bug，明天再贴出来共享。

转自：http://www.cnblogs.com/ashun/archive/2006/12/08/prototype-js-bug.html

1. String.prototype.camelize    BUG

这个方法用来返回字符串的骆驼写法。用js 控制元素的 style的时候经常使用
比如

通常情况下 camelize 会工作得很好，但是有一个特列，那就是浮动定位  float

显然，作者没有考虑 float这种特殊情况，正确的写法是: 

2. String.prototype.inspect   BUG

这里 inspect 方法是有Bug的， 作者用replace 方法的时候没有用正则，导致只能替换掉第一个匹配的字符。

正确的写法应该这样
  inspect: function() {
    return "'" + this.replace(/\\/g, '\\\\').replace(/"/g, '\\\"') + "'";
  }

3. Array.prototype.all   BUG
 这个方法检测是否数组中所有元素都能够让迭代函数为真。 如果全部能满足，则返回true，否则返回false

但是当  arr为空的时候，仍然返回 true

4.  Array.prototype.any  BUG
同 all方法，对空数组仍然返回true

5.Array.prototype.detect  也就是 find方法
这个不是 Bug ,但是不看原代码很容易让人误解，从而出错。
这个方法查找第一个能满足 迭代函数 的元素，最后返回元素的值
误解一：

误解二：
   寻找数组中的数字元素

因为 find方法返回的是第一个符合条件的值。  这里返回:0.  所以.....


6. 对hash 对象的处理需要格外小心的地方

同样下面这些属性也会和 prototype.js 相冲突。

each, all, any, collect, detect, findAll, grep, include, inject, invoke, max, min,
partition, pluck, reject, sortBy, toArray, zip, inspect, map, find, select, member, entries

http://community.csdn.net/Expert/topic/4964/4964523.xml?temp=4.314822E-02

昨天开始学习英语口语了，用了一个小时的时间，终于学会了～～～～一个单词的发音。真是不学不知道，想要把发音发准了还真不是一般的难，要改掉以前发音的习惯看来还有很长的路要走。

1.努力备考，把十月底的考试通过（毕竟只报了一门，考不过就对不起人民和百姓了）

2.完成树型组件的其余功能。然后就不想再碰它了，已经变得很雍肿了（十几个js文件，自定义tablib，超过7000行的js代码）。这任务让我丢了几个星期天，想想都觉得恶。不过总算完成了自己的一直以来的心愿，也学到了很多新的知识。

3.继续学习JSF，因为任务，让我几度将学习中的JSF给搁下了，无论如何，春节前要把它学完。

4.把它个大头BI搞写，这个星期先写一个DEMO，然后再尝试集成到现有系统中。如无意外，继续研究MDX。这么大的一个东西，在一个月内可能学完吗？是把我看高了还是把它看低了。（要知道你们给我的这些任务都是在业余时间学的啊，工作时间都被那些所谓的编码活动占满了，难道程序员就应该被榨干时间？？？！！！我想把东西做好，可在这样的情况下，只能滥竽充数了，别怪我，这是被逼的！只追求最终效果，而不管代码质量的，总有一天会让你后悔！不要只计算工作时间内可以写多少代码就安排多少任务，留点空间给我们进行重构和测试。不要为了赶进度做出这样的事，时间不够就加多几个人进来开发。）

5.学英语。练好口语。

6.继续毕业设计未完成的路程，不过不想再做原来的物流系统了，具体需求重新做）。系统要使用到winform,j2ee,j2me,asp.net,webservices，主旨是学习这些技术，扩大自己的知识面，为以后铺好后路。系统中综合运用到学过的知识，包括BI。希望一年内可以开发完成70％以上。

立此为证！！！

PS：最后，鄙视一下什么都不会，只因为在华为外包做过就给高工资的垃圾理念！！！这样做只会增加其他员工的不满，拖慢整体的进度。

好久没更新过这个blog了，有时想写点什么，但总写不出来。

来到深圳工作了，却没想像中的今我耳目一新的感觉，日子还是那样地过，班还是不停地加（和原来的工作一样）。可能是我的生活圈子太小了，以至于感觉不到深圳的“精髓”所在。每天都只是奔波于家与公司之间，偶尔到不同的餐馆吃吃饭。这样的生活已令我乏味。

不知道是不是命运做祟，不管在家乡也好，在深圳也好，我总是有做不完的任务，当我做完想休息一下，做做自己的事，开始自己的学习计划时，又有新的任务给我。这一切是巧合？还是上天给我开的玩笑？

本来以为国庆七天的长假可以回汕头好好玩玩的，没想到却遇上项目交付，不得不提早回来加班。想想上回五一长候时也是在赶项目而无法休息。再回想我工作四年半以来，好像除了第一份工作辞掉后在找工作那个时间有休息之后，所有的假期好像都跟我无缘－－过年加班，年30晚加班，国庆中秋五一元旦更是无一幸免地加班。难道这些又是巧合？一巧就巧了四年多。

本来以为项目交付后可以好好备考了（十月的自学报了一门，不敢报多），可一个最大头的任务压下来了－－商业智能，开始以为应该很简单才对，没想到它所涉及的知识是如此之多，而且都是我没接触过的，看了两天资料都感觉无从入手。当然，这个任务对于自身并没有坏处，可以增长自己的知识，提高技术，不过，让我感觉有点喘不过气来的感觉。

5月28日，星期天，那天带着一大包的行李来到了深圳。放弃了汕头的工作，来到了深圳找新的发展，在来之前，网上看到很多人说深圳找工作很难，要很久才能找到，自己当时也很害怕。但终究还是来了，很幸运的，在来深圳第三天（准确点说是星期二）的时候，在一家软件公司面试上了，感觉有点不可思议，当然也很兴奋，也很彷徨，好像一点也没有自己调整的时间就马上上班了。

6月1日，星期四，一个全国小朋友庆祝的日子，在日子我开始了我第一天的工作，感觉有点无所适从的感觉，一些技术是我没接触过的，比如EJB，以及WEB层开发所使用的模式，和我以前使用的有很大的不同，虽然都用过，但感觉第一天就看这个ERP确实有点吃力，ERP我可是连它是什么都不是很清楚的。。。。

6月2日，装完IDE（还好这个是我一直非常喜欢，也是一直使用的ECLIPSE）后开始了工作

6月3日，更改了系统的一个小BUG后，对系统有点初步认识了，但感觉还是肓人摸象

6月5日，狠下决心，仔细研读代码，一天下来终于小有所成，对整个系统的结构了解了个大概，至少要改动什么的时候知道要改哪部分的代码了

6月6日，想学习EJB了，感觉不学以后在这公司没太多出头的日子，也想去学英语，真烦

在深圳这一个星期里，发现自己开始的想法有点错误，认为深圳什么都贵，什么都要带点过来，来到这边后才发现，深圳除了房子贵，牛肉没汕头好吃外其它的都和汕头差不多，有点是更便宜。郁闷，害得我搬行李搬得手酸得要死