Alternative “architectural” les approches code client javaScript?

StackOverflow https://stackoverflow.com/questions/32540

Question

Comment est votre code javaScript est-il organisé?T-il suivre les tendances comme MVC, ou quelque chose d'autre?

J'ai travaillé sur un projet pour un certain temps maintenant, et les autres, j'en ai plus ma page web s'est transformé en une application complète.Maintenant, je suis coller avec jQuery, cependant, la logique de la page est de plus en plus un point où une certaine organisation, ou, si j'ose dire, "architecture" est nécessaire.Ma première approche est "MVC-ish":

  • Le "modèle" est un JSON arbre qui est agrandi avec les aides
  • La vue est le DOM plus classes que le tordre
  • Le contrôleur est l'objet où je connecter les événements de la manipulation et de coup de pied hors de la vue ou le modèle de manipulation

Je suis très intéressé, cependant, dans la façon dont d'autres personnes ont construit des plus importantes applications javaScript.Je ne suis pas intéressé dans GWT, ou d'un autre serveur approches axées sur les...juste à l'approche de la "javaScript + <generic web="" service-y="" thingy="" here="">"

Note:plus tôt, j'ai dit javaScript "n'est pas vraiment OO, pas vraiment fonctionnelle".C'est, je pense, distrait tout le monde.Disons-le de cette façon, parce que le javaScript est unique à bien des égards, et je suis venue à partir d'un typage fort arrière-plan, je ne veux pas forcer les paradigmes je sais, mais ont été développés dans des langues très différentes.

Était-ce utile?

La solution

..mais le Javascript a de nombreuses facettes qui sont OO.

Réfléchissez à ceci:

var Vehicle = jQuery.Class.create({ 
   init: function(name) { this.name = name; } 
});

var Car = Vehicle.extend({ 
   fillGas: function(){ 
      this.gas = 100; 
   } 
});

J'ai utilisé cette technique pour créer au niveau de la page javascript classes qui ont leur propre état, ce qui permet de le garder (et je souvent à identifier les domaines que je peux réutiliser et de les mettre dans d'autres classes).

C'est particulièrement utile lorsque vous avez des composantes et des commandes de serveur qui ont leur propre script à exécuter, mais quand vous pourriez avoir plusieurs instances sur la même page.Cela permet de maintenir l'état séparés.

Autres conseils

JavaScriptMVC est un excellent choix pour l'organisation et le développement d'une grande échelle JS application.

L'architecture de conception très bien pensé.Il y a 4 choses que vous aurez jamais faire avec JavaScript:

  1. Répondre à un événement
  2. Demande De Données / Manipuler Des Services (Ajax)
  3. Ajouter le domaine de l'information spécifique à l'ajax réponse.
  4. Mise à jour le DOM

JMVC divise ces dans le Modèle, Vue, Contrôleur de schéma.

Tout d'abord, et probablement l'avantage le plus important, est le Contrôleur.Les contrôleurs de l'utilisation de la délégation, de sorte qu'au lieu de fixer des événements, il vous suffit de créer des règles pour votre page.Ils utilisent aussi le nom du Contrôleur de limiter la portée de ce que la manette fonctionne sur.Cela rend votre code déterministe, de sens que si vous voyez un événement arrivera dans un "#todos' élément que vous savez qu'il y a à être un todos contrôleur.

$.Controller.extend('TodosController',{
   'click' : function(el, ev){ ... },
   '.delete mouseover': function(el, ev){ ...}
   '.drag draginit' : function(el, ev, drag){ ...}
})

Vient ensuite le modèle.JMVC fournit une puissante Classe et le modèle de base qui vous permet d'organiser rapidement des fonctionnalités Ajax (#2) et l'enveloppe de données avec le domaine spécifique de la fonctionnalité (#3).Lorsque vous avez terminé, vous pouvez utiliser les modèles à partir de votre contrôleur comme:

Todo.findAll({après:new Date()}, myCallbackFunction);

Enfin, une fois votre todos revenir, vous devez les afficher (#4).C'est là que vous utilisez JMVC de vue. 

'.show click' : function(el, ev){ 
   Todo.findAll({after: new Date()}, this.callback('list'));
},
list : function(todos){
   $('#todos').html( this.view(todos));
}

Dans points de vue/todo/liste.ejs'

<% for(var i =0; i < this.length; i++){ %>
   <label><%= this[i].description %></label>
<%}%>

JMVC offre beaucoup plus que de l'architecture.Il vous aide à jamais partie du cycle de développement avec:

  • Générateurs de Code
  • Navigateur intégré, le Sélénium et le Rhinocéros de Test
  • La Documentation
  • La compression des scripts
  • Les rapports d'erreurs

MochiKit est grand-et il a été mon premier amour, pour ainsi dire, autant que les librairies js aller.Mais j'ai trouvé que tout MochiKit a très expressif de la syntaxe, il ne sentait presque aussi à l'aise pour moi en tant que Prototype/Scriptaculous ou jQuery fait pour moi.

Je pense que si vous savez ou comme python, puis MochiKit est un bon outil pour vous.

Merci à vous tous de bien vouloir pour vos réponses.Après un certain temps, je tiens à poster ce que j'ai appris jusqu'à présent.

Jusqu'à présent, je vois une très grande différence de l'approche en utilisant quelque chose comme Ext, et d'autres comme JQuery UI, Scriptaculous, MochiKit, etc.

Avec la Poste, le HTML est un simple espace réservé - UI se passe ici.À partir de là, tout est décrit dans le code JavaScript.DOM interaction est réduite en vertu d'une autre (peut-être plus fort) couche API.

Avec les autres kits, je trouve moi-même de commencer par faire un peu de conception HTML, puis d'étendre la DOM directement avec des effets impressionnants, ou tout simplement de remplacer le formulaire de commentaires ici, une plus là.

Les principales différences commencent à se produire et que j'ai besoin pour faire face à la gestion des événements, etc.En tant que modules besoin de "parler" les uns aux autres, je me retrouve à avoir besoin de vous éloigner de la DOM, l'abstraction de loin en morceaux.

Je remarque que beaucoup de ces bibliothèques incluent en outre une intéressante modularisation des techniques.Une description très claire, est imputable sur l'Ext site web, qui comprend une façon élégante de "protéger" votre code avec des modules.

Un nouveau joueur, je n'ai complètement évalué est Sproutcore.Il semble que l'Ext dans l'approche, où le DOM est caché, et vous avez surtout envie de traiter avec le projet de l'API.

Tristan, vous constaterez que lorsque vous essayez de l'architecture du code JavaScript dans une application MVC il a tendance à monter court dans un domaine-le modèle.Le domaine le plus difficile à traiter est le modèle, car les données ne sont pas persister tout au long de l'application, et par nature, les modèles semblent changer sur le côté client assez régulièrement.Vous pourriez standardiser la façon dont vous passer et de recevoir des données à partir du serveur, mais alors à ce point, le modèle n'appartient pas vraiment à JavaScript -- il appartient à votre application côté serveur.

J'ai fait voir une tentative un certain temps en arrière, là où quelqu'un a créé un cadre pour la modélisation des données en JavaScript, un peu comme SQLite appartient à la demande.C'était comme Modèle.sélectionnez( "Produit" ) et le Modèle.mise à jour (le "Produit", "Quelques données..." ).C'était en fait un objet de notation, qui a tenu un tas de données pour gérer l'état de la page en cours.Cependant, à la minute actualisation, toutes les données sont perdues.Je suis sans doute hors de la syntaxe, mais vous obtenez le point.

Si vous utilisez jQuery, alors Ben approche est vraiment le meilleur.Étendre l'objet jQuery avec vos fonctions et propriétés, puis compartimenter votre "contrôleurs".J'ai l'habitude de le faire en les mettant dans des fichiers sources distincts, et à les charger sur un article par article de base.Par exemple, si c'était un site de e-commerce, je pourrais avoir un fichier JS complète de contrôleurs de gérer la fonctionnalité du processus de commande.Cela a tendance à garder les choses légères et plus faciles à gérer.

Juste une clarification rapide.

Il est parfaitement possible d'écrire des applications GWT qui ne sont pas orienté serveur.Je suis en supposant qu'à partir Orienté Serveur vous dire GWT RPC que les besoins de base java back-end.

J'ai écrit GWT applications qui sont très "MVC-ish" sur le côté client seul.

  • Le modèle est un objet graphique.Bien que l'on code en Java, à l'exécution, les objets sont en javascript, sans avoir besoin de toute JVM en soit côté client ou côté serveur.GWT prend également en charge JSON avec une complète analyse et la manipulation de soutien.Vous pouvez vous connecter à des webservices JSON facilement, voir 2 pour un JSON mashup exemple.
  • La vue était composé de la norme widgets GWT (ainsi que certains de nos propres types de widgets)
  • Contrôleur de couche a été soigneusement séparés de la Vue via le pattern observer.

Si votre "fortement typé" arrière-plan est avec Java ou similaires la langue, je pense que vous devriez sérieusement envisager de GWT pour les grands projets.Pour les petits projets d'habitude, je préfère jQuery.À venir GWTQuery qui fonctionne avec GWT 1.5 peut changer que si pas dans un avenir proche en raison de l'abondance de plugins pour jQuery.

Pas sûr à 100% ce que tu veux dire ici, mais je dirai qu'après avoir fait ASP.NET pour les 6 dernières années, mes pages web sont maintenant principalement tirée par l'JavaScript une fois la page de base rendu est fait par le serveur.J'utilise JSON pour tout (ont été pour environ 3 ans maintenant) et l'utilisation MochiKit de mon côté client besoins.

Par la voie, JavaScript est OO, mais comme il utilise l'héritage par prototype, les gens ne donnent pas de crédit de cette façon.J'aimerais également souligner qu'il est fonctionnel et bien, tout dépend de la façon dont vous l'écrivez.Si vous êtes vraiment intéressé par la programmation fonctionnelle, les styles, découvrez MochiKit - vous l'aimez;il se penche un peu vers la programmation fonctionnelle côté de JavaScript.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top