Teraz, gdy przyjrzeliśmy się używaniu wtyczek jQuery, absolutnie warto zrozumieć, jak je również zbudować. Już pokrótce wspomnieliśmy o tym, że jeśli chcesz, możesz rozszerzyć natywny obiekt jQuery. Tak jak:
$.myFunction = function() ( console.log("I am a function on the jQuery object."); ); // call it $.myFunction();Ale to nie jest szczególnie przydatne samo w sobie. Aby stworzyć nową metodę dla jQuery, którą możesz wywołać dla zestawu elementów, musisz to zrobić w następujący sposób:
$.fn.myMethod = function() ( // I'm a new method ));To jest dokładnie to samo, co używanie .prototype w jQuery, a dla ciekawskich możesz przeczytać więcej na ten temat tutaj. Zrobienie tego w ten sposób oznacza, że będziemy mogli użyć tej nowej metody na zestawie elementów. Lubić:
$("li").myMethod();Możesz robić, co chcesz, po stronie tej metody, ale aby być dobrym obywatelem budującym wtyczkę jQuery, powinieneś zwrócić ten sam zestaw elementów z powrotem z wtyczki.
$.fn.myMethod = function() ( // Do some stuff return this; ));W ten sposób będzie działać z łańcuchem. Jeśli tego nie zrobisz, a ktoś spróbował czegoś takiego:
$ („Li”). MyMethod (). Show ();
To by się nie powiodło, ponieważ .show()zasadniczo nie zostałoby wezwane. Często wtyczki jQuery są zaprojektowane tak, aby zapętlić każdy element, dzięki czemu masz bezpośredni dostęp do każdego elementu w zestawie, aby zrobić to, co musisz.
Inną rzeczą do zrobienia dla dobrego obywatela jest umieszczenie wtyczki w bezpośrednio wywołanym wyrażeniu funkcyjnym i przekazanie do niej jQuery jako parametru. W ten sposób możesz bezpieczniej używać znaku $ wewnątrz kodu wtyczki. Dzieje się tak, ponieważ w niektórych sytuacjach skrót $ dla jQuery jest niedostępny (np. Użytkownik użył jQuery w „trybie zgodności”).
Mając obie te ostatnie dwie rzeczy, struktura wtyczki staje się:
(function($) ( $.fn.myMethod = function() ( return this.each(function() ( // do things )); ); ))(jQuery)W screencastie stworzyliśmy prostą wtyczkę, aby dodać strzałkę na końcu dowolnego elementu.
Zobacz Pen rwasH autorstwa Chrisa Coyiera (@chriscoyier) na CodePen
Oczywiście może się to skomplikować, gdy Twoje ambicje, by zrobić więcej, wzrosną.