刚上班，首先是文档哥，之后就是无聊哥了，真杯具。但是杯具下就好了，人不杯具。消遣的最好方式就是练练脑，写代码，query就是杯具下的产物。先出土个雏形，有时间还成无聊哥了再来扩展下。 query根据CSS规则来查询DOM，提供了基础的CSS选择符： tag,.class,#id,[attr],tag[attr],tag[attr="value"]… 在测试跟jquery的查询速度比较的时候，再添加了对querySelectorAll（语法是：baseElement.querySelectorAll(selector)，这里的baseElement其实是可以为除了文本节点和空节点之外的任何的DOM节点的，别以为只是document而已）的支持。编写的代码中加入了本人认为不错的编写方式，如果你对阅读代码有兴趣，那就看看吧，欢迎提出更好的方式(如果这里显得难看了，就自己下载来看：query.js)：
2010-8-7 update:很悲剧的发现，Web Worker不支持跨域调用js文件。同时，经过测试，发现在Worker进程中的onmessage函数不能使用function onmessage(){}这种方式来声明，否则chrome、safari、opera不能执行它，切记~（实现Worker，FF比chrome、opera、safari兼容性好多了） 如果你使用window.onmessage=function(){}来声明onmessage方法，FF、Chrome等都提示window未定义的错误，这就很奇怪撂。难道Worker进程中不存在window这个对象？ —————————– 更新分界线 —————————— javascript单线程任务式的运行代码，这是大家普遍都知道的事情，有时候为了模拟多线程，会使用setTimeout/setInterval的方式，但是这个并不能解决实质的问题。Web Worker — javascript的“多核”时代来了！ Worker也已经出现的比较早了，记得当初首先是在Mozilla网站看到关于它的语法和特点介绍，今天在逛Opera看到了关于它的说明文档：Web Workers rise up!。觉得来详细的分析下它的原理是很有必要的了。下面是我对它的一点点看法： Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类来独辟一个新的线程，来处理外联的一个javascript文件，起到互不阻塞执行的效果，并且提供主线程和新线程之间数据交换的接口：postMessage，onmessage。而它的数据交换方式有点类似于Ajax的异步请求，都是浏览器“暗地里”传输的。下面是我分析之后得出的一个流程图：
我写代码时对if逻辑是比较反感的，说不出原因，用户体验不爽，因此总会使用三元运算符来规避if逻辑，看起来代码量少，简洁。对于操作单条的代码，这种方式就可以很容易的使用三元运算符来替换，比如： [javascript] if(flag){ doSth(); }else{ doAnotherSth(); } //可以替换为： flag ? doSth() : doAnotherSth(); [/javascript] 单条的很容易，但是对于多条操作语句呢？这时候该怎么来避免使用if。答案还是从三元运算符中找，例如： [javascript] if(flag){ c = "ss"; … 了解更多
这次对Watch对象添加了一个新方法：iterate。主要是用于这样的情况，同时测试多个指定循环次数的情况，比如可以同时指定1000、2000、3000、4000…等等，通过iterate方法，就可以查看到几个测试用例在这几个循环次数下的时间消耗，iterate的用法如下： [javascript] Watch.iterate({ "title":["getElementsByTagName","childNodes"], "loop":[1000,2000,4000,5000,10000,20000,40000,100000], "interval":1500, "fn":[ function(){ document.getElementById("div").getElementsByTagName("p");}, function(){ document.getElementById("div").childNodes;} ] }); [/javascript] iterate方法带有一个对象字面量参数，这个对象字面量的参数的属性包括title数组、loop循环次数数组、interval更新显示的时间间隔、fn测试函数数组。说起来可能比较虚，看例子吧：Watch.iterate()。
2010-7-29 Updates: 如果将render解析为“呈现”，即是将元素显示到视窗中，那么Nicholas的说法在大部分浏览器下是正确的，经过下面使用PHP方式的测试，在没有将闭合标签加载下来之前，页面无法显示h1标签内容，但是IE除外，它仍然显示内容和应用样式。 同时还有一点需要说明的是：一些文章说在head和body之间插入flush()方法来尽早的输出head的内容，以至于尽快的下载样式资源，这也是有一定道理的，但是由于刷新输出的head内容是不可见的，所以页面上还是会一片空白，等待内容的呈现。所以比较合理的做法是将内容分块，或者将页面内容分为head、body、footer等俺顺序使用flush刷新输出，这样就使得有一个比较流畅的页面显示效果。 本人的blog正在这样实践着…… ————————纠正分界线————————— 在Nicholas的一个PPT中看到了这句话“The browser won’t render a block-level element inside of <body> until the closing tag … 了解更多
2010-7-29 Update: 在第一种实现方案中，如果图片的父元素设置了padding、margin之后，就会使得FF、Chrome等逻辑判断失误，而IE还完好。 ———————-纠错分界线————————– 说“图片导航”或许很迷糊，我也迷糊不知道怎么描述，就是类似于Google、QQ空间、百度图片搜索中的在图片中出现上下箭头或者左右箭头来指示下一个和上一个图片的功能。昨天同事问到我这方面的实现方式，也就暂时想了两种。 之前查看过Google的方法是在图片上添加两个HTML元素作为逻辑操作对象（包括切换鼠标样式、点击事件等），这样就显得比较复杂了，需要确定图片的在页面中的位置、图片的宽高、之后还要判断鼠标的位置……QQ空间的相册导航，是在图片本身来操作逻辑的，这同我第一种方案很类似，而百度图片搜索结果页中图片导航是在图片的父元素中做逻辑的，这样就避免了图片大小对导航的干扰的问题（主要是如果图片太小，在图片上做导航就显得迷糊了，特别是鼠标的样式切换）。下面来说说我的方法。 第一种，直接在图片上做逻辑。事件参数e有这么两个参数，在FF等浏览器下是layerX,layerY，在IE下是offsetX,offsetY，用于在一个DOM元素触发事件的时候，鼠标在该元素上的偏移量。这个是好方法啊，在结合offsetHeight和offsetWidth，就可以直接在图片上做判断了，给图片添加mousemove、onclick事件来处理鼠标样式切换、点击事件逻辑等等。《测试用例1》，可是这种方法的一个缺点是：在IE6下，当鼠标移动到鼠标的时候，会默认的弹出一个框，很杯具。 第二中方式就是根据上面的技巧，在图片上覆盖一个div（或者其他的能覆盖的元素都成），覆盖就得获取到图片在页面中的坐标以及宽高了，通过offsetLeft和offsetTop可以方便的得到，兼容性也还好，对于不是非常复杂的DOM结构和CSS布局，应该都是没啥问题的。《测试用例》，这样就避免了IE6下弹出框的问题。不过这样代码就得写多几行了。 具体的实现方式可以查看上面给出了两个实例。