javascript/jquery créer un widget et utiliser l'héritage

Question

J'ai joué avec jquery pendant une semaine ou deux maintenant et j'ai quelque chose qui ressemble à un exemple envahi par hackey. Il a besoin de structure - j'ai déjà travaillé avec MVC dans java etc .. mais j'ai du mal à traduire mon gros fichier .js en un certain nombre de vues distinctes et séparées logiquement.

Dans ces vues je voudrais pouvoir créer des instances de certains widgets (c'est fondamentalement un div avec quelques boutons et un comportement draggable). Évidemment, j'aimerais pouvoir profiter de l'héritage, car certains divs envahis partagent le même genre de caractéristiques.

Je sais comment faire ceci en Java mais je ne peux pas sembler obtenir ma tête dans le javascript. Je peux arriver à un point où je peux isoler un appel de fonction qui, en théorie, toucherait quelque chose ressemblant à un contrôleur. À ce stade, je procède à la vérification de certains styles d'un div parent, etc., puis je fais beaucoup d'appendTo à un div particulier, créant ainsi mon composant.

En bref, comment puis-je créer un petit widget et le référencer dans javery topped javascript. Je ne suis pas sûr de définir l'objet et de créer des gestionnaires d'événements, etc. Je suppose que j'ai été un hacker de js trop longtemps!

Si vous voulez une idée de ce que mon code actuel ressemble s'il vous plaît voir http://jqueryui.com/demos/droppable/#photo-manager J'ai fondamentalement ajouté un certain nombre d'autres gouttières et je dois déterminer ce que je vais glisser puis faire différentes choses. Encore une fois c'est tout un peu hackey. J'aimerais le rendre un peu plus technique.

J'ai commencé à regarder quelque chose comme Backbone.js mais je voudrais vous conseiller sur la façon de créer correctement mes widgets.

Un grand merci SO

Answer 1

Je suis également en train de discuter d'une application jQuery dangereusement croissante.

J'ai trouvé cet article par Alex Sexton très utile: http://alexsexton.com/?p=51 qui dit aussi que vous ne devriez pas avoir peur de créer vos propres plugins spécialisés jQuery pour votre propre page pour structurer votre code (et votre page). Je lis aussi beaucoup d'articles sur les modèles d'héritage de classe en Javascript, mais j'ai trouvé le conseil de Douglas Crockford le plus sage: "Parce que les objets en JavaScript sont si flexibles, vous voudrez penser différemment aux hiérarchies de classes.hiérarchies peu profondes sont efficaces et expressives. » http://www.crockford.com/javascript/inheritance.html.

Vous pourriez avoir un modèle de type MVC à l'arrière de votre esprit, mais essayez de le mettre en œuvre avec aussi peu de hiérarchie d'objets que possible.

Answer 2

Honnêtement, je ne voudrais pas essayer d'intégrer le développement widget w/jQuery; il n'a jamais été conçu pour être une solution cadre, il est conçu uniquement comme une api DOM. Ce post de blog par un autre développeur JS explique pourquoi jQuery est mauvais pour cela: http://blog.rebeccamurphey.com/on-jquery-large-applications

Je vous recommande d'utiliser un framework qui existe déjà pour créer des widgets modulaires. Pour les applications jQuery, il existe JavascriptMVC (http://javascriptmvc.com/). J'utilise personnellement la boîte à outils Dojo qui fournit un cadre de widget robuste et puissant connu sous le nom de Dijit. Ce framework fournit tout ce que vous demandez en plus d'une api DOM géniale aussi puissante et rapide que jQuery avec les librairies Dojo Core. De nombreuses applications d'entreprise l'utilisent pour créer leurs interfaces utilisateur Web. Il fournit également un support pour il8n (internationalisation), a11y (accessibilité), et plus encore.

Dojo Toolkit: http://dojotoolkit.org/

écriture Dijit Widgets: http://dojotoolkit.org/reference-guide/quickstart/writingWidgets.html#quickstart-writingwidgets

Fondamentalement, regarder au-delà jQuery à d'autres cadres pour le développement de widgets.