Artık jQuery eklentilerini kullanmaya baktığımıza göre, bunların nasıl oluşturulacağını da kesinlikle anlamaya değer. İsterseniz yerel jQuery nesnesini genişletebileceğiniz gerçeğine kısaca değindik. Tıpkı:
$.myFunction = function() ( console.log("I am a function on the jQuery object."); ); // call it $.myFunction();Ancak bu kendi başına özellikle yararlı değil. JQuery için bir dizi öğeyi çağırabileceğiniz yeni bir yöntem oluşturmak için, bunu şu şekilde yapmanız gerekir:
$.fn.myMethod = function() ( // I'm a new method ));Bu, jQuery'de .prototype kullanmakla tamamen aynı şeydir ve merak edenler için, buradan daha fazla bilgi edinebilirsiniz. Bu şekilde yapmak, bu yeni yöntemi bir dizi öğe üzerinde kullanabileceğimiz anlamına gelir. Sevmek:
$("li").myMethod();Bu yöntemde istediğinizi yapabilirsiniz, ancak iyi bir jQuery eklentisi oluşturmak için, aynı unsurları eklentiden geri göndermelisiniz.
$.fn.myMethod = function() ( // Do some stuff return this; ));Bu şekilde zincirleme ile çalışacaktır. Bunu yapmazsanız ve birisi şöyle bir şey denerse:
$ ("Li"). MyMethod (). Show ();
Bu başarısız olur, çünkü .show()esasen hiçbir şeye çağrılmayacaktır. Genellikle jQuery eklentileri, ihtiyaç duyduğunuz her şeyi yapmak için kümedeki her bir öğeye doğrudan erişebilmeniz için her öğe üzerinde döngü oluşturacak şekilde biçimlendirilir.
Yapılması gereken bir başka iyi vatandaşlık şey de, bir eklentiyi Hemen Çağırılan Fonksiyon İfadesine sarmak ve ona bir parametre olarak jQuery'yi iletmektir. Bu şekilde eklenti kodunuzun içindeki $ 'ı daha güvenli bir şekilde kullanabilirsiniz. Bunun nedeni, bazı durumlarda jQuery için $ kısaltmanın kullanılamamasıdır (örneğin, bir kullanıcı jQuery'yi “uyumluluk modunda” kullanmıştır).
Bu son iki şeyin her ikisi de yerinde olduğunda, bir eklenti yapısı şu hale gelir:
(function($) ( $.fn.myMethod = function() ( return this.each(function() ( // do things )); ); ))(jQuery)Ekran yayınında, herhangi bir öğenin sonuna bir ok eklemek için basit bir eklenti oluşturduk.
CodePen'de Chris Coyier (@chriscoyier) tarafından Kalem rwasH'yi görün
Elbette, daha fazlasını yapma hırsınız arttıkça daha karmaşık hale gelebilir.