O conceito de getters e setters em JavaScript é apenas uma daquelas coisas que você deve entender. Eles são bons em jQuery porque a API é tão consistente que, depois de obtê-la, você pode praticamente adivinhar como funcionará para vários métodos. No nível mais básico ...
Os setters fazem alguma coisa.
Os getters retornam um valor .
Freqüentemente, um único método pode ser usado de qualquer maneira. Veja o método da altura, por exemplo.
// Used as a "setter" - will set the height $("#example").height(100); // Used as a "getter" - will return a value var theHeight = $("#example").height();Veja a diferença? O setter passa um parâmetro quando o método é usado. O getter não passa em nada . É assim que a própria jQuery sabe o que fazer. Ele apenas testa se há um parâmetro lá ou não. Caso contrário, ele se comporta como um getter. Se estiver lá, ele se comporta como um setter. É apenas uma boa conveniência da API, em vez de ter métodos separados como getHeight e setHeight.
É importante notar que um getter usado por si só não faz nada.
// Useless $("#example").height();E se você definir o valor de uma variável usando um setter, você obterá o objeto jQuery retornado.
// x will be a jQuery object containing #example var x = $("#example").height(100);Isso pode ser confuso, mas também um pequeno truque bacana para salvar o código. Se você sabe que precisa armazenar em cache esse objeto jQuery e definir sua altura, pode muito bem fazer isso em uma linha de código.
Veja a Caneta 8ff68485673396d452f650bfb437fb2a de Chris Coyier (@chriscoyier) no CodePen
Também mencionado no artigo é box-sizing: border-box;. O tamanho da caixa é uma propriedade CSS muito útil. Sou um grande defensor de defini-lo em todos os elementos, como:
* ( box-sizing: border-box; )Conforme observado no vídeo, isso também torna o height()jQuery um pouco mais previsível e consistente. Sem a caixa de borda definida, height()é igual à propriedade height em CSS, ou qualquer altura que o elemento naturalmente tenha, menos o preenchimento e a borda. Com border-boxset, height()é exatamente a altura que esse elemento ocupa na tela, incluindo preenchimento e borda. Sem border-boxdefinir, para conseguir isso, você precisa usar outerHeight()em jQuery.