temp_logo

วิธีทำ jQuery plugin ทำอย่างไร ?

หลายๆคนนั้นพอเริ่มใช้ jQuery ไปซักพักแล้วก็จะเจอว่าเราเขียนอะไรซ้ำๆซากๆ เขียนเหมือนเดิม มันน่าจะมีอะไรที่มากกว่าฟังก์ชั่นและสามารถใช้ความสามารถ changing method หรือการที่เราทำอย่างนี้ $().slideUp().css().attr() การใช้ .method ต่อๆกันอย่างนี้เราเรียกว่า changing method เราจะสอนทำ jQuery plugin ในบทความนี้กันครับ

jQuery Plugin คืออะไร ?

jQuery คือ Framework javascript ที่ถูกใช้งานแทนการเขียนแบบ vanilla (เขียน javascript โดยไม่มี framework)

jQuery plugin
jQuery

โดยปกติเราเวลาเราจะสร้าง plugin นั้นก็เขียนธรรมดาอย่างนี้

jQuery.fn.myPlugin = function() {

// โค้ดสำหรับให้ plugin ทำงาน

};

อธิบายรูปแบบการเขียนซักหน่อยคือเราจะต้องเขียน jQuery.fn.ชื่อplugin อย่างนี้ทุกครั้งถ้าเราต้องการที่จะทำ plugin ที่สามารถใช้กับ element แล้ว .method

แต่ว่าไม่เห็นมีการใช้ $ เลยใช่ไหมผมรู้ว่าจะให้คุณมานั่งเขียน jQuery.method เรื่อยๆก็คงแย่ แต่ที่ต้องเขียนอย่างนี้เพราะต้องกันการ “ชนกัน” ของ library ตัวอื่น เขาก็ใช้กันเยอะตัว $ เนี้ยเพราะฉะนั้นเราจึงต้องปรับเปลี่ยนกันนิดหน่อย เพื่อไม่ให้ library ตัวอื่นมาทับเมื่อเราทำการเรียกด้วย $ ครับ โค้ดจึงเป็นแบบด้านล่างครับ

(function( $ ) {
   $.fn.myPlugin = function() {

   // โค้ดทำงานต่างๆใน plugin

   };
})( jQuery );

อ่า … คราวนี้เราสามารถเรียก ฟังก์ชั่นต่างๆในส่วนตรงที่ผมเขียน comment ไว้ใน plugin ของเราได้แล้วครับ ต่อมาก่อนที่เราจะลุยต่อกับ plugin ของเราต่อนั้นผมขออธิบายอีกนิดนั่นคือเรื่องเวลาที่เราใช้การอ้างอิง $(this) อันนี้ทุกคนที่เขียนมาซักพักแล้วน่าจะคุ้นเคยกันดี แต่ว่าถ้้าคุณต้องการอ้างอิงตัว element selector ตัวนั้นๆที่กำลังเรียกใช้ plugin เราอยู่เราจะเรียกใช้ด้วยการใช้ this เอาไปดูตัวอย่างกันเลย

(function( $ ){

$.fn.myPlugin = function() {

// ในช่วงตรงนี้ให้เรีียกอ้างอิงโดยการใช้ this
// ถ้าเราใช้ $(this) มันเหมือนกับการที่เราเขียนแบบนี้
$($('#element'));

this.fadeIn('normal', function(){

// แต่ถ้าอยู่ในฟังก์ชั่นของ jQuery แล้วคุณสามารถอ้างอิง $(this) ได้ครับในนี้

});

};
})( jQuery );

อ่ะฮะ !! คราวเริ่มเข้าใจบ้างแล้วใช่ไหมครับว่าทำไมเขาต้องเขียนกันอย่างนี้ ยังมีอีกอย่าเพิ่งรีบไปไหน ใจเย็นๆ เวลาเราเรียกใช้ก็เรียกแบบนี้

$('#element').myPlugin();

ซึ่งเวลาที่เราอ้างอิงถึง $(‘#element’) ใน Plugin ก็ใช้ this แทน $(this) ถ้าเรียกใช้ฟังก์ชั่นของ jQuery ก็เหมือนเดิมเลยจ้า $(this) เอาล่ะมาลองสร้างตัวอย่าง plugin ง่ายๆกันก่อนแล้วกันดังตัวอย่างเลย

(function($) {

$.fn.myPlugin = function() {

this.fadeOut("slow");

}

})( jQuery );

// แล้วลองเรียก plugin ของเราดู

$('#element').myPlugin();

เราก็จะเห็นว่า element ที่ถูก select ไว้ fadeOut ออกไป ต่อไปเราจะพูดถึงจุดเ่ด่นการ changing method ของ jQuery ที่ทำให้มันโด่งดังเป็นที่น่าใช้ โดยการเขียนเนี้ยคุณจำเป็นจะต้อง return this กลับมาเพื่อจะส่ง element selector ที่เราใช้ใน plugin ส่งต่อไปให้ method อื่นใช้ ตัวอย่าง

(function( $ ){

$.fn.myPlugin = function( type ) {

return this.each(function() {

$(this).fadeOut("slow").fadeIn("slow");

});

};
})( jQuery );

// ลอง changing method กันดู
$('#element').myPlugin().css('backgroundColor','black');

เราก็จะเห็นว่าเราสามารถใช้ changing method ของ jQuery ได้แหละ :D อ่า … วันนี้คงต้องพอแค่นี้ก่อนพรุ่งนี้มาภาค 2 นะจ๊ะแล้วจะมาเล่าต่อว่ามันทำอะไรได้อีกเยอะ ฮ่าๆ วันนี้ง่วงนอนแล้ว รอติดตามพรุ่งนี้น้า

Loading

เป็นโปรแกรมเมอร์ที่ตามหาคุณค่าของชีวิตและความฝันในวัยเด็ก ชอบเล่นเกม เรียนรู้ทุกอย่าง ชอบเจอคนใหม่ๆ งานสังคมทุกชนิด ออกกำลังกายในวันว่าง อ่านหนังสือ มีเว็บรีวิวหนังสือด้วย www.readraide.in.th