CDN คืออะไร

วันนี้ออกนอกเรื่องสักหน่อยละกันครับ แต่ก็มีส่วนที่เกี่ยวข้อกับ jQuery อยู่บ้างเหมือนกัน เพราะเพื่อนๆที่พึ่งจะจับกับ jQuery ใหม่ๆอาจจะต้องศึกษาคำศัพท์เทคนิคต่างๆเพิ่ม เพราะไม่งั้นไปเจอเข้าอาจจะงงได้ครับ วันนี้เลยจะอธิบายเกี่ยวกับตัวย่อ CDN ว่ามันคืออะไร

คำว่า CDN นั้นย่อมาจาก Content Delivery Network ครับ หรือ Content distribution network (CDN) ถ้าเกี่ยวกับ jQuery มันก็คือ Server ที่ทำการเก็บ source code ของตัว jQuery เอาไว้ให้เราเรียกใช้งานครับ

แล้วมันมีประโยชน์ยังไง? ประโยชน์ของมันเลยคือสามารถที่จะลดโหลด หรือ ภาระของเครื่อง Server ของเราเองได้ครับแทนที่เราจะเก็บ File jquery.js เอาไว้ที่ Server ของเราซึ่งหากเว็บเรานั้นมีทราฟฟิกจำนวนมากๆแล้ว แค่โหลด jquery.js 1 file ก็เพิ่มภาระให้กับ Server ของเราได้เช่นกัน ดังนั้นวิธีลดภาระก็คือใช้การโหลดจาก CDN Host ต่างๆที่ให้บริการครับ

CDN ต่างๆนี้จะทำการเก็บ copy source code ของ jQuery เวอร์ชั่นต่างๆเอาไว้ แทบจะเรียกได้ว่าเกือบทุกๆ version เลยก็ว่าได้นะครับ แถมบางเจ้านั้นจะมี Server ที่ให้บริการมากกว่า 10 เครื่องเลยทีเดียวทำให้การโหลด file jQuery นั้นทำได้รวดเร็ว

แต่วิธีนี้ไม่เหมาะกับการทำ Web Applcation แบบ offline หรือแบบ Intranet นะครับ เพราะว่าการใช้แบบ CDN นั้นจะต้อง online ครับถึงจะสามารถ load file jquery ได้

ตัวอย่างการ load file jQuery ผ่าน CDN ที่ต่างๆนะครับ เพื่อนๆสามารถเปลี่ยนเลขเวอร์ชั่นได้ตามที่ตัวเองใช้งานได้เลยครับ

1 2 3 4 5 6 7 8 9 10 11

// Google Ajax API CDN <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"> </script> // Microsoft CDN <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.min.js" type="text/javascript"> </script> // jQuery CDN <script src="http://code.jquery.com/jquery-1.6.min.js" type="text/javascript"> </script>

วิธีใช้งาน jQuery หลายเวอร์ชั่นพร้อมๆกัน ด้วย noConflict

ในบางครั้งเวลาที่เราพัฒนา Web application ที่ต้องพัฒนาจากของเก่าซึ่งอาจจะใช้ jQuery เวอร์ชั่นเก่าๆอยู่ก่อนแล้ว แต่ว่างานที่เราต้อง develop ใหม่จะต้องใช้ jQuery เวอร์ชั่นที่สูงกว่าและต้องไม่กระทบกับของเก่าที่มีอยู่แล้ว ปัญหานี้แก้ง่ายๆด้วยการใช้ jQuery หลายๆเวอร์ชั่นใน page เดียวกันไปเลย

และจะทำยังไงละถึงจะใช้ jQuery หลายๆเวอร์ชั่นพร้อมๆกันไปได้ เราก็ใช้ function นี้ครับที่ jQuery ได้เตรียมแก้ปัญหานี้เอาไว้แล้ว

noConflict

มาดูตัวอย่าง code กันดีกว่า

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

// jQuery Version 1.5.2 <script src="jquery-1-5-2.js"></script> <script>     var oldVersion = jQuery.noConflict(); </script> //jQuery new version 1.6 <script src="jquery-1-6.js"></script> <script>     var newVersion = jQuery.noConflict(); </script> <div id="testDiv"></div> <script>      alert( oldVersion('#testDiv') );      alert( newVersion('#testDiv') ); </script>

เท่านี้ก็หมดปัญหาเรื่องการใช้งาน jQuery หลายๆเวอร์ชั้นแล้วครับ บางครั้งปัญหานี้ก็ไม่ได้เกิดจากการใช้งาน jQuery หลายๆเวอร์ชั่นนะครับ เพราะผมเองก็เคยเจอเวลาที่ใช้ javascript ค่ายอื่น แล้วพอเอา jQuery มาใช้ร่วมกันด้วยแล้วโปรแกรมไม่สามารถทำงานได้ ก็ได้วิธีนี้แหละครับในการแก้ไขปัญหานี้

ความแตกต่างของ .bind(), .live(), และ .delegate()

สวัสดีจ้า ไม่ได้อัพเดทเป็นเวลานานอีกแล้วครับ แฮ่ะๆ วันนี้นำเสนอเรื่องราวของ .bind(), .live(), .delegeate() ดีกว่าครับ เพราะมีหลายคนที่งง และสงสัย ว่ามันต่างกันอย่างไร และเอาไปใช้งานในงานลักษณะใหน ใช้กันตอนใหน เอาเป็นว่าคลิกเข้ามาอ่านด้านในกันเลยดีกว่าครับ :)

Image from : http://www.alfajango.com

เริ่มกันเลยไม่ต้องยืดยาวกันมาก เน้นกระชับๆละกันนะครับ ช่วงนี้เวลาในการเขียน Blog ของผมค่อนข้างจะน้อยลงเดี๋ยวจะต้องจัดตารางเวลากันใหม่สักหน่อยครับ เอาละ เรามาว่ากันที่เจ้า method .bind(); กันก่อนเลย เพื่อนๆหลายคนสงสัยกันมากว่ามันเอาไว้ทำอะไร โดยเฉพาะ โปรแกรมเมอร์มือใหม่ เจ้าตัว method .bind นี้นะครับ เอาไว้จำหรับการ ผูก หรือ นำเอา Events เช่น Click, Mouse Over หรือที่เรียกกันว่า CSS Selector เอาไปกำหนดให้กับ Element ที่เราต้องการ เช่นกำหนดให้กำ Element <a> เป็นต้น

1	$('a').bind('click', function(e){ alert( 'Clicked!!' ); });

จาก code ตัวอย่างด้านบน เป็นการ binding event Click ให้กับ Elements ทั้งหมด ที่อยู่ภายใต้ Docment Root นะครับ เพื่อนๆบางท่านอาจจะงงว่า Document root คืออะไร ดูตามตัวอย่างด้านล่างนี้ครับน่าจะ เข้าใจง่ายขึ้น

1 2 3 4 5 6 7 8 9 10 11

//This is DOM Tree window    |_document       |_H1       |_H2       |_p             |_span             |_a       |_form             |_input             |_submit

จาก DOM Tree ด้านบนนี้จะเห็นว่า document นั้นเป็น Root บนสุดของทุกๆ Element หรือจะเรียกว่าเป็น Root node ก็ว่าได้ ดังนั้นเวลาที่เรา binding events เข้าไปที่ Elements A ตัว jQuery Object จะทำการ Scan หา TAG A หรือ Elements A แล้วทำการใสคำสั่ง click เข้าไป

จะเห็นว่าเจ้า method .build เนี่ย มันจะทำงานได้กับ Elements ที่มีอยู่ในขณะนั้นเท่านั้น ถ้าหากว่า มีการเพิ่ม Elements A เข้ามาภายหลัง เช่น เกิดจากการโหลดมาจาก AJAX เข้ามา พวก Element A ที่เข้ามาทีหลังนั้น จะไม่ถูก binding event click เข้าไป ซึ่งเพื่อนๆหลายท่านคงจะเคยเจอปัญหาแบบนี้นะครับ

เพื่อแก้ไขปัญหานี้จึงเกิด Methods ใหม่ขั้นมาอีกสองตัวคือ .live() และ .delegate()
.live() และ .deledate() นั้นจริงๆแล้วเหมือนกันครับ เพียงแต่ .delegate() จะทำงานได้เร็วกว่า .live() ส่วนที่ว่าทำไมถึงทำงานได้เร็วกว่านั้น เดี๋ยวผมขอเวลาไปหาคำตอบก่อนนะครับ แฮ่ะๆ ขอติดไว้ก่อน

1	$('a').live() == $(document).delegate('a')

มาสรุปกันเลยว่า .bind(), .live or .delegate() นั้นใช้ต่างกันอย่างไร

1 2 3 4 5

$('a').bind( 'click', function(e){ alert('This is method bind.'); })

จาก code ด้านบนนี้ .bind นั้นจะสามารถใส่ event ให้กับ Element ที่มีอยู่ในขณะนั้นเท่านั้น ไม่สามารถกำหนด event ให้กับ element ที่เพิ่มเข้ามาทีหลังไม่ได้

1 2 3

$('a').live('click', function() { alert('This is live') }); // or $(document).delegate('a', 'click', function() { alert('This is Delegate); });

Code ด้านบนนี้สามารถกำหนด event ให้กับ Element A ได้ ถึงแม้ขณะนั้น ยังไม่มี Element A ใน document root ก็ตาม เช่น เมื่อมีการโหลด HTML เข้ามาผ่านทาง AJAX โดยที่มี Element A ติดเข้ามาด้วย Element A ที่เข้ามานั้นก็จะถูกจับ event click ใส่เข้าไปทันที

ผมคิดว่าบทความนี้ก็น่าจะพอแก้ไขปัญหา ข้อข้องใจของเพื่อนๆได้พอสมควรนะครับ ถ้าสงสัยตรงใหน ถามใน Facebook ได้เลยนะครับ http://www.facebook.com/jQuery.in.th