在這個地方看到的「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" ); });