Prototype ou jQuery pour la manipulation DOM (contenu dynamique côté client)

Question

J'ai besoin de savoir lequel de ces deux frameworks JavaScript est meilleur pour la modification de contenu dynamique côté client pour les éléments DOM connus (par ID), en termes de performance, de mémoire utilisation, etc .:

• Prototype de $ ('id') de mise à jour (contenu)
• jQuery jQuery ('# id') html (contenu)

EDIT:.. Mon les vraies préoccupations sont clarifiées à la fin de la question.

BTW, les deux bibliothèques coexistent sans conflit dans mon application, car j'utilise RichFaces pour le développement JSF, c'est pourquoi je peux utiliser "jQuery" au lieu de "$". J'ai au moins 20 zones pouvant être mises à jour dans ma page, et pour chacune, je prépare le contenu (tables, listes d'options, etc.), basé sur un filtrage de critères côté client défini par l'utilisateur ou un événement AJAX, etc. , comme ceci:

var html = []; 
int idx = 0; 
... 
html[idx++] = '<tr><td class="cell"><span class="link" title="View" onclick="myFunction('; 
html[idx++] = param; 
html[idx++] = ')"></span>'; 
html[idx++] = someText; 
html[idx++] = '</td></tr>'; 
... 

voici donc vient la question, ce qui est préférable d'utiliser:

// Prototype's 
$('myId').update(html.join('')); 
// or jQuery's 
jQuery('#myId').html(html.join('')); 

Autres fonctions nécessaires sont hide() et show(), qui sont présents dans les deux cadres. Ce qui est mieux? Aussi je dois activer/désactiver les contrôles de formulaire, et lire/définir leurs valeurs. Notez que je connais l'identifiant de ma zone modifiable (je n'ai pas besoin de sélecteurs CSS à ce stade). Et je dois dire que je sauvegarde de ces objets interrogés dans une structure de données pour une utilisation ultérieure, ils sont donc demandé qu'une seule fois lorsque la page est rendu, comme ceci:

MyData = {div1:jQuery('#id1'), div2:$('id2'), ...}; 
... 
div1.update('content 1'); 
div2.html('content 2'); 

Alors, ce qui est la meilleure pratique?

EDIT: Clarifiant, je suis surtout préoccupé par:

• Utilisation de la mémoire par ces objets enregistrés (il me semble que les objets jQuery ajouter trop de frais généraux), tandis que OTOH mes éléments DOM sont déjà modifié par les extensions de Prototype (chargé par défaut par Richfaces).
• Performance (temps) et fuites de mémoire (garbage collection pour les éléments remplacés?) Lors de la mise à jour du DOM. À partir du code source, j'ai pu voir que Prototype remplace innerHTML et fait quelque chose avec des scripts en ligne. jQuery semble libérer de la mémoire lors de l'appel de "empty()" avant de remplacer le contenu.

S'il vous plaît me corriger si nécessaire ...

Answer 1

Je pencherais pour jQuery. Prototype utilisé pour modifier les objets JS par défaut, ce qui est bien mais cela signifie que vous devez faire attention. Je crois que ce n'est plus le cas cependant. JQuery dispose également d'un référentiel de plug-in volumineux et de l'extension d'interface utilisateur jquery pour les widgets. Btw. Avec JQuery, vous pouvez également utiliser le symbole du dollar.

Answer 2

Il vaut mieux aller avec jQuery. Les deux frameworks sont géniaux (et je les utilise tous les deux), mais dans votre cas, jQuery est probablement le gagnant. À mon avis, prototype fournit une syntaxe plus naturelle pour le développement javascript.Il le fait au prix d'ajouter des méthodes à certaines des classes de base, mais il est également motivé par Ruby où c'est la norme. D'autre part, la qualité d'image est bien supérieure à la manipulation de dom et à l'observation d'événements. Votre code sera plus concis et plus facile à gérer dans ces cas-là et bénéficiera de fonctionnalités de performance telles que la délégation d'événements. jQuery a aussi une communauté beaucoup plus grande et beaucoup plus de plugins et d'exemples de code.

Answer 3

Si vous êtes seulement intéressé par les trois méthodes de base "mise à jour", "masquer" et "show" alors jQuery est mieux adapté. Il vise plus à la manipulation de DOM qui est exactement ce dont vous avez besoin. Ensuite, vous pourriez faire chacune de ces choses dans quelques lignes de code, en économisant les 26 Ko requis pour transférer la bibliothèque jQuery.

Étant donné que vous vous inquiétez pour l'utilisation de la mémoire, regardez le fichier jQuery, c'est 77 Ko non compressé, combien de travail supposez-vous que le navigateur doit exécuter? Probablement beaucoup plus que cela libéré en appelant empty() sur un DIV typique.

Et vous mentionnez Prototype est déjà utilisé sur le site auquel cas vous ne devriez pas être en ajoutant une autre bibliothèque. Les capacités de jQuery sont un sous-ensemble de Prototype.

Cette question a presque une année et vous avez probablement déjà pris votre décision. Pour quelqu'un d'autre lire la réponse est simple; Si quelque chose n'est pas cassé, ne le réparez pas, vous avez déjà installé une bibliothèque capable, donc utilisez-la.