标签 YUI 下的文章

YUI 全系列 Dom/Node 组件 getXY 方法的一个 Bug

因工作关系我已有些时日没用 YUI 写代码了,
这次由于项目需要我阅读了一些脚本库的代码,
无意间发现了这个 YUI 里 (Dom || Node).getXY() 的小 Bug。
查看了手边的 YUI 2 和 3 的多个版本代码,
均存在此问题。(怀疑其影响全系列)
时间不多,
抽睡前的一点时间写下来吧。

问题描述如下:
当浏览器不支持 node.getBoundingClientRect() 方法时,
我们会选择通过 offset 系列属性一层层向上计算偏移值,
最后得到一个“可能有错误的”元素坐标。
要修正这个错误,
我们需要沿着节点树一层层向上判断是否某个祖先“出现”了滚动条,
如果有,对不起,阉了。

大体的思路是这样没错,
YUI 也确实这样处理了,
而且它也知道元素定位方式中还有一种游离于布局之外的 fixed,
只可惜它没在碰到 fixed 元素时及时刹车,
结果就是在一种较特殊的布局下会多删一次滚动条高/宽度,
导致坐标计算错误。
可叹可叹,
它曾那么接近幸福。

所以当某个有滚动条的页面里存在一个 fixed 定位的元素,
而你又要用 YUI 去取该元素所包含的某个子元素的坐标时,
Bug 就出现了。
文字描述显然不够直观,
请猛击如下链接来查看不才基于 YUI2YUI3 所构建的示例。
(由于该 Bug 只影响不支持 node.getBoundingClientRect() 的浏览器,
请选用诸如 Firefox 2 / Chrome 1 / Safari 3 等浏览器来打开示例,
顺便在这里感谢 IE 团队为我们贡献了如此好用的一个方法)

- 阅读剩余部分 -

完善 TBCompressor 对 CSS 文件的压缩过程

玉伯同学近期发布了 Closure CompilerYUI 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
下载后直接覆盖同名文件即可。