Τώρα που κατανοούμε τα βασικά της ανάπτυξης προσθηκών, μπορούμε να σκάψουμε λίγο πιο βαθιά. Επειδή τελικά μια προσθήκη είναι μια λειτουργία, μας παρέχει το εύρος που πρέπει να οργανώσουμε. Θυμάστε όταν πήραμε το σπίτι μας με τάξη όταν μαθαίναμε για templating; Μπορούμε να χρησιμοποιήσουμε μερικές από αυτές τις ίδιες έννοιες σε ένα πρόσθετο.
Αλλά πρώτα, νομίζω ότι η αρχιτεκτονική plugin jQuery μπορεί να επωφεληθεί από κάποιον κώδικα boilerplate Ίσως είστε εξοικειωμένοι με το HTML5 Boilerplate που παρέχει πολλές έξυπνες προεπιλογές. Το boilerplate jQuery Plugin είναι το ίδιο πράγμα. Εξοικονομεί κάποια πληκτρολόγηση και σας οδηγεί σε μια πορεία έξυπνης ανάπτυξης.
Βρήκα ένα έργο που λέγεται κυριολεκτικά jQuery Boilerplate, το οποίο μάλλον είναι καλό. Αλλά δεν το έχω σκάψει πολύ. Αντ 'αυτού, μου αρέσει πολύ το Starter του Doug Neiner. Παρέχετε ένα όνομα, ορισμένες προεπιλογές και κάποιες επιλογές και θα δημιουργήσει αυτήν τη δομή boilerplate για εσάς.
Αποφασίζουμε να φτιάξουμε ένα ρυθμιστικό με όνομα lodgeSlider με μια απλή παράμετρο ταχύτητας και θα καταλήξουμε σε αυτόν τον κωδικό:
(function($)( $.lodgeSlider = function(el, options)( // To avoid scope issues, use 'base' instead of 'this' // to reference this class from internal events and functions. var base = this; // Access to jQuery and DOM versions of element base.$el = $(el); base.el = el; // Add a reverse reference to the DOM object base.$el.data("lodgeSlider", base); base.init = function()( base.options = $.extend((),$.lodgeSlider.defaultOptions, options); // Put your initialization code here ); // Sample Function, Uncomment to use // base.functionName = function(paramaters)( // // ); // Run initializer base.init(); ); $.lodgeSlider.defaultOptions = ( speed: 300 ); $.fn.lodgeSlider = function(options)( return this.each(function()( (new $.lodgeSlider(this, options)); )); ); ))(jQuery);Πολλά από αυτά πρέπει να φαίνονται οικεία. Υπάρχει ένα IIFE που τυλίγει το πρόσθετο για ασφάλεια. Υπάρχει μια συνάρτηση που δημιουργήθηκε από το αντικείμενο jQuery. Υπάρχει μια συνάρτηση init που ονομάζεται αμέσως. Υπάρχει μια μέθοδος που δημιουργήθηκε από το αντικείμενο jQuery που επιστρέφει ένα αντικείμενο jQuery. Υπάρχουν μεταβλητές που δημιουργούνται αναφορές προσωρινής αποθήκευσης που είναι πιθανό να χρησιμοποιήσουμε ξανά. Κυρίως πράγματα που έχουμε δει στο παρελθόν.
Ίσως δύο νέα πράγματα. Το ένα είναι το αντικείμενο επιλογών εκεί. Μπορείτε να δείτε την τιμή 300 με κωδικοποίηση. Αλλά επίσης δείτε τη γραμμή με $.extend(). Αυτή είναι μια συνάρτηση jQuery για το συνδυασμό δύο αντικειμένων σε ένα με το ένα να υπερισχύει του άλλου. Όταν καλούμε την προσθήκη, ίσως έτσι:
$("#slider-1").lodgeslider();Δεν περνάμε καμία επιλογή και αυτό το κενό αντικείμενο συνδυάζεται με το σκληρό κωδικοποιημένο αντικείμενο μας και οι προεπιλεγμένες τιμές είναι διαθέσιμες μέσα στην προσθήκη. Αλλά θα μπορούσαμε να το ονομάσουμε έτσι:
$("#slider-1").lodgeslider(( speed: 500 ));Περνάμε ένα αντικείμενο ως παράμετρο εκεί. Αυτό το αντικείμενο συνδυάζεται με το σκληρό κωδικοποιημένο αντικείμενο, υπερισχύει και η τιμή που περάσαμε γίνεται η διαθέσιμη τιμή στην προσθήκη. Πολύ ωραίο.
Το άλλο νέο πράγμα είναι ότι είναι περίεργο .data(). Δημιουργήσαμε τη βασική μεταβλητή για να αναφέρουμε την ίδια τη συνάρτηση, η οποία δημιουργείται εκ νέου για κάθε στοιχείο στο οποίο καλείται η προσθήκη. Για παράδειγμα, ας πούμε ότι κάναμε ενεργοποιημένη την προσθήκη $(".slider")- μπορεί να υπάρχουν δύο στοιχεία στη σελίδα με όνομα κλάσης slider. Ο κάθε βρόχος εκτελείται και δημιουργούνται δύο παρουσίες της συνάρτησης lodgeSlider. Σε κάθε ένα, επισυνάπτουμε μια αναφορά στο ίδιο το στοιχείο. Με αυτόν τον τρόπο μπορούμε να καλέσουμε εσωτερικές μεθόδους προσθηκών από οποιαδήποτε αναφορά που έχουμε για αυτό το στοιχείο.
Όπως ίσως:
$(".the-first-slider").data("lodgeSlider").changeSlide(2);Απλώς μας δίνει έναν ωραίο τρόπο να χρησιμοποιήσουμε μεθόδους προσθηκών εάν χρειαστεί.
Δεν φτάσαμε πολύ μακριά σε αυτήν την περιπέτεια δημιουργίας προσθηκών:
Δείτε το Pen Building a Slider from Scratch από τον Chris Coyier (@chriscoyier) στο CodePen
Ειλικρινά, ο κόσμος πιθανώς δεν χρειάζεται άλλο πρόσθετο slider. Αλλά, μπορείτε να δείτε πόσο περίπλοκο θα μπορούσαν να γίνουν. Ακολουθούν μερικές ιδέες:
- Θα μπορούσαν να υπάρχουν συναρτήσεις επιστροφής (ή προσαρμοσμένα συμβάντα) πριν και μετά την αλλαγή της διαφάνειας, μετά τη ρύθμιση του ρυθμιστικού, μετά την κατάρρευση, κ.λπ.
- Τα πλάτη θα μπορούσαν να βασίζονται σε ποσοστά και να υπολογίζονται εκ νέου όταν αλλάζει το παράθυρο του προγράμματος περιήγησης.
- Η πλοήγηση θα μπορούσε να δημιουργηθεί δυναμικά αντί να απαιτείται στη σήμανση.
- Τα αναγνωριστικά και το #hash hrefs θα μπορούσαν επίσης να δημιουργηθούν δυναμικά.
- Θα μπορούσαν να προστεθούν συμβάντα αφής, όπως ολίσθηση, για να κάνουν το ρυθμιστικό πιο φιλικό στην αφή (οι μικρές κουκκίδες δεν είναι φιλικές προς την αφή).
Όσο περισσότερα από αυτά κάνετε, τόσο μεγαλύτερο είναι το μέγεθος της προσθήκης. Γι 'αυτό, η επίτευξη αυτής της ισορροπίας μεταξύ χαρακτηριστικών, πρακτικότητας, απόδοσης και μεγέθους είναι τόσο δύσκολη και όπου υπάρχουν τόσα πολλά διαφορετικά πρόσθετα που τελικά κάνουν το ίδιο πράγμα.