Acum că ne-am uitat la utilizarea pluginurilor jQuery, merită absolut să înțelegem și cum să le construim. Am atins deja pe scurt faptul că puteți extinde obiectul nativ jQuery dacă doriți. La fel ca:
$.myFunction = function() ( console.log("I am a function on the jQuery object."); ); // call it $.myFunction();Dar acest lucru nu este deosebit de util de la sine. Pentru a crea o nouă metodă pentru jQuery pe care o puteți apela la un set de elemente, va trebui să o faceți astfel:
$.fn.myMethod = function() ( // I'm a new method ));Acesta este exact același lucru cu utilizarea prototipului .prototype pe jQuery, iar pentru curioși puteți citi mai multe despre asta aici. A face acest lucru înseamnă că vom putea folosi acea nouă metodă pe un set de elemente. Ca:
$("li").myMethod();Puteți face tot ceea ce doriți, alături de această metodă, dar pentru a fi un bun cetățean care construiește un plugin jQuery, ar trebui să returnați același set de elemente înapoi din plugin.
$.fn.myMethod = function() ( // Do some stuff return this; ));În acest fel, va funcționa cu înlănțuirea. Dacă nu faci asta, și cineva a încercat ceva de genul:
$ („Li”). MyMethod (). Show ();
Acest lucru ar eșua, deoarece .show()ar fi apelat în esență la nimic. Adesea, pluginurile jQuery sunt concepute să facă o buclă peste fiecare element, astfel încât să aveți acces direct la fiecare element individual din set pentru a face ceea ce trebuie.
Un alt lucru bun de făcut de cetățean este să înfășurați un plugin într-o expresie de funcție imediat invocată și să treceți în jQuery ca parametru. În acest fel, puteți utiliza $ în interiorul codului pluginului mai sigur. Acest lucru se datorează faptului că, în unele situații, stenograma $ pentru jQuery nu este disponibilă (de exemplu, un utilizator a folosit jQuery în „modul de compatibilitate”).
Cu ambele ultime două lucruri la locul lor, o structură de plugin devine:
(function($) ( $.fn.myMethod = function() ( return this.each(function() ( // do things )); ); ))(jQuery)În screencast am ajuns să construim un plugin simplu pentru a adăuga o săgeată la capătul oricărui element.
Vedeți Pen rwasH de Chris Coyier (@chriscoyier) pe CodePen
Desigur, poate deveni mai complex pe măsură ce ambiția ta de a face mai mult crește.