Il concetto di getter e setter in JavaScript è solo una di quelle cose che dovresti capire. Sono carini in jQuery perché l'API è così coerente che una volta ottenuta, puoi praticamente indovinare come funzionerà per vari metodi. Al livello più elementare ...
I setter fanno qualcosa.
I getter restituiscono un valore .
Spesso un singolo metodo può essere utilizzato in entrambi i modi. Prendi il metodo dell'altezza per esempio.
// Used as a "setter" - will set the height $("#example").height(100); // Used as a "getter" - will return a value var theHeight = $("#example").height();Vedi la differenza? Il setter passa un parametro quando viene utilizzato il metodo. Il getter non passa nulla . È così che jQuery stesso sa cosa fare. Verifica solo se c'è un parametro lì o no. In caso contrario, si comporta come un getter. Se è lì, si comporta come un setter. È semplicemente una bella comodità API, piuttosto che avere metodi separati come getHeight e setHeight.
Vale la pena notare che un getter usato da solo non fa nulla.
// Useless $("#example").height();E se imposti il valore di una variabile utilizzando un setter, otterrai restituito l'oggetto jQuery.
// x will be a jQuery object containing #example var x = $("#example").height(100);Questo può creare confusione, ma anche un piccolo trucco ingegnoso per salvare il codice. Se sai che è necessario memorizzare nella cache l'oggetto jQuery e impostarne l'altezza, potresti anche farlo in una riga di codice.
Vedi la penna 8ff68485673396d452f650bfb437fb2a di Chris Coyier (@chriscoyier) su CodePen
Anche menzionato nell'articolo è box-sizing: border-box;. Il dimensionamento della scatola è una proprietà CSS super utile. Sono un grande sostenitore dell'impostazione su tutti gli elementi, come:
* ( box-sizing: border-box; )Come notato nel video, questo rende anche height()jQuery un po 'più prevedibile e coerente. Senza border-box set, height()è uguale alla proprietà height in CSS, o qualunque altezza sia naturalmente l'elemento, meno il padding e il bordo. Con border-boxset, height()è esattamente l'altezza che l'elemento occupa sullo schermo, inclusi padding e bordo. Senza border-boxset, per ottenerlo, è necessario utilizzarlo outerHeight()in jQuery.