เมื่อฟ้าส่ง Chainability มาให้กับ jQuery

ผมชอบไอเดีย Chainability (เชน-นะ-บิ-ลิ-ตี้; สามารถเรียกใช้ต่อเนื่องได้) จริง ๆ ถึงแม้จะใช้ไม่่ค่อยบ่อยก็ตามที Chainability เป็นคุณสมบัติหนึ่งของ jQuery ที่จะช่วยเพิ่มประสิทํธิืภาพ และลดจำนวนบรรทัดในการเขียนโค๊ดลงได้ โดยหลักการง่าย ๆ ของ Chainability คือ การคืนค่า jQuery Object ของฟังก์ชั่นที่ทำงานเสร็จแล้วกลับมา

ผมแยกไอเดียของ jQuery ออกมาคร่าว ๆ เพื่อให้เข้าใจได้ง่ายขึ้นดังนี้ครับ

• ตามหลักคือฟังก์ชั่นต่าง ๆ ที่เราเรียกใช้งานได้ของ jQuery Object นั้น มันคืนค่า jQuery Object กลับมาให้ ซึ่งก็จะมีฟังก์ชั่นต่าง ๆ ของ jQuery Object อย่างครบถ้วน ทำให้เราสามารถเรียกฟังก์ชั่นของ jQuery Object ได้ต่อเนื่องกันไปเรื่อย ๆ ไม่รู้จบ เช่น

$("span[@name=clickme]")
    .mouseover(mouseover_handler)
    .mouseout(mouseout_handler)
    .click(mouseclick_handler)
    .html("คลิกฉันสิจ๊ะ");

• Chainability จะกระทำกับ Object ที่เกิดจาก Selector ที่เราระบุไว้เท่านั้น บางกรณีเราสามารถเปลี่ยน Selector ในขณะที่กำลังทำ Chain (เรียกอย่างต่อเนื่อง) อยู่ก็ได้

$("span")
    .filter("[@name=clickme"])
        .click(function(){alert("Click");})
        .end()   // เพื่อจบ chain ที่ได้จาก filter "[@name=clickme]"
    .filter("[@name=hoverme"])
        .mouseover(function(){alert("Mouse over");})
        .mouseout(function(){alert("Mouse out");});

ข้อดีที่เท่าที่ผมเห็นของ Chainability คือ

1. เมื่อเราทำ Chain แสดงว่า เราจะได้จำนวนบรรทัดที่น้อยลง
2. เมื่อมันเป็น Chain แสดงว่า มันจะมีการ re-use (ใช้ซ้ำ) Object เดิม ไม่ต้องไปเสียเวลาค้นหาใน DOM ใหม่ แน่นอนที่ว่า มันจะเป็นการเพิ่ม Throughput ให้กับงานที่ทำได้ไปในตัว เช่น ลองเปรียบเทียบ Code ที่ทำงานเหมือนกัน 2 ชุดด้านล่างนี้ จะเห็นความแตกต่างทันทีครับ

$("span[@name=clickme]")
    .mouseover(mouseover_handler)
    .mouseout(mouseout_handler)
    .click(mouseclick_handler)
    .html("คลิกฉันสิจ๊ะ");

$("span[@name=clickme]").mouseover(mouseover_handler);
$("span[@name=clickme]").mouseout(mouseout_handler);
$("span[@name=clickme]").click(mouseclick_handler);
$("span[@name=clickme]").html("คลิกฉันสิจ๊ะ");

เพื่อให้เห็นภาพได้ชัดเจนมากขึ้น ลองไปดูที่ LIVE DEMO กันครับ