标签 JavaScript 下的文章

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 团队为我们贡献了如此好用的一个方法)

- 阅读剩余部分 -

分享一段用于分解 URL 的正则表达式

PHP 有一个名为 parse_url 的函数,
其方便之处我就不多置喙了,
总之,
使用它可以将一个形如

http://user:pass@quchao.com:80/about-me/?t=100102#hash

的 URL 分解并返回这样一个数组:

Array
[scheme] => http
[host] => quchao.com
[user] => user
[pass] => pass
[path] => /about-me
[query] => t=100102
[fragment] => hash
)

而当 F2E 们越来越多地编写与异步、分页和浏览历史等功能相关脚本时,
频繁地操作 URL 就成了一件恼人的事情。
于是不才模仿 parse_url 编写了一段正则来完成这个功能:

^(?[^:]+):\/\/(?:(?[^:@]+):?(?[^@]*)@)?(?:(?[^/?#:]+):?(?\d*))(?[^?#]*)(?:\?(?[^#]+)?)?(?:#(?.+)?)?$

令人惋惜的是 Javascript 的正则引擎还不支持自定义分组名,
也不支持大多数的非捕获分组,
因此在 JS 里使用需要“精简”成这样

'http://user:pass@quchao.com:80/about-me/?t=091226#test'
.match(/^([^:]+):\/\/(?:([^:@]+):?([^@]*)@)?(?:([^/?#:]+):?(\d*))([^?#]*)(?:\?([^#]+)?)?(?:#(.+)?)?$/);

当然,
分解出来的各部分顺序与原函数还不尽相同,
必要时大家可以另外封装一层来使用。

最后照例上图:
(虾米,这玩意儿也有图?!)

Parse a URL and return its components with regex

p.s. 我记得有个可以图形化显示正则匹配过程的网站,
相当地有趣,
敬请各位留言告知。
已经找到,
地址是:http://osteele.com/tools/reanimator/
可惜功能还不是很强……

完善 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
下载后直接覆盖同名文件即可。

[UserScript] Web Assets Detector 1.4.4

Web Assets Detector

【最近更新】
改用 Canvas 来绘制图标,
另外增加了对 FlowPlayer、LongBoo、UIZE 和 Scripty2 的探测支持,
当然啦,
还有近期最吸引眼球的 Closure Library
Google 真是慷慨,
不仅是 Library ,
其它的“编译”和调试等配套工具也一并提供下载了,
在此膜拜一下。

============ 分割线 ==============
【090920 更新】
本脚本的首席贡献者兼热心粉丝 Jerone 君再次提出了宝贵意见
他希望本脚本能支持被延迟载入的脚本,
由于这类脚本的加载都发生于 Dom 树完成之后,
于是我增加了对 DOMNodeInserted 的监听来搞掂该需求。
该版本非必要更新,
但依旧推荐各位跟进。

【090906 更新】
脚本越来越大,
自身的数据管理就成了问题,
这次的更新主要是把样式和数据从核心脚本里剥离了出来,
脚本也从 28.8k 缩减至 1.9k (当然没有计算样式和数据部分)。
这样的改动有利于我对数据进行维护,
以后还将考虑将数据单独分发以实 现静默更新。
这次就暂不提供这样的功能了,
改革要慢慢的来。
该版本建议所有用户更新。

【090520 更新】
心里想着“这个脚本应该也能用来探测 CSS 库”,
于是就尝试着写出来了,
用的是 Xpath,
效率上应 该还不错。
其它的改进还包括美化了 UI,
应该不会有人抱怨说鼠标上移后看不清文字了吧?
关于识别范围我还想说一句:
不 想让这个脚本变成臃肿的东西,
(事实上目前 icon 数据已经有很大一段了)
希望支持的只是应用较广的框架和库,
否则探测也没 什么意义。
在我自己看来本身也就是个玩意儿而已。

【090401 更新】
今天要分享的是名为 JavaScript Library Detector 的油猴脚本。
(已更名为:Web Assets Dectector
虽然已经有非常多的同类产品,如
Library Detector」和「WTFramework」。
特别要提的是「WTFramework」,
虽然名字有涉嫌粗口,
但其 70+ 库/框架的覆盖率可不是盖的。

不过我这玩意儿的优点还在于处理了库/框架之间的依赖关系。
(貌似也仅次一项?)
就跟某人所说一样,
这是个体力活儿,
真要有精力应该写个扩展探测整个网站的环境:
从服务器签名到物理地址,
从 Alexa 排名到 PageRank 再到 SEO 分析结果,
要不要最后再公开站长的三围?
所以还是见好就收吧。

【目前该脚本所支持的库/框架】

- 阅读剩余部分 -