决定启用jQuery

这两天都在看 jQuery 的 doc，发现这是个十分容易上手并掌握的 javascript framework。正如其 slogan 说的一样: Write Less, Do More，连我这种 javascript beginner 也能很快的写出漂亮好用的代码来。

jQuery 的代码很 human-readable，即便是没看 doc，光看代码也能明白这是拿来干嘛的，怎么运行的，稍微看下官方的 tutorials 后就可以自己写东西了。 个人认为 jQuery 最好用的是 selectors 和 chain mechanism。它的 selectors 支持 CSS 和 XPath，对我来说自然就是更熟悉 CSS 了，而且更关键的是它支持 CSS3 强大的选择器定义，我几乎可以用 $("some CSS selectors") 来定位到我需要的任何页面元素，只要会写 CSS，就能很好的使用它的_selectors_。

jQuery 比 Mootools 的代码更好写更易读的原因在于它的_chain_机制，利用_selectors_定位后就可以立即使用 .action 来执行动作了。以下面这段代码为例:

$("#commentform input").each(function(){
	if($(this).val() != '') {$(this).next(".overlabel").css("text-indent","-9999px;")};
	$(this).focus(function(){
		$(this).next(".overlabel").css("text-indent","-9999px");
	}).blur(function(){
	if($(this).val() == ''){
		$(this).next(".overlabel").css("text-indent","0");
	}
	});
});

例如这段代码 $(this).next(".overlabel").css("text-indent","-9999px;")，定位 element 后就可以连续发生系列动作，先移到下一元素 (class 为 .overlabel 的，就是我要的 label)，然后赋予 CSS style。

而 $(this).focus ( function() {...} ).blur ( function() {...} ) 直接通过_chain_机制实现对 focus 和 blur Event 的分别动作，只要作用的是同一个对象，就可以不断的 .action 下去。

唯一让我有点不习惯的是它对 $('some CSS selectors') 所定位的对象是否存在的判断，不能直接用 if ($('some CSS selectors') 来判断是否存在，因为它返回的是对象本身，必须通过 $('some CSS selectors').length 来判断长度 ( 没有存在对象即返回 0 值 )，从而判断是否存在。

jQuery 调试起来也很方便，只要有 firefox 下的 firebug，写代码前完全可以在 firebug 里的 console 先试验下。这里 有个很好的关于在 firebug 下调试 jQuery 的 screencast。

当然，在我决定往 blog 里加载 jQuery 前，显然我更多的要考虑 jQuery 对加载速度的影响，几个 jQuery 的 js 文件加起来 100 多 k，而我实际用到的可能不到 20k，是否有必要加载一个这么大的东西来完成小部分工作? 最后我的办法是先把几个 js 文件合并为一个，用 YUICompressor 压缩，再启用 gzip 压缩，100 多 k 的 js 最后大小仅为 17k，从 firebug 里的加载速度来看，大概在 700ms 左右，有 cache 的话二次加载时间在 400ms 左右，这是比较可以接受的了。

目前的话并没有往 blog 里添加很多效果，我不喜欢添加乱七八糟的花哨特效…只是做了些小的应用，以及考虑到以后可能还要继续添加一些 script 进来。

P.S : 现在正开始逐步学习使用 git 做版本控制，拿 vim 写代码…以至于老是习惯性的在 kwrite 里编辑文字一停下来就按 Esc 键。更搞的是那天去食堂买水煮，老板问我要什么，我说”Ctrl+A，然后不要 XX，不要 XX…” Orz