雨夜带刀

最近将去年写过的easyAnim进行了重构和优化以整合到我的javascript框架中，回过头来发现以前写的代码确实还有很多可以改进的地方，这也证明自己还是有点进步的。趁有点时间，将javascript动画运行的机制和实现的思路整理了一下，算是做个小总结，也希望对有兴趣的人有点帮助。篇幅稍长，看之前请自备瓜子啤酒。

当然这里说的javascript动画是指利用javascript来计算DOM元素的CSS属性值来实现的动画，HTML5和CSS3的发展让WEB中的动画有了更多的可能，但这些看起来比较高级的东西还需要浏览器给力点才行。

解析CSS属性值

理论上，只要CSS的属性值包含了数值，就可以进行动画，事实上，包含了数值的CSS属性值有很多很多，拿最常见的属性来说：

div{ left:100px; }

上面的位置值就包含了数值“100”，要想实现该元素从100px的位置到600px的位置，只要不断的修改该元素的位置值，达到一定的速度就实现了动画，据国外的统计，每25毫秒切换一次画面，就可以实现“动”的效果。

CSS属性值都是字符串，为了方便进行计算，需先将字符串转换成数值，并且很多属性值都包含了单位，所以最好解析成下面这种格式：

'100px' ==> { val : 100, unit : 'px' }

DOM元素的attribute和property很容易混倄在一起，分不清楚，两者是不同的东西，但是两者又联系紧密。很多新手朋友，也包括以前的我，经常会搞不清楚。

attribute翻译成中文术语为“特性”，property翻译成中文术语为“属性”，从中文的字面意思来看，确实是有点区别了，先来说说attribute。

attribute是一个特性节点，每个DOM元素都有一个对应的attributes属性来存放所有的attribute节点，attributes是一个类数组的容器，说得准确点就是NameNodeMap，总之就是一个类似数组但又和数组不太一样的容器。attributes的每个数字索引以名值对(name=”value”)的形式存放了一个attribute节点。

hello

上面的div元素的HTML代码中有class、id还有自定义的gameid，这些特性都存放在attributes中，类似下面的形式：

[ class="box", id="box", gameid="880" ]

广告代码分析

很多第三方的广告系统都是使用document.write来加载广告，如下面的一个javascript的广告链接。

<script type="text/javascript" src="http://gg.5173.com/adpolestar/5173/
;ap=2EBE5681_1BA3_4663_FA3F_E73D2B83FBDC;ct=js;pu=5173;/?"></script>

这个javascript请求返回的是这样的一段代码：

document.write( "<a href='http://gg.5173.com/adpolestar/wayl/;" + 
"ad=6FF3F844_33E6_86EE_3B96_D94C1CF1AEC4;ap=2EBE5681_1BA3_4663_FA3F_E73D2B83FBDC;" + 
"pu=5173;/?http://www.7bao.com/g/xlsbz/index' target='_blank'><img src='" +
"http://html.5173cdn.com/market/yunyinga/xly132.gif' " +
"border='0' width="132px" height="58px" /></a>" );

这种看似有点二的加载方式，但是你却没办法改造它，因为它本身就是第三方的。并且代码都添加了统计的功能，上面的javascript的广告链接每请求一次都会统计一次，生成的代码也有点击统计的功能，也就是说必须以这种方式来进行加载。

document.write是在页面渲染的时候同步进行的，必须要等javascript代码下载好并且document.write执行完后才接着渲染后面的内容，如果广告比较多的话，就会导致页面阻塞，尤其是在页面的首屏插好几个图片尺寸比较大的这种广告，那么阻塞情况就相当明显和严重，会让用户觉得你这个网页很慢。

<p>场景还原：给a标签绑定了一个click事件用来触发ajax请求，在IE6中，请求时常会被中断，在非IE6中都一切正常。</p>
<pre class="brush: c-sharp">
<a href="javascript:;" id="btn">click me</a>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  var url = 'http://api.flickr.com/services/' +
    'feeds/photos_public.gne?tags=car&' +
    'tagmode=any&format=json&jsoncallback=?';
  $( '#btn' ).click(function(){
    $.getJSON( url, function( data ){
      alert( data );
    });   });
</script>
</pre>

之前我在也谈数组去重中介绍了普通的数组去除重复的元素，在选择器的开发过程中，会碰到这样的需求，就是删除一组DOM数组中重复的元素，使用之前的方法肯定行不通，对于 DOM 数组去重，需要另外的处理办法。什么情况下会选取重复的 DOM 元素？下面是一个比较常见的情况，先看 HTML 结构：

<ul>
  <li>test1</li>
  <li>test2</li>
  <li>test3
    <ul>
      <li>测试1</li>
      <li>测试2</li>
    </ul>
  </li>
</ul>

如果是这样的选择器：query( “ul li” )，按照从左到右的查找顺序，会先得到所有 ul 的集合。

[ ul, ul ]

得到了所有 ul 的集合，继续使用 getElementsByTagName 来查找 li，那么第1个 ul 元素就会查找到所有的 li 元素，接下来第2个也会查找到2个 li 元素，最后2个 li 元素就是重复的。这样的情况下，用常规的去重办法要将查找到的所有的 li 元素进行遍历，然后再排序，最后再过滤，这种方法稍后再说。