Tagad, kad esam apskatījuši jQuery spraudņu izmantošanu, ir absolūti vērts saprast, kā tos arī izveidot. Mēs jau īsi pieskārāmies faktam, ka, ja vēlaties, varat paplašināt vietējo jQuery objektu. Tieši kā:
$.myFunction = function() ( console.log("I am a function on the jQuery object."); ); // call it $.myFunction();Bet tas pats par sevi nav īpaši noderīgs. Lai izveidotu jaunu metodi jQuery, kuru varat izsaukt uz elementu kopu, jums tas jādara šādi:
$.fn.myMethod = function() ( // I'm a new method ));Tas ir tieši tas pats, kas izmantot .prototype vietnē jQuery, un ziņkārīgajiem varat uzzināt vairāk par to šeit. Šādi rīkojoties, mēs varēsim izmantot jauno metodi elementu kopai. Patīk:
$("li").myMethod();Jūs varat darīt visu, ko vēlaties, izmantojot šo metodi, taču, lai būtu labs jQuery spraudņa veidošanas pilsonis, jums jāatgriež tas pats elementu kopums no spraudņa.
$.fn.myMethod = function() ( // Do some stuff return this; ));Tādā veidā tas darbosies ar ķēdēm. Ja jūs to nedarāt, un kāds mēģināja kaut ko līdzīgu:
$ (“Li”). MyMethod (). Parādīt ();
Tas neizdosies, jo .show()pēc būtības neko neizsauktu. Bieži vien jQuery spraudņi ir izveidoti, lai pārietu katram elementam, lai jums būtu tieša piekļuve katram atsevišķam komplekta elementam, lai to izdarītu pēc nepieciešamības.
Vēl viena laba pilsoņa lieta, kas jādara, ir iesaiņot spraudni tūlīt izsauktā funkciju izteiksmē un nodot jQuery kā parametru tai. Tādā veidā jūs varat drošāk izmantot $ spraudņa kodā. Tas ir tāpēc, ka dažās situācijās jQuery $ stenogrāfs nav pieejams (piemēram, lietotājs jQuery ir izmantojis “saderības režīmā”).
Ar abām šīm divām pēdējām lietām spraudņa struktūra kļūst:
(function($) ( $.fn.myMethod = function() ( return this.each(function() ( // do things )); ); ))(jQuery)Ekrānā mēs izveidojām vienkāršu spraudni, lai jebkura elementa beigās pievienotu bultiņu.
Skatiet Krāsa Koijera (@chriscoyier) Pen rwasH vietnē CodePen
Protams, tas var kļūt sarežģītāks, jo pieaug jūsu ambīcijas darīt vairāk.