jQuery 1.3.2 ติดเทอร์โบ

ไม่ได้เข้ามาอัพเดทตั้งนาน มัวแต่ไปจัดการธุระส่วนตัวอยู่ เลยหาเวลาเข้ามาอัพเดทไม่ได้ วันนี้พอมีเวลาเลยเข้ามาอัพเดทซะหน่อยครับ

หลาย ๆ คนคงรู้แล้วว่า jQuery ออกเวอร์ัชั่นใหม่มาเป็น 1.3.2 แล้ว วันนี้เราถือโอกาสมาคุยส่วนที่ปรับปรุงเพิ่มขึ้นจากเวอร์ชั่นในซีรี่ส์ 1.2.x กันดีกว่าครับ

จากเวอร์ชั่น 1.2.6 เปลี่ยนมาเป็นเวอร์ชั่นในซีรี่ส์ใหม่ คือ 1.3.x มีการเปลี่ยนแปลงที่โดดเด่นตามนี้เลยครับ

1. ความเร็วหยั่งกับติดเทอร์โบของ Selector

ทางทีมพัฒนา jQuery อ้างว่า Selector ของ jQuery ในเวอร์ชั่นนี้ เร็วขึ้นกว่าเดิมถึง 49% นับว่าเป็นการพัฒนาที่น่าชื่นใจจริง ๆ ครับ แหม่…ประทับใจ ๆ [อ้างอิง:http://docs.jquery.com/Release:jQuery_1.3#Sizzle_Selector_Engine]

2. Live Events

การเปลี่ยนแปลงนี้ก็ยอดเยี่ยมครับ live() เป็นเทคนิคการ bind event ที่ไม่ได้แค่ bind กับ element ที่มีอยู่ในเว็บเราตอนนี้เท่านั้น แต่ยังสามารถ auto bind event กับ element ที่จะเกิดขึ้นใหม่ได้อีกด้วย สุดยอดมาก ๆ ครับ ผมยกตัวอย่างว่าเว็บของผมมีการกำหนดให้ <span name=’myspan’> มี class เป็น hoverme เมื่อตอนผมเอา mouseover และให้เอา hoverme ออกตอน mouseout ตาม code ด้านล่างนี้

$(“span[name=myspan]“).mouseover(function(){ $(this).addClass(“hoverme”); }).mouseout(function(){ $(this).removeClass(“hoverme”); });

เดิมทีในเวอร์ชั่นก่อน ๆ นี้ ถ้าเรามีการเพิ่ม <span name=”myspan”> เข้าไปทีหลังจากที่เราเรียกคำสั่งด้านบน มันจะมีปัญหาว่า <span name=”myspan”> อันใหม่จะไม่ bind event ที่เราระบุ ทำให้เราต้องเรียกใหม่ทุกครั้ง

และ live นี่เอง ที่เป็นตัวเปลี่ยนแปลงทุกอย่างครับ ดู code ด้านล่างนี้นะครับ

$(“span[name=myspan]“).live(“mouseover”,function(){ $(this).addClass(“hoverme”); }).live(“mouseout”,function(){ $(this).removeClass(“hoverme”); });

คำัสั่งด้านบนนี้สั่งแค่ครั้งเดียวครับ ถึงแม้ว่าเราจะมี <span name=”myspan”> เพิ่มขึ้นมาใหม่ ๆ ในอนาคต เราก็ไม่ต้อง bind ใหม่แ้ล้วครับ สบ๊ายสบาย…

3. ยกเครื่องการทำ HTML Injection ใหม่

คำสั่งพวก append, prepend, before และ after มีการรื้อเขียนใหม่ เร็วขึ้นโคตร ๆ ครับ 6 เท่า!! ใช่ครับ 6 เท่า หรือ 600% นั่นเอง [อ้างอิง: http://docs.jquery.com/Release:jQuery_1.3#HTML_Injection_Rewrite]

จริง ๆ แล้วมีเยอะกว่านี้อีกเยอะ ใครสนใจเข้าไปติดตามอ่านได้ที่ http://docs.jquery.com/Release:jQuery_1.3 ได้เลยครับ

นอกเหนือจากนั้น

ในการอัพเดทครั้งนี้ ยังมีการเปลี่ยนแปลงที่ก่อให้เกิด Backward Incompatibility นั่นหมายถึงว่า เราไม่สามารถใช้ code เก่าที่เราเขียนไว้แล้วกับ jQuery 1.3.x ได้นี่เองครับ

ยกตัวอย่างเช่น การใช้ @ ในส่วนของ Selector ครับ เช่น $(“[@name=color]“) ที่หมายถึง attribute ชื่อว่า name มีค่าเป็น color ใน 1.3.x เราต้องไม่ใส่ @ แล้วครับ (ถ้าใส่แล้วจะใช้ไม่ได้ ซึ่งต่างจาก 1.2.6 ที่ใส่หรือไม่ใส่ก็ได้) หรือ jQuery.browser ที่ไม่สามารถใช้กับ Safari 2 ได้อีกต่อไป คุณสามารถอ่านรายละเอียดเพิ่มเติมได้จาก http://docs.jquery.com/Release:jQuery_1.3#Performance

วันนี้ไว้เท่านี้ก่อนครับ ว่าง ๆ จะเข้ามาอัพเดทใหม่ครับ