决定启用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