Sekarang setelah kita melihat penggunaan plugin jQuery, sangat penting untuk memahami cara membuatnya juga. Kami sudah menyentuh secara singkat fakta bahwa Anda dapat memperluas objek jQuery asli jika Anda mau. Seperti:
$.myFunction = function() ( console.log("I am a function on the jQuery object."); ); // call it $.myFunction();Tapi itu tidak terlalu berguna dengan sendirinya. Untuk membuat metode baru untuk jQuery yang dapat Anda panggil pada sekumpulan elemen, Anda harus melakukannya seperti ini:
$.fn.myMethod = function() ( // I'm a new method ));Ini persis sama dengan menggunakan .prototype di jQuery, dan bagi yang penasaran, Anda dapat membaca lebih lanjut tentang itu di sini. Melakukannya dengan cara itu berarti kita akan dapat menggunakan metode baru itu pada sekumpulan elemen. Suka:
$("li").myMethod();Anda dapat melakukan apa pun yang Anda inginkan di samping metode itu, tetapi untuk menjadi jenis pembuat plugin jQuery yang baik, Anda harus mengembalikan set elemen yang sama kembali dari plugin.
$.fn.myMethod = function() ( // Do some stuff return this; ));Dengan cara itu, ini akan bekerja dengan rantai. Jika Anda tidak melakukan itu, dan seseorang mencoba sesuatu seperti:
$ ("Li"). MyMethod (). Show ();
Itu akan gagal, karena .show()pada dasarnya tidak akan dipanggil. Seringkali plugin jQuery dibuat untuk mengulang setiap elemen sehingga Anda memiliki akses langsung ke setiap elemen individu dalam kumpulan untuk melakukan apa yang Anda butuhkan.
Hal lain yang baik untuk dilakukan adalah membungkus plugin dalam Ekspresi Fungsi Segera Diminta dan meneruskan jQuery sebagai parameter untuk itu. Dengan begitu Anda dapat menggunakan $ di dalam kode plugin Anda dengan lebih aman. Itu karena dalam beberapa situasi $ singkatan untuk jQuery tidak tersedia (misalnya pengguna telah menggunakan jQuery dalam "mode kompatibilitas").
Dengan kedua hal terakhir tersebut, struktur plugin menjadi:
(function($) ( $.fn.myMethod = function() ( return this.each(function() ( // do things )); ); ))(jQuery)Di screencast kami akhirnya membuat plugin sederhana untuk menambahkan panah ke akhir elemen apa pun.
Lihat Pen rwasH oleh Chris Coyier (@chriscoyier) di CodePen
Tentu saja, ini bisa menjadi lebih kompleks seiring dengan meningkatnya ambisi Anda untuk melakukan lebih banyak hal.