Artık eklenti geliştirmenin temellerini anladığımıza göre, biraz daha derine inebiliriz. Nihayetinde bir eklenti bir işlev olduğu için, bize düzenlememiz gereken kapsamı sağlar. Şablon yapmayı öğrenirken evimizi düzenlediğimiz zamanı hatırlıyor musunuz? Aynı kavramlardan bazılarını bir eklentide kullanabiliriz.
Ama önce, jQuery eklenti mimarisinin bazı standart kodlardan yararlanabileceğini düşünüyorum. Belki de bir sürü akıllı varsayılan sağlayan HTML5 Boilerplate'i biliyorsunuzdur. Bir jQuery Eklentisi ortak metni aynı türden bir şeydir. Yazı yazmaktan tasarruf sağlar ve sizi akıllı bir geliştirme yoluna götürür.
Kelimenin tam anlamıyla jQuery Boilerplate adlı bir projeyle karşılaştım ki bunun iyi olduğunu tahmin ediyorum. Ama bu konuya pek girmedim. Bunun yerine, Starter by Doug Neiner'ı çok beğeniyorum. Bir ad, bazı varsayılanlar ve bazı seçenekler sağlarsınız ve bu, sizin için bu standart yapıyı oluşturacaktır.
Basit bir hız parametresi ile lodgeSlider adında bir kaydırıcı yapmaya karar veriyoruz ve bu kodla son buluyoruz:
(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);Bunların çoğu tanıdık gelmeli. Güvenlik için eklentiyi saran bir IIFE var. JQuery nesnesinden oluşturulan bir işlev var. Hemen çağrılan bir init işlevi var. Bir jQuery nesnesi döndüren jQuery nesnesinden oluşturulan bir yöntem vardır. Yeniden kullanacağımız önbelleğe alma referansları oluşturulmuş değişkenler var. Çoğunlukla daha önce gördüğümüz şeyler.
Belki iki yeni şey. Biri oradaki seçenekler nesnesidir. Sabit kodlanmış 300 değerini görebilirsiniz. Ama aynı zamanda çizgiye de bakın $.extend(). Bu, iki nesneyi biri diğerinden öncelikli olacak şekilde birleştiren bir jQuery işlevidir. Eklentiyi aradığımızda, belki şu şekilde:
$("#slider-1").lodgeslider();Hiçbir seçenek sunmuyoruz ve bu boş nesne sabit kodlanmış nesnemizle birleştiriliyor ve varsayılan değerler eklenti içinde mevcut. Ama biz de şöyle diyebiliriz:
$("#slider-1").lodgeslider(( speed: 500 ));Oraya parametre olarak bir nesne geçiriyoruz. Bu nesne, sabit kodlanmış nesnemizle birleştirilir, öncelik kazanır ve aktardığımız değer, eklentide bulunan değer haline gelir. Oldukça havalı.
Diğer yeni şey ise biraz tuhaf .data(). Temel değişkeni, eklentinin çağrıldığı her öğe için yeniden oluşturulan, fonksiyonun kendisine referans vermek için oluşturduk. Örneğin, eklentiyi çağırdığımızı varsayalım $(".slider")- sayfada sınıf adı olan iki öğe olabilir slider. Her döngü çalışır ve lodgeSlider işlevinin iki örneği yapılır. Her birinde, elemanın kendisine bir referans ekliyoruz. Bu şekilde, o öğenin sahip olduğumuz herhangi bir referanstan dahili eklenti yöntemlerini çağırabiliriz.
Belki gibi:
$(".the-first-slider").data("lodgeSlider").changeSlide(2);Gerekirse eklenti yöntemlerini kullanmak için bize güzel bir yol sağlar.
Bu eklenti oluşturma macerasında çok fazla ileri gitmedik:
CodePen'de Chris Coyier (@chriscoyier) tarafından Scratch'ten Kaydırıcı Yapan Kalem'i görün
Dürüst olmak gerekirse, dünyanın muhtemelen başka bir kaydırıcı eklentisine ihtiyacı yoktur. Ancak, ne kadar karmaşık olabileceklerini görebilirsiniz. İşte birkaç fikir:
- Slayt değişikliklerinden önce ve sonra, kaydırıcı ayarlandıktan sonra, parçalandıktan sonra vb. Geri çağırma işlevleri (veya özel etkinlikler) olabilir.
- Genişlikler yüzdeye dayalı olabilir ve tarayıcı penceresi değiştiğinde yeniden hesaplanabilir.
- Gezinme, işaretlemede gerekli olmak yerine dinamik olarak oluşturulabilir.
- Kimlikler ve #hash href'ler de dinamik olarak oluşturulabilir.
- Kaydırıcıyı daha dokunma dostu hale getirmek için kaydırma gibi dokunma etkinlikleri eklenebilir (küçük noktalar dokunmaya uygun değildir).
Ne kadar çok şey yaparsanız, eklentinin boyutu o kadar büyük olur. Bu nedenle özellikler, pratiklik, performans ve boyut arasındaki dengeyi sağlamak çok zordur ve sonuçta aynı şeyi yapan çok sayıda farklı eklenti vardır.