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下弹出框的问题。不过这样代码就得写多几行了。 具体的实现方式可以查看上面给出了两个实例。
javasript的预读机制说的直白点就是其他语言中所谓的“编译”，在代码运行之前对代码进行review一遍，把一些使用var和function声明的变量和函数提起读进内存里，并分配空间，初始化为undefined。等到代码运行的时候再进行相应的赋值。 简单的预读原理，相信很多人都已经知道了，比如： [javascript] alert(test); //output:undefined var test = "supersha"; //========================= alert(typeof fn); //output:function function fn(){} //========================= alert(typeof fn2); //output:undefined var … 了解更多
Memoization，简单的说就是优化计算机的性能，缓存那些重复性的函数操作和计算，使得第一次之后的调用可以直接从缓存中得到结果，而无需重新计算和运行复杂、费时的函数。这个跟Lazy Definition的原理是比较相似的，Lazy Definition主要是对函数进行重复定义，避免浏览器检测等恶心的事情。在javascript里实现Memoization的技术，Keith Gaughan做了相关的叙述：Memoization in JavaScript。特别是它对Fibonacci的优化让我特别的玩味。 对于Fibonacci普通的实现方式是： [javascript] //这个性能不咋的，函数调用太频繁了 function Fib(n) { if (n < 2) { return n;} return … 了解更多
归家了，博客都没怎么更新，感觉有些不适应了。这几天忙里偷闲，研究了下firebug扩展的开发原理，倒弄了两三天，firebug的架构也确实比较复杂，而且发现Firefox下的扩展在开发中编写js代码并没有想象中的容易，平时认为合理的js代码，在Firefox的插件里跑起来，却总是会出现诸多错误，很纠结。仔细查看了firebug的源码中的xul文件，觉得firebug的架构和方法调用方式，也确实值得借鉴，语意化十足：利用xul文件来规划布局，js实现功能，css实现样式布局，properties格式的文件来储存文字信息…… 《Repaint 跟踪浏览器的渲染》从这篇文章中了解到，原来Firefox还有一个独有的事件：MozAfterPaint供我们来测试页面Repaint的数据，这个事件的具体使用方式和参数设置可以查看前面给出链接中Mozilla的官方叙述。PJhome网站中给出的例子是需要通过使用Greasemonkey来自定义一个脚本，我感觉这有诸多不便：不便于操作；开始和结束等方面的不变……为此，我将这个功能集成到firebug下，基本上web开发人员都会安装firebug，所以倒是便利了许多。下面就来说说Repaint Test的具体使用方式： 首先用Firefox3.5以上的版本（因为MozAfterPaint事件是在3.5版本之后才受支持的）下载Repaint Test文件：Repaint Test，直接点击链接就可以安装了。 打开firebug主界面，其中就有一个叫“Repaint Test”的面板，点击它，就出现了它的操作按钮组： Repaint Test面板下面有“Self start record”、“Start”、“Stop and Show”、“Clear”按钮，同时面板右边还有下拉菜单，提供了“Configuration”、“Zoom（文字大小）”、“Help”等功能。顾名思义，Configuration是用于配置扩展内部的一些属性。 “Self start record”按钮用于在页面加载后，在设置的时间内自动开始记录Repaint区域数据；“Start”按钮用于手动设置记录Repaint的开始；“Stop and Show”用于停止记录Repaint区域数据并显示Repaint区域（红色高亮显示），这里有定时器来显示每一个记录的Repaint数据。“Clear”按钮用于清空输出内容。 … 了解更多
2010-6-29 update 判断是IE6、7浏览器的方法还可以通过检测：document.documentElement.hasAttribute这个方法是否存在来判断。IE6、7下document.documentElement是不支持hasAttribute方法的；IE8、FF、Chrome、Opera等都支持。这样就可以避免丑陋的@cc_on判断方式了，不过在性能上，或许还是会@cc_on比较好。 ——————–完美的分界线——————- 昨天想起了之前在口碑的时候就想写的一个代码：把HTML标签名作为方法来连缀性的插入元素，比如下面的操作方式： [javascript] var root=Node("div","",{"id":"test","class":"div","onclick":"alert(this.innerHTML);", "style":"background-color:#f00;"}) .h1("P Element in DIV Element",{"class":"p"}) .em("EM Element",{"class":"em"}).appendTo(document.body); //========================================== Node("div","",{"class":"div","onclick":"alert(this.innerHTML);"}) .h1("P Element … 了解更多
Script DOM Element动态加载js可以使得js文件跟其他资源并行加载并异步执行，这是我们都知道的事实。但是有一点，或许有些人没有想到，js脚本在何时才会开始加载？ 话说多了不足为信，看一个简单的测试：《测试js何时开始加载（用firebug查看HTTP瀑布图，或者HTTPWatch、Inspection等等均可）》，代码示例如下 [javascript] var s = document.createElement("script"); s.setAttribute("src","test.js"); var l =document.createElement("link"); l.setAttribute("href","/wp-content/c/style.css"); l.setAttribute("rel","stylesheet"); var img = new Image(); … 了解更多