หลายๆคนนั้นพอเริ่มใช้ jQuery ไปซักพักแล้วก็จะเจอว่าเราเขียนอะไรซ้ำๆซากๆ เขียนเหมือนเดิม มันน่าจะมีอะไรที่มากกว่าฟังก์ชั่นและสามารถใช้ความสามารถ changing method หรือการที่เราทำอย่างนี้ $().slideUp().css().attr() การใช้ .method ต่อๆกันอย่างนี้เราเรียกว่า changing method ซึ่งเป็นจุดเด่นของ jQuery วันนี้จะมาสอนเอารอไรอ่านต่อกันโลด
โดยปกติเราเวลาเราจะสร้าง plugin นั้นก็เขียนธรรมดาอย่างนี้
[php]
jQuery.fn.myPlugin = function() {
// โค้ดสำหรับให้ plugin ทำงาน
};
[/php]
อธิบายรูปแบบการเขียนซักหน่อยคือเราจะต้องเขียน jQuery.fn.ชื่อplugin อย่างนี้ทุกครั้งถ้าเราต้องการที่จะทำ plugin ที่สามารถใช้กับ element แล้ว .method
แต่ว่าไม่เห็นมีการใช้ $ เลยใช่ไหมผมรู้ว่าจะให้คุณมานั่งเขียน jQuery.method เรื่อยๆก็คงแย่ แต่ที่ต้องเขียนอย่างนี้เพราะต้องกันการ “ชนกัน” ของ library ตัวอื่น เขาก็ใช้กันเยอะตัว $ เนี้ยเพราะฉะนั้นเราจึงต้องปรับเปลี่ยนกันนิดหน่อย เพื่อไม่ให้ library ตัวอื่นมาทับเมื่อเราทำการเรียกด้วย $ ครับ โค้ดจึงเป็นแบบด้านล่างครับ
[php]
(function( $ ) {
$.fn.myPlugin = function() {
// โค้ดทำงานต่างๆใน plugin
};
})( jQuery );
[/php]
อ่า … คราวนี้เราสามารถเรียก ฟังก์ชั่นต่างๆในส่วนตรงที่ผมเขียน comment ไว้ใน plugin ของเราได้แล้วครับ ต่อมาก่อนที่เราจะลุยต่อกับ plugin ของเราต่อนั้นผมขออธิบายอีกนิดนั่นคือเรื่องเวลาที่เราใช้การอ้างอิง $(this) อันนี้ทุกคนที่เขียนมาซักพักแล้วน่าจะคุ้นเคยกันดี แต่ว่าถ้้าคุณต้องการอ้างอิงตัว element selector ตัวนั้นๆที่กำลังเรียกใช้ plugin เราอยู่เราจะเรียกใช้ด้วยการใช้ this เอาไปดูตัวอย่างกันเลย
[php]
(function( $ ){
$.fn.myPlugin = function() {
// ในช่วงตรงนี้ให้เรีียกอ้างอิงโดยการใช้ this
// ถ้าเราใช้ $(this) มันเหมือนกับการที่เราเขียนแบบนี้ >>> $($(‘#element’));
this.fadeIn(‘normal’, function(){
// แต่ถ้าอยู่ในฟังก์ชั่นของ jQuery แล้วคุณสามารถอ้างอิง $(this) ได้ครับในนี้
});
};
})( jQuery );</pre>
[/php]
อ่ะฮะ !! คราวเริ่มเข้าใจบ้างแล้วใช่ไหมครับว่าทำไมเขาต้องเขียนกันอย่างนี้ ยังมีอีกอย่าเพิ่งรีบไปไหน ใจเย็นๆ เวลาเราเรียกใช้ก็เรียกแบบนี้
[php]
$(‘#element’).myPlugin();
[/php]
ซึ่งเวลาที่เราอ้างอิงถึง $(‘#element’) ใน Plugin ก็ใช้ this แทน $(this) ถ้าเรียกใช้ฟังก์ชั่นของ jQuery ก็เหมือนเดิมเลยจ้า $(this) เอาล่ะมาลองสร้างตัวอย่าง plugin ง่ายๆกันก่อนแล้วกันดังตัวอย่างเลย
[php]
(function($) {
$.fn.myPlugin = function() {
this.fadeOut("slow");
}
})( jQuery );
// แล้วลองเรียก plugin ของเราดู
$(‘#element’).myPlugin();
[/php]
เราก็จะเห็นว่า element ที่ถูก select ไว้ fadeOut ออกไป ต่อไปเราจะพูดถึงจุดเ่ด่นการ changing method ของ jQuery ที่ทำให้มันโด่งดังเป็นที่น่าใช้ โดยการเขียนเนี้ยคุณจำเป็นจะต้อง return this กลับมาเพื่อจะส่ง element selector ที่เราใช้ใน plugin ส่งต่อไปให้ method อื่นใช้ ตัวอย่าง
[php]
(function( $ ){
$.fn.myPlugin = function( type ) {
return this.each(function() {
$(this).fadeOut("slow").fadeIn("slow");
});
};
})( jQuery );
// ลอง changing method กันดู
$(‘#element’).myPlugin().css(‘backgroundColor’,’black’);
[/php]
เราก็จะเห็นว่าเราสามารถใช้ changing method ของ jQuery ได้แหละ :D อ่า … วันนี้คงต้องพอแค่นี้ก่อนพรุ่งนี้มาภาค 2 นะจ๊ะแล้วจะมาเล่าต่อว่ามันทำอะไรได้อีกเยอะ ฮ่าๆ วันนี้ง่วงนอนแล้ว รอติดตามพรุ่งนี้น้า
ถ้าคุณชอบบทความในเว็บนี้ และอยากสนับสนุนเรา เพียงแค่คุณสมัครรับข่าวสารด้านล่างจะได้รับสิทธิ์พิเศษก่อนใคร เราสัญญาว่าจะส่งบทความที่เป็นประโยชน์ต่อคุณอย่างแน่นอนครับ
