10个超好用的撰写jQuery技巧

在http://haineault.com/blog/84/这个地方看到的「10 useful jQuery authoring tips」，就我粗浅的撰写jQuery经验，这10个技巧的确很有帮助，因此在分给个各位邦友。

这篇文章虽然是英文，但说明不多，大都举实例，原本是请大家过去看看就好，没有翻译的需求。不过我还是照着大意翻成中文，也许对某些邦友而言还是可以省点事。
1.懒一点(Be lazy)

//别这样写if ($('#item').get(0)) {    $('#item').someFunction();}//或这样写if ($('#item').length) {    $('#item').someFunction();}//乾脆一点，就是这样写$('#item').someFunction();

jQuery只会在确认#item这个id存在是才会执行someFunction()，因此不需要再用if去判断，多做一次检查工作

2.抄捷径（Use shortcuts）

//虽然这样做一点问题都没有，是jQery的正规写法$(document).ready(function(){    //...});//但是走这条小路一样会到达同样的地方$(function(){   //...});

这应该是众所皆知的事，不过显然不是那么一回事

3.能连就连（Chain）

//不要这样做$('#frame').fadeIn();$('#frame .title').show();$('#frame a:visited').hide;//连起来就就对了$('#frame').fadeIn()    .find('.title').show().end()    .find('a:visited').hide();

没有必要的DOM查询会耗费额外的运算，因此能连就把它连起来吧

4.任务编组才优雅（Group queries）

//丑毙的写法$('div.close').click(closeCallback);$('button.close').click(closeCallback);$('input.close').click(closeCallback);//优雅多了吧$('div.close, button.close, input.close').click(closeCallback);

5.用Pro的作法处理相邻元素（5. Select siblings like a pro）

//不要这样做$('#nav li').click(function(){    $('#nav li').removeClass('active');    $(this).addClass('active');});//这样才帅气$('#nav li').click(function(){    $(this).addClass('active').siblings().removeClass('active');});

----- wordsmith的闲话 -----
wordsmith开始用jQuery时，也常在用作者说不要用的写法，写的时候也觉得呆，但也没进一步想怎么解，现在看到这一招，真的是击掌叫好呀。

6.使用each和map（Use each and map）

//试着避开下面的写法var output = [];for (var i=0;i < arr.length; i++) {    output.push(arr[i]);}//这样写比较好var output = $.map(arr, function() {    ...});//或是这样作var output = [];$.each(arr, function(index, value) {    output.push(value);});

使用each或map会比较可靠，以免遇到有什么JavaScript扩展了Array物件，反而会造成难以预料的情况。

------ wordsmith的闲话 ------
map我没用过，而each还算常用，但也只是用jQuery就因袭下来了，没去想过作者说的问题。

7.使用名称空间（Use namespaces）
事件也可以当作名称空间：

$('input').bind('blur.validation', function(e){    //...});//data方法也接受名称空间$('input').data('validation.isValid', true);

------ wordsmith的闲话 ------
这个作法wordsmith以前想都没想过，到现在也还没领略妙处在哪，值得再着墨着墨。

8.triggerHandler是好物（triggerHandler is great）

//与其这样做：var refreshFrame = function() {    $('#frame').load('http://reddit.com');};//或是这样做$('.button').click(refreshFrame);refreshFrame();//不如这样更好：$('.button').click(function() {    $('#frame').load('/page/frame.html');}).triggerHandler('click');// 你也可以抄个小路$('.button').click(function() {    $('#frame').load('/page/frame.html');}).click();

9.客製化事件（Custom events）
客製化事件在某些时候，可以让你减去不少痛苦，而将它也很容易就可以封装plugin之间的互动

$('.button').click(function() {    $('div#frame').load('/page/frame.html', function(){        $(this).triggerHandler('frameLoaded');    });});// PluginA.js$('#frame').bind('frameLoaded', function(){    $(this).show('slide', {direction: 'top'});});// PluginB.js$('div').bind('frameLoaded', function(){    // do something else});

10.引进测试（Test !）
jQuery有一个不错的测试框架叫QUnit，它能让你轻鬆撰写测试，让你在修改程式时，可以确保它能像预期的样子来运作，用法请参考下例：

module("A simple test");test("The frame should appear #button is clicked", function() {  expect(1);  $('#button').click();  ok($('#frame').is(':visible'), "The frame is visible" );});