Setelah memahami asas-asas pengembangan plugin, kita dapat menggali sedikit lebih mendalam. Kerana akhirnya plugin adalah fungsi, ia menyediakan ruang lingkup yang perlu kita aturkan. Ingat ketika kita mendapat rumah dengan teratur ketika kita belajar mengenai templat? Kita boleh menggunakan beberapa konsep yang sama dalam pemalam.
Tetapi pertama, saya rasa seni bina plugin jQuery dapat memanfaatkan beberapa kod boilerplate. Mungkin anda biasa dengan HTML5 Boilerplate yang menyediakan sekumpulan default pintar. Plat boiler jQuery adalah jenis perkara yang sama. Menjimatkan sebilangan taip dan membuat anda melalui jalan pengembangan pintar.
Saya menemui projek yang secara harfiah disebut jQuery Boilerplate yang saya rasa agak baik. Tetapi saya tidak terlalu banyak menggali perkara itu. Sebaliknya, saya suka Starter oleh Doug Neiner. Anda memberikan nama, beberapa lalai, dan beberapa pilihan dan itu akan menghasilkan struktur papan pemanas untuk anda.
Kami memutuskan untuk membuat slider bernama lodgeSlider dengan parameter kelajuan sederhana dan berakhir dengan kod 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 perkara yang kelihatan biasa. Terdapat IIFE yang membungkus plugin untuk keselamatan. Terdapat fungsi yang dibuat dari objek jQuery. Terdapat fungsi init yang dipanggil dengan segera. Terdapat kaedah yang dibuat dari objek jQuery yang mengembalikan objek jQuery. Terdapat pemboleh ubah yang dibuat rujukan cache yang mungkin akan kita gunakan lagi. Sebilangan besar barang yang pernah kita lihat sebelum ini.
Mungkin dua perkara baru. Salah satunya adalah objek pilihan di sana. Anda dapat melihat nilai 300 berkod keras. Tetapi lihat juga garis dengan $.extend(). Itulah fungsi jQuery untuk menggabungkan dua objek menjadi satu dengan yang lebih diutamakan daripada yang lain. Apabila kita memanggil pemalam, mungkin seperti ini:
$("#slider-1").lodgeslider();Kami tidak mempunyai pilihan, dan objek kosong itu digabungkan dengan objek berkod keras kami, dan nilai lalai tersedia di dalam pemalam. Tetapi kita boleh menyebutnya seperti ini:
$("#slider-1").lodgeslider(( speed: 500 ));Kami meneruskan objek sebagai parameter di sana. Objek itu digabungkan dengan objek keras kita, diutamakan, dan nilai yang kita lulus menjadi nilai yang tersedia di plugin. Cukup sejuk.
Perkara baru yang lain adalah pelik .data(). Kami membuat pemboleh ubah asas untuk merujuk fungsi itu sendiri, yang dibuat baru untuk setiap elemen yang dipanggil pemalam. Sebagai contoh, katakan kita memanggil pemalam $(".slider")- mungkin ada dua elemen di halaman dengan nama kelas slider. Setiap gelung berjalan, dan dua kejadian fungsi lodgeSlider dibuat. Dalam setiap satu, kami melampirkan rujukan ke elemen itu sendiri. Dengan cara itu kita dapat memanggil kaedah pemalam dalaman dari sebarang rujukan yang kita ada mengenai elemen tersebut.
Seperti mungkin:
$(".the-first-slider").data("lodgeSlider").changeSlide(2);Cukup memberi kita kaedah yang baik untuk menggunakan kaedah pemalam sekiranya kita perlu.
Kami tidak terlalu jauh dalam pengembaraan bangunan plugin ini:
Lihat Pen Building a Slider from Scratch oleh Chris Coyier (@chriscoyier) di CodePen
Sejujurnya dunia mungkin tidak memerlukan pemalam slaid lain. Tetapi, anda dapat melihat betapa kompleksnya mereka. Berikut adalah beberapa idea:
- Mungkin ada fungsi panggilan balik (atau peristiwa khusus) untuk sebelum dan sesudah slaid berubah, setelah slaid disiapkan, setelah dirobohkan, dll.
- Lebar dapat berdasarkan peratusan dan menghitung ulang ketika tetingkap penyemak imbas berubah.
- Navigasi dapat dibuat secara dinamis dan bukannya diperlukan dalam markup.
- ID dan #hash hrefs juga boleh dibuat secara dinamik.
- Acara sentuhan seperti sapu boleh ditambahkan untuk menjadikan slaid lebih mesra sentuhan (titik kecil tidak mesra sentuhan).
Semakin banyak perkara yang anda lakukan, semakin besar saiz pemalamnya. Itulah sebabnya bahawa keseimbangan antara ciri, kepraktisan, prestasi, dan ukuran sangat sukar dan di mana terdapat banyak plugin yang berbeza yang akhirnya melakukan perkara yang sama.