Comment mettre en œuvre un «framework» JavaScript de qualité professionnelle pour les concepteurs Web?

Question

J'ai été chargé d'améliorer le désordre actuel qui est notre "stratégie" JavaScript; Nous sommes une entreprise de vente en ligne et mon patron m'a donné le temps de le faire correctement. Il est très désireux de garder ce modulaire et augmenter la réutilisabilité des composants.

Notre HTML est rendu avec JSP et nous avons beaucoup de balises personnalisées qui écrivent, par exemple, des informations sur les produits sans que les concepteurs de sites Web aient à s'en soucier. Maintenant, nous voulons faire des choses similaires avec JavaScript. Les concepteurs de sites Web devraient recevoir un ensemble de balises personnalisées, comme, par exemple,

<foo:draggable> 
... some HTML here ... 
</foo:draggable> 

qui envelopper le HTML dans un <div> avec une barre de glisser en haut et un bouton de fermeture.

Mon idée est de marquer le div avec un nom de classe CSS unique, tel que foo_draggable, puis de mettre toutes mes fonctions dans un seul fichier JS. Ce fichier JS voit alors s'il y a des éléments avec la classe CSS foo_draggable dans le DOM et s'il en trouve, il va attacher les gestionnaires d'événements requis.

Cependant, je suis préoccupé par les problèmes de mise à l'échelle, et je me demande si c'est une bonne idée d'avoir beaucoup de requêtes de sélecteur en cours d'exécution quand elles ne seront pas souvent utilisées.

La première solution consisterait à initialiser chaque élément dragable de manière explicite, ce qui impliquerait de mettre des balises <script> partout. La deuxième approche consisterait à ne pas mettre toutes les fonctions de l'interface utilisateur dans un seul fichier, mais plutôt à télécharger celles dont j'ai besoin, mais cela signifierait beaucoup plus de requêtes HTTP et une vitesse de chargement des pages plus lente.

Est-ce que quelqu'un a de l'expérience avec ça?

Answer 1

Pourquoi ne pas avoir deux noms de classe?

<div class='foo fooDragable'></div> 
<div class='foo fooSortable'></div> 

Vous ajoutez la classe 'foo' à tous vos éléments nécessitant une modification par javascript. Votre javascript doit vérifier le dom une seule fois pour foo. Ensuite, vous pouvez rechercher dans ce tableau qui devrait être beaucoup plus petit que le dom complet.

var $dragAble = $foo.filter('.fooDragable'); 

Answer 2

Avez-vous considéré ou regardé JSF? Je sais que c'est un changement majeur si vous n'utilisez pas encore JSF. Mais il y a beaucoup de librairies de composants JSF prêtes à l'emploi avec une sauce ajaxique, par exemple RichFaces, IceFaces, PrimeFaces, etc. C'est presque une perte de temps de créer des composants/étiquettes pour vous-même.

Vous pouvez également remplacer tous les Javascripts pour utiliser le framework greatjQuery JS.

Answer 3

Selon le nombre de composants que vous possédez, le surcoût supplémentaire lié à l'exécution des sélecteurs peut ne pas être un gros problème. Vous pouvez initialiser tous les composants une seule fois, lorsque la page est chargée. Tout ce qui n'est pas présent sur la page ne sera tout simplement pas initialisé et n'entraînera pas d'autres frais supplémentaires. Dans la plupart des frameworks JavaScript, la sélection par nom de classe (ou nom de tag) est assez rapide. Seuls les sélecteurs complexes, qui ne sont pas supportés nativement par le navigateur, sont lents.

Si vous avez quelques composants couramment utilisés, puis un ensemble de composants moins couramment utilisés, il peut être utile de les séparer. Conservez les composants couramment utilisés dans un seul fichier JavaScript (minifié, servi avec compression et mise en cache agressive), et chargez-le sur chaque page, qu'elle soit nécessaire ou non. La mise en cache assurera qu'elle n'est téléchargée qu'une seule fois, et ce ne sera qu'une petite requête HTTP. Pour les composants les moins courants, conservez-les dans des fichiers distincts (idéalement, un par composant) et ajoutez une balise de script sur les pages qui les utilisent. Je ne suis pas entièrement familier avec le fonctionnement de JSP, mais il est possible de le faire automatiquement - si une balise est incluse dans le document, ajoutez une balise de script pour foo_widget.js dans l'en-tête du document, ou quelque chose comme cette.