6
votes

Où placer des objets interactifs dans JavaScript?

Je crée une application Web (c'est-à-dire JavaScript avec jQuery et beaucoup de SVG) où l'utilisateur interagit avec des "objets" à l'écran (pensez aux divs pouvant être dragés, redimensionnés et connectés par des pars. Programme de dessin vectoriel ou un langage de programmation graphique).

Comme chaque "objet" contient des informations individuelles mais appartient toujours à une "classe" d'éléments, il est évident que cette application doit être programmée en utilisant une approche d'OOP.

Mais où est-ce que je stocke les "objets" les mieux?

  • Devrais-je créer une structure globale ("registre") avec tous les objets (JS natif) et leur dire "Dessinez-vous sur le DOM"?
  • ou devrais-je éviter une telle structure et penser aux nœuds DOM (pertinents) comme mes objets et joignez les données pertinentes comme .data () à eux?

    La première approche est très mvc - mais je suppose que l'attachement de tous les gestionnaires d'événements sera non trivial.

    La deuxième approche gérera les événements de manière triviale et ne crée pas de structure en double, mais je suppose que les trucs d'OO habituels (comme des méthodes similaires) seront plus complexes.

    Que recommandez-vous? Je pense que la réponse sera javascript et SVG spécifique que les langages de programmation "habituels" ne disposent pas de "toile" de sortie très organisée.


2 commentaires

Je vais attendre des réponses parce que cette question est très intéressante ... mais pourquoi avez-vous choisi SVG au lieu d'aller pour la toile et une approche plus "traditionnelle" de simplement avoir des objets qui se dessinent sur la toile?


J'ai choisi SVG sur toile lorsque mes données sont de type vecteur et non de type pixel. Et, encore plus important, j'utilise les événements JavaScript (Mousedown, MouseMove, ...) Beaucoup et comme je peux les lier aux éléments SVG, je décharge de la "détection de collision" à la mise en œuvre native du navigateur et du don 't dois le faire moi-même dans (potentiellement lent) JavaScript


3 Réponses :


1
votes

J'utiliserais JSON (en tant que registre d'objet) et maintenez-le tout dans votre bloc de script. Vous pouvez ensuite stocker facilement et récupérer les données sans analgéser.


1 commentaires

YUP, JSON est déjà défini comme cette application fonctionne fortement avec un backend de côté serveur et communiquant via AJAX et utilise parfois le motif de la comète - donc JSON est un choix naturel



1
votes

Vous voudriez probablement utiliser JSON pour définir les "objets" que vous avez affaire. par exemple xxx

vous permet de dessiner les formes à la page de la page, mettez à jour l'état des objets que vous les manipulez et enregistrez l'état à charger plus tard.

Vous pouvez utiliser le motif MVC comme indiqué, puis vous pouvez effectuer une détection de fonctionnalités pour déterminer si vous allez l'afficher comme toile, SVG, Flash, HTML, etc.


1 commentaires

Pour mieux relier ma réponse à votre question: je me suggère d'aller avec votre premier point: "Devrais-je créer une structure globale (" registre ") avec tous les objets (JS natif) et leur dire" Dessinez-vous sur le DOM "?" - Mon raisonnement étant comme indiqué sous le bloc de code de ma réponse.



2
votes

Dans de telles circonstances dans le passé (j'ai frappé cela environ 5 fois), je crée toujours des OOP dans JS (classes globales ", des structures de données non globales, le cas échéant). Chaque classe a typiquement une propriété .g qui pointe vers sa représentation graphique. (et avant que jQuery's .data J'ai utilisé des propriétés expanso sur les instances DOM pointant vers l'instance de classe, lorsque des manutentionnaires d'événements ou similaires doivent avoir l'impression d'avoir l'impression.) < / p>

Je pense aussi à cela comme MVC, mais bien sûr, il est facile de brouiller les lignes (ou difficiles à les garder séparés) lorsque vous disposez d'un interprète JS unique qui stocke vos modèles, agissant en tant que contrôleur et manipulant également la vue. .

Je ne trouve pas que l'ajout de gestionnaires d'événements est difficile sous ce système: Instancitation d'un nouvel objet (en code) est responsable de l'instanciation de sa représentation dans la vue et de la fixation de ses propres manutentionnaires d'événements qui déclenchent des rappels à l'instance. Ce code plante des événements spécifiques à une entrée (E.G. MOUSEDOWN ) dans les événements logiques basés sur l'état (E.G. sélectionné ). Autres registres de code à ces événements logiques sur les instances.


1 commentaires

Merci pour la réponse très informative. Je pense que je vais aller comme ça maintenant :)