作者：屈超（Chappell.Wat）
发布时间：April 28, 2010
分类：程式::五代
因工作关系我已有些时日没用 YUI 写代码了，
这次由于项目需要我阅读了一些脚本库的代码，
无意间发现了这个 YUI 里 (Dom || Node).getXY() 的小 Bug。
查看了手边的 YUI 2 和 3 的多个版本代码，
均存在此问题。（怀疑其影响全系列）
时间不多，
抽睡前的一点时间写下来吧。
问题描述如下：
当浏览器不支持 node.getBoundingClientRect() 方法时，
我们会选择通过 offset 系列属性一层层向上计算偏移值，
最后得到一个“可能有错误的”元素坐标。
要修正这个错误，
我们需要沿着节点树一层层向上判断是否某个祖先“出现”了滚动条，
如果有，对不起，阉了。
大体的思路是这样没错，
YUI 也确实这样处理了，
而且它也知道元素定位方式中还有一种游离于布局之外的 fixed，
只可惜它没在碰到 fixed 元素时及时刹车，
结果就是在一种较特殊的布局下会多删一次滚动条高/宽度，
导致坐标计算错误。
可叹可叹，
它曾那么接近幸福。
所以当某个有滚动条的页面里存在一个 fixed 定位的元素，
而你又要用 YUI 去取该元素所包含的某个子元素的坐标时，
Bug 就出现了。
文字描述显然不够直观，
请猛击如下链接来查看不才基于 YUI2 和 YUI3 所构建的示例。
（由于该 Bug 只影响不支持 node.getBoundingClientRect() 的浏览器，
请选用诸如 Firefox 2 / Chrome 1 / Safari 3 等浏览器来打开示例，
顺便在这里感谢 IE 团队为我们贡献了如此好用的一个方法）
阅读剩余部分...
作者：屈超（Chappell.Wat）
发布时间：April 18, 2010
分类：程式::五代
【2010.04.18 更新】
更加严格地区分出了 IE 9，
增强了 Opera 的区分能力，
并将 Chrome 的判别特征换成了引擎特性 [via]，
这样你就能看出国内哪些浏览器是从 Chrome 的内核改过来的了，
大家可以动手试试。 ：）
【2010.04.17 更新】
IE 9 在我看来改进非常大：
有我所关心的对 Mutation Events 的支持，
还有事件模型的 W3C 化等等……
本文中我就不多冗述，
有机会再另文探讨。
由于在项目中大量使用特征判断，
IE 9 在这方面最显著的变化是：
之前那则“最短的 IE 判断法”已经失效，
一起被修复的还有一直伴随 IE 的数组 Bug:
非空数组字面量的最后一个元素缺失的问题（即：[null,]），
因此现如今的最短记录保持者（6字节的 !-[1,]）也已然失效。（而且不支持 CC 压缩）
你也不要尝试使用 addEventListener 方法来判别，
因为 IE 9 已经支持了。（事件的改进非常大，这很好）
所以说 IE 已经越来越靠近标准，
如果在项目中有对 IE 进行特殊处理的代码，
你可能需要在 IE9下重新检查一下了。
由于我个人依旧是 XP 的忠实拥趸，
而 XP 又很悲剧地无法安装 IE 9，
所以一些测试是在 Haitao Jia 同学的协助下完成，
在此表示感谢。
也正因为如此，
我没有进行覆盖面太广的测试。
不过目前所发现的唯一“幸存”下来的 IE 系列 Bug 依旧与刚提到的数组 Bug 有关，
微软修复了字面量里的 Bug 却忘了当字符串被 split 成数组后却涛声依旧啊。
虽然判断起来稍微麻烦了点，
但不管怎样这是我目前发现的仅剩不多地可以用来判断 IE 全系列的代码：
阅读剩余部分...
作者：屈超（Chappell.Wat）
发布时间：January 21, 2010
分类：程式::五代
【2010.01.21 更新】
前天发布的 Firebug 1.5 已经修复了这个 Bug。
本文将停止更新。
（实际上自发布后也没更新过 =_,=）
【2009.07.06 发布】
题目很拗口，
事实上想用一句话清楚地描述这个问题并不容易，
那么还是看图说话吧：
请打开淘宝网首页，
用 Firebug 查看“公告栏”区域的圆角区域（如下图），
圆角的右上部分是用一个无子节点的 SPAN 标签实现的（如下图）：
那么问题出现了：
由于它是无子节点的，
因此它被 Firebug “误认为”是一个自闭合标签。
在实时编辑代码时问题亦然（如上图）。
而事实上 Firebug 遵循的 XML 标准，
这样处理是完全没有问题的。
无子节点的 SPAN 标签是否存在“语义问题”将不是本次讨论的重点，
毕竟我们还处于比较落后的兼容时代，
平时难免会遇到类似的麻烦。
特别是前端工程师将 Demo 页面完成交付开发工程师来拼装模板时，
如果开发工程师使用 Firebug 来复制代码，
那么在 IE 下将由于“SPAN 标签未被闭合”而发生错位（如下图）：
阅读剩余部分...
作者：屈超（Chappell.Wat）
发布时间：January 2, 2010
分类：程式::五代
PHP 有一个名为 parse_url 的函数，
其方便之处我就不多置喙了，
总之，
使用它可以将一个形如
http://user:pass@quchao.com:80/about-me/?t=100102#hash
的 URL 分解并返回这样一个数组：
Array
(
[scheme] => http
[host] => hostname
[user] => username
[pass] => password
[path] => /path
[query] => arg=value
[fragment] => anchor
)
而当 F2E 们越来越多地编写与异步、分页和浏览历史等功能相关脚本时，
频繁地操作 URL 就成了一件恼人的事情。
于是不才模仿 parse_url 编写了一段正则来完成这个功能：
^(?<scheme>[^:]+):\/\/(?:(?<username>[^:@]+):?(?<password>[^@]*)@)?(?:(?<hostname>[^/?#:]+):?(?<port>\d*))(?<path>[^?#]*)(?:\?(?<query>[^#]+))?(?:#(?<fragment>.+))?$
令人惋惜的是 Javascript 的正则引擎还不支持自定义分组名，
也不支持大多数的非捕获分组，
因此在 JS 里使用需要“精简”成这样：
'http://user:pass@quchao.com:80/about-me/?t=091226#test'
.match(/^([^:]+):\/\/(?:([^:@]+):?([^@]*)@)?(?:([^/?#:]+):?(\d*))([^?#]*)(?:\?([^#]+))?(?:#(.+))?$/);
当然，
分解出来的各部分顺序与原函数还不尽相同，
必要时大家可以另外封装一层来使用。
最后照例上图：
（虾米，这玩意儿也有图？！）
p.s. 我记得有个可以图形化显示正则匹配过程的网站，
相当地有趣，
敬请各位留言告知。
已经找到，
地址是：http://osteele.com/tools/reanimator/，
可惜功能还不是很强……
作者：屈超（Chappell.Wat）
发布时间：November 26, 2009
分类：程式::五代
玉伯同学近期发布了 Closure Compiler 和 YUI Compressor 的右键菜单插件，
而之前基于 YUI Compressor 的同类型工具被称为“TBCompressor”，
（为了区别真正的 YUI Compressor 我用了本文的标题）
一直以来大家伙儿都用这个组合来压缩 JS 和 CSS 文件，
基本上没有什么问题——
除了作者在 compressor.cmd 中所注释的这种情况：
“对于 css 文件，只有（略），情况很少，手工处理”。
那么这次的完善就是针对上述情况而作，
将以前需要手工完成的内容继续交由 cmd 来处理。
请编辑 compressor.cmd 并找到如下代码：
if "%~x1" == ".js" (
copy /y "%RESULT_FILE%" "%RESULT_FILE%.swp" > nul
"%JAVA_HOME%\bin\native2ascii.exe" -encoding GB18030 "%RESULT_FILE%.tmp" "%RESULT_FILE%"
del /q "%RESULT_FILE%.tmp"
)
替换为：
copy /y "%RESULT_FILE%" "%RESULT_FILE%.tmp" > nul
"%JAVA_HOME%\bin\native2ascii.exe" -encoding GB18030 "%RESULT_FILE%.tmp" "%RESULT_FILE%"
del /q "%RESULT_FILE%.tmp"
REM 5. 对于 css 文件，替换 \uxxxx 为 \xxxx by quchao
if "%~x1" == ".css" (
SETLOCAL ENABLEDELAYEDEXPANSION
FOR /f "delims=" %%u IN ('more /s "%RESULT_FILE%"') DO (IF %%u NEQ "" SET "u=%%u" & SET "u=!u:\u=\!" & >>U ECHO,!u!)
SETLOCAL DISABLEDELAYEDEXPANSION
MOVE U "%RESULT_FILE%"
)
以上代码基于 YUI Compressor 的右键菜单插件 ，
事实上修改方法同样适用于 TBCompressor ，
明早我将知会玉伯。
已知会他，
他选择使用一个软件来实现替换过程，
最终效果一样，
那么大伙儿自行选择吧。
比较懒的同学可以直接下载不才修改后的版本：
DropBox 下载：compressor.cmd
下载后直接覆盖同名文件即可。
- 1
- 2
- 3
- 4
- ...
- 11
- »