Nüüd, kui oleme uurinud jQuery pistikprogrammide kasutamist, tasub kindlasti mõista, kuidas neid ka üles ehitada. Puudutasime juba lühidalt fakti, et soovi korral saate laiendada natiivset jQuery objekti. Just nagu:
$.myFunction = function() ( console.log("I am a function on the jQuery object."); ); // call it $.myFunction();Kuid see pole iseenesest eriti kasulik. JQuery jaoks uue meetodi loomiseks, mida saate kutsuda elementide komplektile, peate seda tegema järgmiselt:
$.fn.myMethod = function() ( // I'm a new method ));See on täpselt sama asi kui .prototype'i kasutamine jQuery's ja uudishimulike jaoks saate selle kohta rohkem lugeda siit. Nii tehes tähendab see, et saame seda uut meetodit elementide komplektis kasutada. Nagu:
$("li").myMethod();Selle meetodi kõrval saate teha kõike, mida soovite, kuid selleks, et olla hea jQuery pistikprogrammi loomise kodanik, peaksite sama elementide komplekti pistikprogrammist tagasi saatma.
$.fn.myMethod = function() ( // Do some stuff return this; ));Nii töötab see aheldamisega. Kui te seda ei tee, ja keegi proovis midagi sellist:
$ (“Li”). MyMethod (). Show ();
See ebaõnnestub, sest .show()seda ei kutsuta sisuliselt mitte millegi peale. Sageli on jQuery pistikprogrammid kujundatud iga elemendi üle silitama, nii et teil oleks otsene juurdepääs komplekti igale üksikule elemendile, mida peate tegema vastavalt vajadusele.
Teine hea kodaniku asi, mida teha, on pakkida pistikprogramm kohe kutsutud funktsiooni avaldisesse ja edastada sellele parameetrina jQuery. Nii saate oma pistikprogrammi koodi sees olevat dollarit turvalisemalt kasutada. Seda seetõttu, et mõnes olukorras pole jQuery jaoks $ shorthand saadaval (nt kasutaja on jQueryd kasutanud "ühilduvusrežiimis").
Kui need kaks viimast asja on paigas, saab pistikprogrammi struktuur:
(function($) ( $.fn.myMethod = function() ( return this.each(function() ( // do things )); ); ))(jQuery)Stsenaariumis ehitasime lõpuks lihtsa pistikprogrammi, et lisada nool mis tahes elemendi lõppu.
Vaadake CodePenil Chris Coyieri (@chriscoyier) pliiatsi rwasH
Muidugi võib see muutuda keerukamaks, kui teie ambitsioon rohkem ära teha suureneb.