Sekarang setelah kita memahami dasar-dasar pengembangan plugin, kita bisa menggali lebih dalam. Karena pada akhirnya plugin adalah sebuah fungsi, plugin memberi kita ruang lingkup yang perlu kita atur. Ingatkah saat kita menata rumah kita saat kita belajar tentang template? Kita bisa menggunakan beberapa konsep yang sama di sebuah plugin.
Tapi pertama-tama, saya pikir arsitektur plugin jQuery bisa mendapatkan keuntungan dari beberapa kode boilerplate. Mungkin Anda sudah familiar dengan HTML5 Boilerplate yang menyediakan banyak default cerdas. Boilerplate Plugin jQuery adalah hal yang sama. Menghemat beberapa pengetikan dan membuat Anda mengikuti jalur pengembangan cerdas.
Saya menemukan sebuah proyek yang secara harfiah disebut jQuery Boilerplate yang menurut saya bagus. Tapi aku belum banyak menggali yang itu. Sebaliknya, saya cukup menyukai Starter oleh Doug Neiner. Anda memberikan nama, beberapa default, dan beberapa pilihan dan itu akan menghasilkan struktur boilerplate untuk Anda.
Kami memutuskan untuk membuat slider bernama lodgeSlider dengan parameter kecepatan sederhana dan berakhir dengan kode ini:
(function($)( $.lodgeSlider = function(el, options)( // To avoid scope issues, use 'base' instead of 'this' // to reference this class from internal events and functions. var base = this; // Access to jQuery and DOM versions of element base.$el = $(el); base.el = el; // Add a reverse reference to the DOM object base.$el.data("lodgeSlider", base); base.init = function()( base.options = $.extend((),$.lodgeSlider.defaultOptions, options); // Put your initialization code here ); // Sample Function, Uncomment to use // base.functionName = function(paramaters)( // // ); // Run initializer base.init(); ); $.lodgeSlider.defaultOptions = ( speed: 300 ); $.fn.lodgeSlider = function(options)( return this.each(function()( (new $.lodgeSlider(this, options)); )); ); ))(jQuery);Banyak dari itu seharusnya terlihat familiar. Ada IIFE yang membungkus plugin untuk keamanan. Ada fungsi yang dibuat dari objek jQuery. Ada fungsi init dipanggil segera. Ada metode yang dibuat dari objek jQuery yang mengembalikan objek jQuery. Ada variabel yang dibuat sebagai referensi cache yang kemungkinan besar akan kami gunakan lagi. Kebanyakan hal yang pernah kita lihat sebelumnya.
Mungkin dua hal baru. Salah satunya adalah objek opsi di sana. Anda dapat melihat nilai 300 yang di-hardcode. Tapi lihat juga garisnya dengan $.extend(). Itu adalah fungsi jQuery untuk menggabungkan dua objek menjadi satu dengan satu lebih diutamakan daripada yang lain. Saat kita memanggil plugin, mungkin seperti ini:
$("#slider-1").lodgeslider();Kami tidak memberikan opsi, dan objek kosong itu digabungkan dengan objek hard-coded kami, dan nilai default tersedia di dalam plugin. Tapi kita juga bisa menyebutnya seperti ini:
$("#slider-1").lodgeslider(( speed: 500 ));Kami mengirimkan objek sebagai parameter di sana. Objek itu digabungkan dengan objek hard-coded kami, diutamakan, dan nilai yang kami berikan menjadi nilai yang tersedia di plugin. Sangat keren.
Hal baru lainnya adalah sedikit aneh dengan .data(). Kami membuat variabel dasar untuk mereferensikan fungsi itu sendiri, yang dibuat lagi untuk setiap elemen yang dipanggil plugin. Misalnya, kita memanggil plugin di $(".slider")- mungkin ada dua elemen pada halaman dengan nama kelas slider. Setiap loop berjalan, dan dua instance fungsi lodgeSlider dibuat. Di masing-masing, kami melampirkan referensi ke elemen itu sendiri. Dengan begitu kita dapat memanggil metode plugin internal dari referensi apa pun yang kita miliki tentang elemen itu.
Seperti mungkin:
$(".the-first-slider").data("lodgeSlider").changeSlide(2);Hanya memberi kami cara yang bagus untuk menggunakan metode plugin jika kami perlu.
Kami tidak terlalu jauh dalam petualangan membangun plugin ini:
Lihat Pena Membangun Penggeser dari Awal oleh Chris Coyier (@chriscoyier) di CodePen
Sejujurnya dunia mungkin tidak membutuhkan plugin slider lain. Tapi, Anda bisa melihat betapa rumitnya mereka. Ini hanya beberapa ide:
- Mungkin ada fungsi panggilan balik (atau acara khusus) untuk sebelum dan sesudah perubahan slide, setelah slider diatur, setelah itu dirobohkan, dll.
- Lebarnya bisa berdasarkan persentase dan dihitung ulang saat jendela browser berubah.
- Navigasi dapat dibuat secara dinamis daripada diwajibkan dalam markup.
- ID dan #hash hrefs dapat dibuat secara dinamis juga.
- Peristiwa sentuh seperti gesekan dapat ditambahkan untuk membuat penggeser lebih ramah sentuhan (titik-titik kecil tidak ramah sentuhan).
Semakin banyak hal yang Anda lakukan, semakin besar ukuran plugin. Itulah mengapa menyeimbangkan antara fitur, kepraktisan, kinerja, dan ukuran sangat rumit dan terdapat begitu banyak plugin berbeda yang pada akhirnya melakukan hal yang sama.