Le concept des getters et des setters en JavaScript n'est qu'une de ces choses que vous devez comprendre. Ils sont bien dans jQuery car l'API est si cohérente qu'une fois que vous l'avez obtenue, vous pouvez à peu près deviner comment cela fonctionnera pour diverses méthodes. Au niveau le plus élémentaire…
Les colons font quelque chose.
Les récupérateurs renvoient une valeur .
Souvent, une seule méthode peut être utilisée dans les deux cas. Prenons la méthode de la hauteur par exemple.
// Used as a "setter" - will set the height $("#example").height(100); // Used as a "getter" - will return a value var theHeight = $("#example").height();Regarde la différence? Le setter passe un paramètre lorsque la méthode est utilisée. Le getter ne passe rien . C'est ainsi que jQuery sait quoi faire. Il teste simplement s'il y a un paramètre là ou non. Sinon, il se comporte comme un getter. S'il est là, il se comporte comme un passeur. C'est simplement une belle commodité d'API, plutôt que d'avoir des méthodes séparées comme getHeight et setHeight.
Il convient de noter qu'un getter utilisé seul ne fait rien.
// Useless $("#example").height();Et si vous définissez la valeur d'une variable à l'aide d'un setter, vous obtiendrez l'objet jQuery renvoyé.
// x will be a jQuery object containing #example var x = $("#example").height(100);Cela peut être déroutant, mais aussi un petit truc astucieux pour enregistrer du code. Si vous savez que vous devez à la fois mettre en cache cet objet jQuery et définir sa hauteur, autant le faire en une seule ligne de code.
Voir le Pen 8ff68485673396d452f650bfb437fb2a de Chris Coyier (@chriscoyier) sur CodePen
Est également mentionné dans l'article box-sizing: border-box;. Le dimensionnement de la boîte est une propriété CSS très utile. Je suis un grand partisan de le mettre sur tous les éléments, comme:
* ( box-sizing: border-box; )Comme indiqué dans la vidéo, cela rend également height()jQuery un peu plus prévisible et cohérent. Sans border-box set, height()est égal à la propriété height en CSS, ou quelle que soit la hauteur de l'élément naturellement, moins le remplissage et la bordure. Avec border-boxset, height()c'est exactement la hauteur que cet élément prend à l'écran, y compris le rembourrage et la bordure. Sans border-boxset, pour obtenir cela, vous devez utiliser outerHeight()dans jQuery.