jQuery : ce qu'il est "interdit" de faire en simple Javascript

Question

Une question sur les meilleures pratiques de jQuery.

Je suis en train d'écrire une page web qui utilise beaucoup de jQuery. Je suis nouveau dans l'utilisation de jQuery et j'ai remarqué sa puissance, mais comme j'ai une expérience et des connaissances approfondies en javascript, ma question est la suivante : que faut-il faire avec jQuery et que faut-il faire avec le simple javascript.

Par exemple, il existe des callbacks qui envoient un objet DOM simple comme argument. Dois-je utiliser cela ou dois-je l'envelopper ( comme $(this) ).

Est-ce important si je fais this.x=y ou $(this).attr("x", y).

Answer 1

Si votre fonction reçoit un objet DOM et que vous n'avez pas besoin d'une fonctionnalité jQuery pour cet objet DOM, il n'est pas nécessaire de le convertir en objet jQuery. Par exemple, si vous recevez un objet checkbox, vous pouvez examiner l'objet checked sans l'utilisation de jQuery.

Toutefois, si vous devez naviguer vers un élément différent de cette case à cocher, il peut être utile de la convertir :

function yourCallback(cb) {
    cb = $(cb);
    var sel = $(cb).closest('td').next().find('select');
    // For example, update the options in a neighboring select field
    ...
}

jQuery (comme d'autres bibliothèques) s'intègre parfaitement au JS natif. Si vous avez besoin de fonctionnalités supplémentaires, augmentez l'objet en question.

Quant à votre dernière question : Vous pourriez trouver le data utile pour éviter les attributs DOM non standard. Si votre propriété x dans votre question est en fait un attribut DOM valide, vous pouvez écrire soit this.x = y ou $(this).attr('x', y) Pour l'instant, cela n'a pas beaucoup d'importance. Cependant, si x n'est pas un attribut DOM, utilisez

$(this).data('key', value)

De cette façon, vous pouvez stocker des paires clé-valeur arbitraires avec l'élément DOM, où value peut être une valeur primitive ou un objet arbitraire.

Answer 2

Je pense que c'est une question de jugement. Utilisez votre bon sens.

Par exemple, si vous avez 1000 div sur la page, vous ne voudrez probablement pas les enfermer dans $(..).

$('div').click(function() {
    this.id = Random.guid(); // instead of $(this).attr('id', Random.guid());
});

En ce qui concerne les autres missions, tant que vous comprenez ce que fait jQuery, vous pouvez l'utiliser pour des raisons de cohérence, mais attention aux problèmes de performances comme dans l'exemple ci-dessus.

Comme le mentionne @colinmarc, jQuery brouille parfois la distinction entre les attributs des éléments et les propriétés des objets, ce qui peut être trompeur et source de bogues.

Answer 3

Lorsque vous utilisez jQuery, il renvoie toujours une instance de jQuery, sauf si vous utilisez une fonction comme val() ;

La raison pour laquelle nous utilisons $(this).value au lieu de this.value est de nous assurer qu'il s'agit bien d'une instance de jQuery.

si quelque part dans votre code vous définissez une variable appelée my_link qui est égale à un DOM Object et non à une fonction jQuery plus loin dans votre application my_link.val() résulterait en une erreur, mais en faisant $(my_link).val() vous assurera que la fonction val sera disponible. car $() retourne une instance de jquery.

Désolé pour la mauvaise compréhension de mon message précédent.

Answer 4

Étant donné que les objets jQuery ont des fonctionnalités plus riches que les nœuds JS DOM naturels, si vous hésitez, vous pouvez tout aussi bien opter pour jQuery. JQuery est si léger qu'il n'y a pas vraiment de raison de ne pas utiliser les objets jQuery.

Est-ce important si je fais this.x=y ou $(this).attr("x", y).

Le natif sera légèrement plus rapide, mais vous passerez probablement plus de temps dans un autre code - traversée du DOM ou construction. Dans cet exemple spécifique, le premier est plus concis, donc je le choisirais. Puisque jQuery est si léger, j'ai tendance à passer de l'un à l'autre de manière fluide.

Voici d'autres directives que nous suivons :

• Pour les rappels, comme un gestionnaire de clics, vous devrez suivre l'API - généralement un nœud DOM. Le code que vous écrivez qui est similaire devrait probablement prendre des noeuds DOM également. Mais si vous avez une liste d'éléments, utilisez toujours un objet jQuery.
• Pour la plupart des codes, j'essaie de voir si vous pouvez structurer le code comme un plugin jQuery - en appliquant une transformation à un ensemble de nœuds DOM. Si vous pouvez le faire, vous serez guidé par l'architecture du plugin.
• J'utilise le mécanisme de liaison/déclenchement de jQuery, qui est assez souple et à faible couplage.
• Pour garder le code droit, je recommande de préfixer le nom des objets jQuery avec un signe dollar. Par exemple, var $this = $(this); . Bien qu'il ne soit pas vraiment grave d'appeler $() de manière excessive, cela finit par avoir l'air négligé si vous l'appelez trop souvent.

J'espère que cela vous aidera.