เทคนิคการ Filter class เพื่อประหยัดการใช้งานโคด
จริงๆ ขี้เกียจจะอัพมากๆ ที่ไม่อัพเพราะว่า เร็วๆ นี้ jQueryTips.com กำลังจะย้ายบ้านอ่ะ สาเหตุหลักๆ ที่ผมไม่อัพเลย ในหลายเดือนที่ผ่านมา เพราะกำลัง จะย้ายบ้านนี่แหละ แล้วก็บ้านใหม่ไม่ใช่ WordPress, Drupal หรือ Free CMS อะไรพวกนี้แล้ว แต่เป็น app ที่เขียนเองครับ ทุกชิ้น ทุกขั้นตอนผลิตเองทั้งหมด แล้วก็ที่สำคัญไม่ได้ผลิตมาใช้ คนเดียว แต่เป็นลักษณะ Multi Users ซึ่งความสามารถไม่แพ้ cms พวกนี้แน่นอน บอกได้แค่นี้แหละ เดี๋ยวไม่ลุ้น
แต่ที่วันนี้ต้องมาอัพเพราะเดี๋ยวกลัวตัวเองจะลืม ผมใช้ jQueryTips แห่งนี้เป็นเหมือน สมุดช่วยจำส่วนตัวน่ะ อิอิ
เคยรู้สึกรำคาญมั้ยครับ กับเวลาที่เราจะทำงานกับ element ก้อนเดียวแต่มันมีหลาย actions ซะเหลือเกิน เช่นกด class นี้วิ่งไปนี่ กดอีก class นึง วิ่งไปทำงานอีกแบบนึง เอาล่ะ สมมุติก่อน
สมุมุติผมมีก้อน element ก้อนนึง ซึ่งภายในก้อนนั้น มีทั้งปุ่ม zoom, delete, edit แต่มันอยู่นก้อนเดียวกันนั่นแหละ แถมไอ้ function พวกนี้มันยังทำงานจากที่อื่นได้อีกแหนะ ดังนั้น แทนที่ผมจะเขียนแยกออกเป็น 3 events ผมก็จะเขียนเหลือ แค่ event เดียวแบบนี้
จากนั้นก็ไป implement function พวกนี้ตมสะดวก โคดสวยงามขึ้นเยอะเลย ใช่มั้ยล่ะ
แต่ที่วันนี้ต้องมาอัพเพราะเดี๋ยวกลัวตัวเองจะลืม ผมใช้ jQueryTips แห่งนี้เป็นเหมือน สมุดช่วยจำส่วนตัวน่ะ อิอิ
เคยรู้สึกรำคาญมั้ยครับ กับเวลาที่เราจะทำงานกับ element ก้อนเดียวแต่มันมีหลาย actions ซะเหลือเกิน เช่นกด class นี้วิ่งไปนี่ กดอีก class นึง วิ่งไปทำงานอีกแบบนึง เอาล่ะ สมมุติก่อน
สมุมุติผมมีก้อน element ก้อนนึง ซึ่งภายในก้อนนั้น มีทั้งปุ่ม zoom, delete, edit แต่มันอยู่นก้อนเดียวกันนั่นแหละ แถมไอ้ function พวกนี้มันยังทำงานจากที่อื่นได้อีกแหนะ ดังนั้น แทนที่ผมจะเขียนแยกออกเป็น 3 events ผมก็จะเขียนเหลือ แค่ event เดียวแบบนี้
$('.main-element').click(function(ev) {
var $itm = $(this);
var $target = $(ev.traget);
if ($target.is('a.zoom')) { zoom($target); }
else if ($target.is('a.delete')) { delete($item); }
else if ($target.is('a.edit')) { edit($item); }
return false;
});
จากนั้นก็ไป implement function พวกนี้ตมสะดวก โคดสวยงามขึ้นเยอะเลย ใช่มั้ยล่ะ

0 comments