11491 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
Je refais un site perso de A à Z. Je suis en ce moment à la recherche de la façon la plus efficace de permettre à un visiteur de filtrer une liste d'items (des recettes, en l'occurence) en fonction de checkboxs de tags. Là pour l'instant il y a 414 recettes avec en moyenne 5 tags chacune (de type "végétarien" ou "sucré-salé") pour plus de 70 tags différents en tout.

Premier point :
Déjà j'hésite entre deux méthodes radicalement différentes : filtrer côté serveur en php et ajax ou filtrer côté client avec jQuery. Je me suis dit - peut-être à tort - qu'il valait mieux charger une fois la liste des recettes et leurs tags associés plutôt que de faire d'incessants appels au serveur. Compte tenu des volumes concernés, ai-je raison ? (jamais il n'y aura sur ce site perso les 65k+ recettes de marmiton et il n'y aura sans doute pas beaucoup de tags supplémentaires)

Second point :
En partant du principe que jQuery est la meilleure méthode, comment réaliser efficacement ce que je veux ? Pour l'instant j'ai testé la technique suivante qui connait un bug bête :
- lors de l'affichage initial de la liste, je crée un data-tags="4 8 15 16 23 42" où chaque chiffre est un id de tag.
- A chaque clic sur une checkbox je génère un tableau vide dans lequel je "push" les valeurs des checkboxs cochées.
- je masque toute la liste
- Chaque élément du tableau est ensuite extrait avec un each, et avec un a[data-tags*="'+val+'"] je réaffiche les éléments qui correspondent.

Problème : je suis encore assez nul en Regexp aussi mon script bug dès que l'id du tag est inférieur à 10...En effet, je sélectionne du coup tous ceux qui contiennent "8" par exemple, soit 8, mais aussi 18, 28, 38, etc. Comment corriger ça simplement ? Je pourrais bien sûr augmenter de 10 tous les ids de tags comme ça le problème ne se présenterait plus, mais bon, j'imagine qu'il y a mieux ^^

Donc voilà, si quelqu'un voulait bien me donner son avis sur la meilleure méthode pour arriver à mes fins, je suis très intéressé. Merci.

Question bonus :
j'aimerais en plus que mes filtres se mettent à jour à chaque clic pour ne laisser que les pertinents pour le prochain clic (par exemple virer "viande" si on a déjà coché "végétarien"). Pour l'instant, j'envisage de récupérer tous les tags de toutes les recettes encore affichées après la méthode décrite ci-dessus et de supprimer de ma liste de tags tous ceux qui n'ont pas les bonnes valeurs. Valable comme technique ou bancal ?

Merci.
Bonjour,

avec moins de 1000 recettes je pense que tu n’auras effectivement aucun problèmes de performance en travaillant sur le client.

Pour vérifier si une liste de nombre est incluse dans une autre tu pourrais écrire une fonction :
/**
 * Retourne vrai si tous les nombres contenus dans la chaîne a sont contenus dans la chaîne b
 *
 * @param a chaîne de nombres séparés par des espaces
 * @param b chaîne de nombres séparés par des espaces
 * @return booléen
 */
function nombresContenus(a, b) {
    "use strict";
    var ta = a.split(" "), tb = b.split(" "), i, lg = ta.length;
    for (i = 0; i < lg; i += 1) {
        // Si le ième élément de ta n’est pas contenu dans tb
        if (tb.indexOf(ta[ i ]) === -1) {
            return false;
        }
    }
    return true;
}

alert(nombresContenus("8 17", "4 8 15 16 23 42"));
    

Modifié par adrien881 (24 Jun 2015 - 16:17)
Merci, ta fonction est très efficace, bien plus que celle que j'avais refaite hier soir.
Reste plus qu'à gérer la visibilité des filtres maintenant.

Question : comment savoir à quel stade il sera plus avantageux de passer à un traitement côté serveur plutôt que client ? En fait je m'interroge beaucoup sur l'efficacité de ce que je code avec comme objectif de faire le plus léger et rapide possible. Quels tests devrais-je effectuer ? Avec quels outils ? Des ouvrages ou tutoriels qui pourraient m'aider à faire les bons choix de codages ?
Mendoza a écrit :

Question : comment savoir à quel stade il sera plus avantageux de passer à un traitement côté serveur plutôt que client ?


Quand tu y sera.

Mendoza a écrit :

En fait je m'interroge beaucoup sur l'efficacité de ce que je code avec comme objectif de faire le plus léger et rapide possible. Quels tests devrais-je effectuer ? Avec quels outils ? Des ouvrages ou tutoriels qui pourraient m'aider à faire les bons choix de codages ?


Tu t'en fout. Si ton site décolles tu rajoutes du matériel (meilleur hébergement, plus de serveurs, etc) ça te couteras toujours moins cher que de passer du temps à optimiser du code à la mano ou d'embaucher des ingés. Si par la suite le matériel ne suit pas la tu vois mais à ce moment là tu seras déjà pété de tunes. Smiley smile
'Tain c'est sacrément cynique comme point de vue, et hélas très cohérent avec notre monde : pourquoi faire mieux quand il suffit de masquer les erreurs l'air de rien et voir plus tard quand on devra faire face aux problèmes créés ? Enfin bon...
Merci, en tout cas.
Modifié par Mendoza (27 Jun 2015 - 08:21)