Sekarang setelah kita melihat menggunakan plugin jQuery, sangat mustahak untuk memahami bagaimana membinanya juga. Kami telah secara ringkas menyentuh hakikat bahawa anda boleh memperluas objek jQuery asli jika anda mahu. Seperti:
$.myFunction = function() ( console.log("I am a function on the jQuery object."); ); // call it $.myFunction();Tetapi itu tidak berguna dengan sendirinya. Untuk membuat kaedah baru untuk jQuery yang boleh anda gunakan pada satu set elemen, anda perlu melakukannya seperti ini:
$.fn.myMethod = function() ( // I'm a new method ));Ini betul-betul sama dengan menggunakan .prototype di jQuery, dan bagi yang ingin tahu, anda boleh membaca lebih lanjut mengenai perkara itu di sini. Melakukannya dengan cara itu bermaksud kita akan dapat menggunakan kaedah baru itu pada sekumpulan elemen. Seperti:
$("li").myMethod();Anda boleh melakukan apa sahaja yang anda mahukan dalam kaedah itu, tetapi untuk menjadi warga negara pemalam plugin jQuery yang baik, anda harus mengembalikan sekumpulan elemen yang sama keluar dari pemalam.
$.fn.myMethod = function() ( // Do some stuff return this; ));Dengan cara itu ia akan berfungsi dengan rantai. Sekiranya anda tidak melakukannya, dan seseorang mencuba sesuatu seperti:
$ (“Li”). MyMode (). Tunjukkan ();
Itu akan gagal, kerana .show()pada dasarnya tidak akan dipanggil apa-apa. Selalunya plugin jQuery dibuat untuk melengkapkan setiap elemen sehingga anda mempunyai akses langsung ke setiap elemen individu dalam set untuk melakukan seperti yang anda perlukan.
Satu lagi perkara yang baik untuk dilakukan adalah membungkus plugin dalam Ekspresi Fungsi Segera Dipanggil dan meneruskan jQuery sebagai parameter kepadanya. Dengan cara itu anda dapat menggunakan $ di dalam kod pemalam anda dengan lebih selamat. Ini kerana dalam beberapa keadaan $ shorthand untuk jQuery tidak tersedia (misalnya pengguna telah menggunakan jQuery dalam "mod keserasian").
Dengan kedua-dua perkara terakhir ini, struktur pemalam menjadi:
(function($) ( $.fn.myMethod = function() ( return this.each(function() ( // do things )); ); ))(jQuery)Pada screencast akhirnya kami membina plugin sederhana untuk menambahkan anak panah ke hujung elemen apa pun.
Lihat Pen rwasH oleh Chris Coyier (@chriscoyier) di CodePen
Sudah tentu, ia boleh menjadi lebih kompleks kerana cita-cita anda untuk melakukan lebih banyak meningkat.