Modèles d'interface utilisateur en JavaScript

Comme je sais qu'il n'y a pas encore de motifs spécifiques pour JavaScript. Mais je pense qu'il y a un potentiel de quelque chose comme une approche de widgets (composante). Depuis principalement, nous utilisons JavaScript pour responsabiliser notre code HTML. Il est logiquement que nous devrions connecter notre objet JavaScript à la balise HTML. Nous avons donc quelque chose comme modèle (JSOBJECT) + vue (HTMLrePresentation). Pour obtenir MVC, nous avons besoin de contrôleurs et nous avons des événements pour cela. Dans ce cas, nous aurons une composante facilement extensibel.

Par exemple: P>

// this is a part of some FormValid.js
<script>
function FormValid(){

}
Components.extendCore(FormValid);

FormValid.prototype.validate=function(){...}
</script>

FormValid.prototype.templates={
   main:'<form class="form1"...onsubmit="this.jsObject.validate();">...</form>'
}

//this is our HTML
<div id="form1"></div>
<script>
Components.Attach("FormValid").to("form1");
</script>

Les motifs sont généralement agencés-agnostiques. Si un motif a une valeur, à l'aide de certains cas de bord, il aura de la valeur quel que soit la langue ou la technologie que vous utilisez. Prendre mvc. Le concept de séparation du modèle de la vue du contrôleur a une valeur, que le modèle soit implémenté avec une SGBBR ou une autre technologie, que la vue soit HTML ou Swing ou X.

où vous voyez certains modèles appliqués plus dans une technologie qu'un autre, cela signifie généralement que les développeurs de la technologie avaient une approche particulière qu'ils ont soutenu plus complètement que d'autres.

JavaScript lui-même n'impose aucun modèle particulier sur vous. Certains cadres javascript, tels que Yui ou Dojo ou Glow auront tendance à vous amener une direction plus qu'une autre.

À la fin de la journée, examinez le problème que vous résolvez, les ressources et l'expérience que vous avez et suivez les modèles qui ont un sens.

J'aimerais recommander Ross Harges & Dustin Diaz's Wook's's Wook, Modèles de design JavaScript PRO , définitivement la meilleure ressource sur ce sujet et valant la peine de lire.

Il y a aussi un article très intéressant sur JavaScript MVC dans le dernier numéro de une liste d'une liste .

Une bonne approche pour la construction de l'application GUI est celle du navigateur:

1. Utilisation du marquage pour la mise en page UI
2. Utilisation de la logique UI JavaScript
3. Utilisation de CSS pour le style UI

   La plupart des cadres d'interface graphique moderne (extjs, dojo, etc.) offrent des API qui aident grandement à construire une interface graphique à JavaScript uniquement. Mais il y a un autre cadre d'interface graphique Ample SDK qui apporte la séparation des préoccupations précédemment mentionnée. Il permet d'utiliser des langues xml (XHTML, XUL, SVG) pour la mise en page, CSS pour style et API DOM pour l'UI logique.

   à orchestrer une application GUI côté client Vous pouvez utiliser MVC ou un peu plus avancé PAC, comme pour l'ancien - il y a un PUREMVC Mise en œuvre disponible

   Vérifiez que le snippet suivant (ne concerne que la logique UI, pas la logique de l'application, pour être construite avec MVC / PAC): < /p>
   
   
   
   
   
   xxx

   index.css xxx < /PRE >P > xxx