Τώρα που εξετάσαμε τη χρήση προσθηκών jQuery, αξίζει να κατανοήσουμε πώς να τα δημιουργήσουμε επίσης. Έχουμε ήδη αγγίξει εν συντομία το γεγονός ότι μπορείτε να επεκτείνετε το εγγενές αντικείμενο jQuery εάν θέλετε. Οπως ακριβώς:
$.myFunction = function() ( console.log("I am a function on the jQuery object."); ); // call it $.myFunction();Αλλά αυτό δεν είναι ιδιαίτερα χρήσιμο από μόνο του. Για να δημιουργήσετε μια νέα μέθοδο για το jQuery που μπορείτε να καλέσετε σε ένα σύνολο στοιχείων, θα πρέπει να το κάνετε ως εξής:
$.fn.myMethod = function() ( // I'm a new method ));Αυτό είναι ακριβώς το ίδιο με τη χρήση του .prototype στο jQuery και για τους περίεργους, μπορείτε να διαβάσετε περισσότερα γι 'αυτό εδώ. Με αυτόν τον τρόπο σημαίνει ότι θα είμαστε σε θέση να χρησιμοποιήσουμε αυτήν τη νέα μέθοδο σε ένα σύνολο στοιχείων. Αρέσει:
$("li").myMethod();Μπορείτε να κάνετε ό, τι θέλετε παράλληλα με αυτήν τη μέθοδο, αλλά για να είστε καλός πολίτης του jQuery plugin building θα πρέπει να επιστρέψετε το ίδιο σύνολο στοιχείων πίσω από την προσθήκη.
$.fn.myMethod = function() ( // Do some stuff return this; ));Με αυτόν τον τρόπο θα λειτουργήσει με αλυσίδα. Εάν δεν το κάνετε αυτό και κάποιος δοκίμασε κάτι όπως:
$ ("Li"). MyMethod (). Εμφάνιση ();
Αυτό θα απέτυχε, γιατί .show()δεν θα καλούσε ουσιαστικά τίποτα. Συχνά, τα πρόσθετα jQuery είναι διαμορφωμένα ώστε να περνούν κάθε στοιχείο έτσι ώστε να έχετε άμεση πρόσβαση σε κάθε μεμονωμένο στοιχείο στο σύνολο για να κάνετε όπως πρέπει.
Ένα άλλο καλό πολίτη που πρέπει να κάνετε είναι να τυλίξετε ένα πρόσθετο σε μια έκφραση άμεσης επίκλησης λειτουργίας και να περάσετε στο jQuery ως παράμετρο σε αυτό. Με αυτόν τον τρόπο μπορείτε να χρησιμοποιήσετε τον κωδικό $ εντός του plugin σας με μεγαλύτερη ασφάλεια. Αυτό συμβαίνει επειδή σε ορισμένες περιπτώσεις το $ shorthand για jQuery δεν είναι διαθέσιμο (π.χ. ένας χρήστης έχει χρησιμοποιήσει το jQuery στη "λειτουργία συμβατότητας").
Με τα δύο αυτά τελευταία πράγματα στη θέση τους, μια δομή προσθηκών γίνεται:
(function($) ( $.fn.myMethod = function() ( return this.each(function() ( // do things )); ); ))(jQuery)Στο screencast καταλήξαμε να δημιουργήσουμε ένα απλό plugin για να προσθέσουμε ένα βέλος στο τέλος οποιουδήποτε στοιχείου.
Δείτε το Pen rwasH του Chris Coyier (@chriscoyier) στο CodePen
Φυσικά, μπορεί να γίνει πιο περίπλοκο καθώς αυξάνεται η φιλοδοξία σας να κάνετε περισσότερα.