ขึ้นหัวข้อมาแบบนี้ ไม่ได้ตั้งใจจะหัดให้เพื่อนๆ เป็นคนขี้เกียจกันนะ แต่ต้องยอมรับก่อนว่า ที่ผมมาเขียน jQuery แทน Javascript แบบปกติ นั้น เป็นเพราะ Syntax มันที่สั้นและสะดวกสะบาย เป็นที่สุด จาก 100 บรรทัด บางทีลดเหลือ บรรทัดเดียวหน้าตาเฉย นี่ล่ะผมเลย ใช้ jQuery มาตลอด

และวันนี้ผมก็จะมานำเสนอ วิธีเขียน jQuery ให้มัน optimize และ สั้นสุดๆ โดยไม่เสีย ความตั้งใจ ในการทำงานของเราไป ลองมาดู วันนี้ผมมีอะไรมาให้ ชิม !

1. ขี้เกียจจะเช็ค

// Don't 

if ($('#item').get(0))

  $('#item').somefunction();



// Or 

if ($('#item').length)

  $('#item').somefunction();



// Just

$('#item').somefunction();

jQuery จะทำงาน ใน function เฉพาะกรณี ที่ถูกต้องเท่านั้น ไม่จำเป็นต้องไปเช็คให้เสียเวลา

2. เปิดแค่สั้นๆ ก็พอแล้ว

// Don't

$(document).ready(function() {

  //...

});



// Just

$(function() {

  //...

});

อันนี้ น่าจะรู้กันอยู่แล้ว แต่ก็เอามาเตือนความจำกันหน่อย

3. การใช้งานซ้ำ

// Don't

$('#item').fadeIn();

$('#item .title').show();

$('#item a:visited').hide();



// Just

$('#item').fadeIn()

  .find('.title').show().end()

  .find('a:visited').hide();

ไม่จำเป็นเลยที่ต้องมาอ่าน DOM ใหม่ ทุกครั้ง แค่ใช้ การ find เมื่อหาลำดัยถัดไป และ end ใน การ ดึงตัวแม่มาใช้อีกที

4. จัดกลุ่มงานเดียวกัน

// Don't 

$('div.close').click(closeCallback);

$('button.close').click(closeCallback);

$('input.close').click(closeCallback);



// Just

('div.close, button.close, input.close')

    .click(closeCallback);

jQuery สามารถเรียก element หลายๆ ตัวทีเดียวกันได้ โดยการใช้ (, ) ทำการคั่น

5. เรียก DOM ใน level เดียวกันด้วย siblings

// Don't 

$('#nav li').click(function(){

    $('#nav li').removeClass('active');

    $(this).addClass('active');

});



// Just

$('#nav li').click(function(){

    $(this).addClass('active')

        .siblings().removeClass('active');

});

คำสั่ง siblings ทำงาน แบบนี้ เคยเขียนไปทีนึง

6. ใช้ each หรือ map เก็บค่า array

// Try to avoid

var output = [];

for (var i=0;i < arr.length; i++) {

    output.push(arr[i]);

}



// Do

var output = $.map(arr, function() {

    ...

});



// Or

var output = [];

$.each(arr, function(index, value) {

    output.push(value);

});

อันนี้ผมแนะนำให้ใช้ $.map ครับ สะดวกมากๆ

7. ใช้งานตามรูปแบบ namespaced

$('input').bind('blur.validation', function(e){

    // ...

});



// also available with



$('input').data('validation.isValid', true);

เรื่องของ namespaced อ่านได้ ที่นี่

8. ใช้ triggerHandle ไม่จำเป็นต้องเรียก 2 ครั้ง

// Too much

var refreshFrame = function() {

    $('#frame').load('http://reddit.com');

};

$('.button').click(refreshFrame);

refreshFrame();



// Just

$('.button').click(function() {

    $('#frame').load('/page/frame.html');

}).triggerHandler('click');



// You can also use a shortcut

$('.button').click(function() {

    $('#frame').load('/page/frame.html');

}).click();

ตัวนี้ ค่อนข้างจะใช้บ่อย คือทำ trigger ให้เหมือนกับว่าเริ่มต้น มันก็มีการคลิกเลย

9. Custom events

$('.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 !

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

});

ไอ้นี่ยังไม่เคยลองเหมือนกัน เดี๋ยวจะไปอ่านแล้วมาเล่าให้ฟังนะครับ สำหรับ QUnit


Recommended by: K.Non
Credit: http://haineault.com/blog/84/