iT邦幫忙

20

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" );
});

0
tequila
iT邦新手 5 級 ‧ 2009-05-29 12:54:12

受教了,
感謝!

0

謝謝分享!

0
IvanLin
iT邦研究生 1 級 ‧ 2009-06-01 09:39:23

感謝你的熱心,謝謝分享!!

0
kuochiahao
iT邦研究生 1 級 ‧ 2009-06-01 14:01:35

謝謝分享

0
joe64
iT邦新手 4 級 ‧ 2009-06-05 11:09:34

這幾招真的太妙了~~
省下太多時間~~
感謝分享!

0
hchungi
iT邦新手 5 級 ‧ 2009-06-06 09:11:02

Cool~ Thanks.

0
james
iT邦新手 4 級 ‧ 2009-10-06 09:09:47

超棒,很有用分享

我要留言

立即登入留言