Η έννοια του getter και setter στο JavaScript είναι μόνο ένα από αυτά τα πράγματα που πρέπει να καταλάβετε. Είναι καλοί στο jQuery, επειδή το API είναι τόσο συνεπές που μόλις το αποκτήσετε, μπορείτε να μαντέψετε σχεδόν πώς λειτουργεί για διάφορες μεθόδους. Στο πιο βασικό επίπεδο…
Οι ρυθμιστές κάνουν κάτι.
Οι λήπτες επιστρέφουν μια τιμή .
Συχνά μία μέθοδος μπορεί να χρησιμοποιηθεί με κάθε τρόπο. Πάρτε για παράδειγμα τη μέθοδο ύψους.
// Used as a "setter" - will set the height $("#example").height(100); // Used as a "getter" - will return a value var theHeight = $("#example").height();Βλέπεις τη διαφορά? Ο ρυθμιστής περνά μια παράμετρο όταν χρησιμοποιείται η μέθοδος. Ο λήπτης δεν περνά τίποτα . Έτσι ξέρει τι να κάνει το ίδιο το jQuery. Απλώς ελέγχει εάν υπάρχει παράμετρος εκεί ή όχι. Αν όχι, συμπεριφέρεται σαν κατακτητής. Εάν είναι εκεί, συμπεριφέρεται σαν ρυθμιστής. Είναι απλώς μια ωραία ευκολία API, αντί να έχουμε ξεχωριστές μεθόδους όπως το getHeight και το setHeight.
Αξίζει να σημειωθεί ότι ένα άτομο που χρησιμοποιεί δεν κάνει τίποτα
// Useless $("#example").height();Και αν ορίσετε την τιμή μιας μεταβλητής χρησιμοποιώντας ένα setter, θα λάβετε το αντικείμενο jQuery.
// x will be a jQuery object containing #example var x = $("#example").height(100);Αυτό μπορεί να είναι μια σύγχυση μαλλιών, αλλά και ένα καλό μικρό τέχνασμα για την εξοικονόμηση κώδικα. Αν γνωρίζετε ότι πρέπει να αποθηκεύσετε τόσο το αντικείμενο jQuery όσο και να ορίσετε το ύψος του, ίσως το κάνετε και σε μια γραμμή κώδικα.
Δείτε το στυλό 8ff68485673396d452f650bfb437fb2a του Chris Coyier (@chriscoyier) στο CodePen
Επίσης αναφέρεται στο άρθρο είναι box-sizing: border-box;. Το μέγεθος του κουτιού είναι μια εξαιρετικά χρήσιμη ιδιότητα CSS. Είμαι μεγάλος υποστηρικτής της ρύθμισής του σε όλα τα στοιχεία, όπως:
* ( box-sizing: border-box; )Όπως σημειώνεται στο βίντεο, αυτό κάνει επίσης height()στο jQuery λίγο πιο προβλέψιμο και συνεπές. Χωρίς σετ περιγράμματος-πλαισίου, height()ισούται με την ιδιότητα ύψους σε CSS, ή οποιοδήποτε ύψος είναι το στοιχείο φυσικά, μείον την επένδυση και το περίγραμμα. Με το border-boxσετ, height()είναι ακριβώς το ύψος που παίρνει αυτό το στοιχείο στην οθόνη, συμπεριλαμβανομένης της επένδυσης και του περιγράμματος. Χωρίς border-boxσετ, για να το αποκτήσετε, πρέπει να το χρησιμοποιήσετε outerHeight()στο jQuery.