jQuery plugin ทำไง

jQuery
jQuery

หลายๆคนนั้นพอเริ่มใช้ 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 นะจ๊ะแล้วจะมาเล่าต่อว่ามันทำอะไรได้อีกเยอะ ฮ่าๆ วันนี้ง่วงนอนแล้ว รอติดตามพรุ่งนี้น้า