Nyt kun olemme tarkastelleet jQuery-laajennusten käyttöä, on ehdottomasti syytä ymmärtää, miten myös ne rakennetaan. Koskimme jo lyhyesti sitä, että voit laajentaa alkuperäistä jQuery-objektia, jos haluat. Ihan kuin:
$.myFunction = function() ( console.log("I am a function on the jQuery object."); ); // call it $.myFunction();Mutta se ei ole erityisen hyödyllinen sinänsä. Jos haluat luoda uuden menetelmän jQuerylle, jonka voit kutsua joukolle elementtejä, sinun on tehtävä se näin:
$.fn.myMethod = function() ( // I'm a new method ));Tämä on täsmälleen sama asia kuin .prototyypin käyttö jQueryssä, ja uteliaille voit lukea lisää täältä. Näin tekeminen tarkoittaa, että voimme käyttää tätä uutta menetelmää joukko elementtejä. Kuten:
$("li").myMethod();Voit tehdä mitä haluat tämän menetelmän ohella, mutta ollaksesi eräänlainen hyvä jQuery-laajennuksen rakentaja, sinun tulee palauttaa samat elementit takaisin ulos laajennuksesta.
$.fn.myMethod = function() ( // Do some stuff return this; ));Tällä tavoin se toimii ketjutuksen kanssa. Jos et tee niin, ja joku kokeili jotain:
$ (“Li”). MyMethod (). Show ();
Se epäonnistuu, koska .show()sitä ei kutsuta olemaan mitään. Usein jQuery-laajennukset on muotoiltu silmukkaamaan jokaisen elementin yli, jotta sinulla on suora pääsy sarjaan kuuluviin yksittäisiin elementteihin tekemään niin kuin tarvitset.
Toinen hyvä kansalainen asia on kietoa laajennus välittömästi kutsutuksi funktiolausekkeeksi ja välittää jQuery-parametriksi sille. Näin voit käyttää $ laajennuskoodisi sisällä turvallisemmin. Tämä johtuu siitä, että joissakin tilanteissa $ Q-lyhenne jQuerylle ei ole käytettävissä (esim. Käyttäjä on käyttänyt jQueryä "yhteensopivuustilassa").
Molempien kahden viimeisen asian ollessa paikallaan, laajennuksen rakenteesta tulee:
(function($) ( $.fn.myMethod = function() ( return this.each(function() ( // do things )); ); ))(jQuery)Näyttöruudussa päädyimme rakentamaan yksinkertaisen laajennuksen nuolen lisäämiseksi minkä tahansa elementin loppuun.
Katso Chris Coyierin (@chriscoyier) kynän rwasH CodePenistä
Tietysti se voi olla monimutkaisempi, kun tavoitteesi tehdä enemmän nousee.