别摸我｜catch the digital flow

今天是 jQuery 的第二个生日，也是 1.2.2 版发布的日子。
与 1.2.1 版相比，这个新版不仅修正了 120 处 bug，而且还在原来的基础上进行了大量的优化和测试工作。更令人激动的是：$(DOMElement) 选择器的速度提高了 300%，改进的 .ready()，添加了对新的鼠标事件 .bind(“mouseenter”) 和 .bind(“mouseleave”) 以及滚轮 .bind(“mousewheel”) 的支持，另外还有 :not() 和新的事件 API 等等。
(via jQuery Blog)

今天同学在写脚本的时候遇到一个问题，用 document.write 输出 <script type='text/javascript'></script> 怎么搞都不行，浏览器中只会显示形如 “); 的东西，注释掉这行代码仍然出错……
我猜想可能是某个字符需要转义，但没试验成功。直到看到这篇文章才明白了，我来转述一下要点：

使用 document.write 输出 HTML 标签（尤其是 <script> 标签）的时候，需要将闭合标签进行转义，否则浏览器在匹配闭合标签时发生错误。这样写是没问题的：
阅读全文 – 405 字 »

在很多情况下，我们使用 window.onload 事件判断页面加载完成，注意：不是 DOM。这里就会有一个问题，我们编写的 JS 代码将会在页面上所有元素加载完成之后才开始执行。打个比方，你在网页上使用了一个用来调整外观的 JS，而此刻恰好网络状况不太好，那么用户很可能在漫长地等待页面中所有图片下载完成或超时之后，才能看到脚本调整后的新外观，而在这之前，你的页面外观可能会比较尴尬。
熟悉 jQuery 的朋友知道 $(document).ready 的好处就在这里，它只等待 DOM 加载完成，而不是页面。不过我们不可能做任何应用都引入略显庞大的 jQuery 框架，所以就有国外的大牛写了这个压缩后只有 617 字节的东西：addDOMLoadEvent。本来想亲自写一大段话解释解释这个东东，却 Google 出了别人早写好的，简体中文，有兴趣的直接跳转过去看吧。
这里是 adddomloadevent.js 的代码，用法不多说了，作者已经写在代码的注释里了。（PS：代码贴不到日志里来，不知道是 DH 还是 WordPress 的编辑器，真垃圾！囧）

JavaScript 的函数也是变量，这是 JavaScript 与众多其它编程语言一个较大的不同之处。虽然它可能会使 JavaScript 的初学者有一点困难，但也允许你做一些在其它语言中不能做却着实非常酷的事情。
我说函数是变量，意思是函数将与数组、数字、字符串和其它对象一样被同等对待。这意味着你可以更加灵活地做一些事情。
你可以将函数定义和重定义为局部变量：

阅读全文 - 1257 字 »

刚在 CB 上看到一篇题为＜Ajax 危急：浏览器支持已捉襟见肘＞的译文，感觉挺好笑的，仿佛作者认为世界末日马上要来临了一样，天气描写相当夸张，“阴云密布，死气沉沉（原文：a gloomy, overcast day）”都出来了，把 Ajax 说得貌似已经奄奄一息了。XD
其实他遇到的问题跟我一样，只不过是使用新版 Gmail 导致浏览器崩溃罢了，虽然遇到这个情况的人很多，但我同时也相信 Google 官方的说法“绝大多数用户应该感受到了性能的提升”，因为从 CB 发表的评论的看来，的确只有少部分人提到浏览器崩溃这个问题。
另外，作者把问题全推到 Ajax 和浏览器上来也是不理智的，我更怀疑是微软的某个升级补丁间接导致了浏览器崩溃，要不我在 Ubuntu 的 Firefox 上使用咋又一切正常了呢。

写点废话当作前言
今天花了点时间在自己的 blog 上实现了非插件式的 Ajax 留言功能，当然，还是基于我们很好很强大的 jQuery 框架。基本思路就是利用 jQuery 的 Ajax API 把留言数据提交给 comments-ajax.php 完成留言，我们分三步实现，第一步要先改造 comments.php，第二步实现 jQuery 代码，第三步编写一个 comments-ajax.php 用来接收留言数据并完成对 WP 数据库的操作。
改造 comments.php
这一步不是必须的，你完全可以写一份适用于非标准的 comments.php 的 jQuery 代码，不过还是建议你把留言模板中的各个元素的 ID 定义标准，譬如把填写留言信息的表单（form）的 ID 设为 #commentform，留言 列表 ul 或 ol 的 ID 设为 #commentlist 等等。另外，视具体情况，你可能需要在合适的地方新增两个 span 元素，ID 分别设为 #commentload 和 #commenterror，用来显示留言提交状态和错误信息，不过这也不是必须的。然后，把整个 #commentform 和附属的元素用一个大的 div 包进来，ID 设为 #commentformbox，…… 你猜对了，这一步仍然不是必须的，我们做这么多不过是为了迎合下面的 jQuery 脚本，我在这里贴出来的可能只直接适用于自己的主题，但是如果你能够看得懂下面的代码，那么你也明白怎么样把这些代码改为适合自己的。
阅读全文 - 1950 字 »

update 2: 使用 packer 直接打包的结果是 min 版，如果再使用 Base62 编码就是体积更小的 pack 版，不过 pack 版已经不再适宜 gzip 压缩。
update: 经 Cloudream 提醒，这个压缩器其实就是 Dean Edwards 的 packer。
终于找着了一个比较好的 JavaScript 压缩器，压缩比相当高（50% 左右，视情况而定），试了几次也没有出现其它压缩器常有的破坏代码的问题，这下基本可以放心地在页面中加载 JS 脚本啦。
PS：刚才用 jQuery 给日志页面加了点小功能，不知道你发现没有？

其实这样的标题不太准确，因为压缩 JavaScript 的不是 PHP，而是 gzip。另外这种方法应用也相当广泛了，WordPress 上著名的 K2 主题一直是这样压缩 JavaScript 的。
第一步
打开需要压缩的 JavaScript 文件，把下面的代码加在 JavaScript 代码前面：

阅读全文 - 211 字 »

High-Performance JavaScript: Why Everything You’ve Been Taught is Wrong

| View | Upload your own

在之前的（续）中，我借助插件为外部链接加上了 rel="external" 这个标签，然后再通过 jQuery 为其添加 class="external"，忘了当初为什么要这样做了（我确定是有理由的），事后发现在每篇日志的留言部分，rel="external" 会与 WP 自动为链接加上的 rel="nofollow" 标签发生冲突，因为同一元素不允许同时存在两个 rel 标签。
想了几种办法：插件处理 DOM 不太现实、用正则表达式判断是否有 rel="nofollow"，如有，将其改为 rel="nofollow external" 过于复杂会影响效率、修改 WP 默认添加 rel="nofollow" 的方式等等，都不合适。
没办法，还是往简单了改吧，直接让插件给外部链接添加 class="external" 不就结了，相应的 jQuery 也做了修改，CSS 不变，效果不变。目前还有点小 bug，是属于转向插件的，暂时先不管了。

看到有朋友需要修改之后的 Alexa 转向插件，由于修改简单并且此功能并不属于原插件，所以我没有另发新版，需要修改的朋友请看下面的方法：（基于 Arctic's Internal Alexa Redirect 1.1 版）
我们只需要修改 wp_lzw_parse_external_links 函数的一行代码，直接复制下面的函数将插件的相应部分替换掉就可以了：

阅读全文 - 1020 字 »

XHTML 1.0 Strict 以上（含）的 W3C 标准已经不再支持 target='_blank' 这一非常好用的属性，这一改变很叫完美主义的网页设计者头疼。许久之前，我写过一篇文章介绍使用 jQuery 打开新窗口的方法，但没有亲自体验过；现在，我已经在这里实现了，将所有的外部链接加上了图标，并默认以“新窗口/标签”方式打开，原理相同，方法有一点改进。(via Barry Jaspan)
先前的方法需要手工为每一个你想让它以新窗口方式打开的链接（如：外部链接）添加名为 "new-window" 的 class，不用说也想得到，这项工程是多么浩大，简直可以跟秦始皇年间修长城的工程量媲美，并且一定会出现相当数量的漏网之鱼——总之，这个方法不可取。
如果有程序能自动提取页面中的外部链接不就好了吗，于是我改造了下 Alexa 转向插件，让它自动给外部链接添加一个 rel="external" 属性，再辅以下面的 jQuery 和 CSS，一切搞定！
阅读全文 - 768 字 »

喜欢上 jQuery 了，今天花了好多时间在它上面，由于我的 JavaScript 底子很薄，往往遇到一些很弱智的问题都要很久才能搞定，不过总算有点长进了。
利用 jQuery 稍稍改进了下 WP 主题的 comments 模板，目前只是弄得漂亮了点，更实用的功能还处于摸索阶段，得过些时候才能实现；改进了下 Arctic's Internal Alexa Redirect 插件，但是产生了一个小 bug，快速连续点击同个链接会导致转向失败，有待解决；此外还学习了下 jQuery 的特效。
我对它的评语只有五个字：很好很强大。
今天得到最深刻的教训是：一定要在自己写的脚本之前加载 jQuery。最后链接几篇不错的 jQuery 教程。
阅读全文 - 334 字 »

jQuery 真是个强大的东西，今天看到花儿这篇文章的时候还本能地抗拒了一下。为了提高 blog 的访问速度，我一直不愿意加载除必须的 JavaScript 和 CSS 以外的东东。正所谓“闭关就要落后”，当我开始感觉到自己正在变得越来越无知时，我毅然决定即刻学习 jQuery。
我看的是 Realazy 的这篇“小教程”，我照着做，可没想到这么简单的代码都费了半天劲，小括号、中括号、大括号像刚闭幕没多久的某大会代表似的，全体出席好不热闹，害我写起来那个累啊，再加上我的 Ubuntu 只有可怜的 gedit，想检查括号究竟是哪个跟哪个闭合都成问题，迫切需要一个 Linux 环境下的 UltraEdit！
不管怎么说，总算把一只脚跨进 jQuery 的门了，继续努力，等学到点皮毛后可能会利用 jQuery 改进一下现在的 WordPress 主题，看着别人用 jQuery 做出很多实用的东东（如：日历），我是分外眼红啊，咱自然不能落后（太多）。
阅读全文 - 436 字 »