Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

JavaScript et MVC

10 réponses
Avatar
Une Bévue
je cherche des sites intéressants sur JS et MVC (model/view/controller)
histoire de séparer logique et présentation.
je ne souhaite pas du tout utiliser un truc comme JQuerry ou autre,
juste le principe MVC dans mon code.
bien sûr j'ai déjà cherché, mais si vous avez des tuyaux, j'apprécierai.

ma page est simple :

3 colonnes :
catégories ;
items ;
item.

la col catégories sélectionne la catégories des items présentés
succintement dans la col items

enfin la col item présente l'item choisi dans la col items mais
exhaustivement.

à cela s'ajoutent des boutons commandés tels que :
enregistrer, annuler, modifier, ajouter, un champ de recherche...

le html est rempli par xhr.

10 réponses

Avatar
dhar
De quoi comparer les différents frameworks disponibles: https://github.co m/addyosmani/todomvc
La liste n'est pas exhaustive mais c'est un bon point de départ pour se f aire une idée.
Les différentes solutions sont plus ou moins équivalentes. Personnellem ent, je penche plutôt pour Backbone car on trouve beaucoup de ressources/ exemples et qu'il fonctionne parfaitement avec CoffeeScript. Mais ton choix sera peut-être différent...
Avatar
unbewusst.sein
dhar wrote:

Mais ton choix sera peut-être différent...



là, avant d'essayer un FrameWork, j'essaie une sorte de tuto glané sur
le net :
<http://www.alexatnet.com/content/model-view-controller-mvc-javascript&gt;
qui ne marche d'ailleurs pas online...
j'ai copié les scripts et le html et pour l'instant j'ai une message
d'erreur :
$ is not defined
$(function () { ligne 13 de ma page html

le code est :
$(function () {
var model = new ListModel(['PHP', 'JavaScript']);
var view = new ListView(model, new ListController(model),
{
'list' : $('#list'),
'addButton' : $('#plusBtn'),
'delButton' : $('#minusBtn')
}
);
view.show();
});

je ne connais pas du tout l'usage de "$" en js...
sans doute que le dev du site a oublié qqc ???
--
« L'homme poursuit la femme jusqu'à ce qu'elle l'attrape. »
(Marcel Achard)
Avatar
unbewusst.sein
Une Bévue wrote:

dhar wrote:

> Mais ton choix sera peut-être différent...

là, avant d'essayer un FrameWork, j'essaie une sorte de tuto glané sur
le net :
<http://www.alexatnet.com/content/model-view-controller-mvc-javascript&gt" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.alexatnet.com/content/model-view-controller-mvc-javascript&gt;
qui ne marche d'ailleurs pas online...
j'ai copié les scripts et le html et pour l'instant j'ai une message
d'erreur :
$ is not defined
$(function () { ligne 13 de ma page html




exactement la même erreur sur sa page :
<http://www.alexatnet.com/content/model-view-controller-mvc-javascript&gt" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.alexatnet.com/content/model-view-controller-mvc-javascript&gt;
mais cette fois-ci à la ligne 370 dixit firebug.


--
« L'homme poursuit la femme jusqu'à ce qu'elle l'attrape. »
(Marcel Achard)
Avatar
SAM
Le 22/09/11 15:03, Une Bévue a écrit :

je ne connais pas du tout l'usage de "$" en js...
sans doute que le dev du site a oublié qqc ???



l'usage du $ est déconseillé

habituellement employé comme ceci en début des scripts :

function $(id) { return document.getElementById(id); }

ou + sofistiqué dans le même but : s'adresser à un élément du document


mais le plus souvent c'est déjà utilisé par les biblis JS
(jquery et autres spectacle-au-culot)

<http://www.prototypejs.org/learn/extensions&gt;
<http://www.prototypejs.org/api/utility/dollar&gt;
<http://www.prototypejs.org/api/utility/dollar-dollar&gt;
etc.


le code avec $() que tu proposes pue le
jquery
<http://jquery.com/&gt;
ou
prototype
<http://www.prototypejs.org/&gt;
ou
scriptacoulus (que j'appelle: spectacle-au-culot)
<http://script.aculo.us/&gt;

<http://www.alsacreations.com/actu/lire/418-jquery-une-bibliotheque-javascript-simple-et-efficace.html&gt;



La bibli JS censée tuer toutes les autres qui sont très mal fagotées
(dont, entre autres, reniflage de navigateur (la honte !)) :
MyLibrary
<http://www.cinsoft.net/mylib.html&gt;
avec modularité (on peut créer, réduire, sa bibli perso directement sur
le site)


--
Stéphane Moriaux avec/with iMac-intel
Avatar
unbewusst.sein
SAM wrote:

Le 22/09/11 15:03, Une Bévue a écrit :
>
> je ne connais pas du tout l'usage de "$" en js...
> sans doute que le dev du site a oublié qqc ???

l'usage du $ est déconseillé

habituellement employé comme ceci en début des scripts :

function $(id) { return document.getElementById(id); }



oui, ça j'avais pigé, mais pourquoi est-ce déconseillé ?

ou + sofistiqué dans le même but : s'adresser à un élément du document


mais le plus souvent c'est déjà utilisé par les biblis JS
(jquery et autres spectacle-au-culot)

<http://www.prototypejs.org/learn/extensions&gt;
<http://www.prototypejs.org/api/utility/dollar&gt;
<http://www.prototypejs.org/api/utility/dollar-dollar&gt;
etc.


le code avec $() que tu proposes pue le
jquery
<http://jquery.com/&gt;



effectivement, si j'ajoute "jquery-1.6.4.min.js" ça roule...

prototype
<http://www.prototypejs.org/&gt;
ou
scriptacoulus (que j'appelle: spectacle-au-culot)
<http://script.aculo.us/&gt;




<http://www.alsacreations.com/actu/lire/418-jquery-une-bibliotheque-java
script-simple-et-efficace.html>



La bibli JS censée tuer toutes les autres qui sont très mal fagotées
(dont, entre autres, reniflage de navigateur (la honte !)) :
MyLibrary
<http://www.cinsoft.net/mylib.html&gt;
avec modularité (on peut créer, réduire, sa bibli perso directement sur
le site)



je regarde ça !!!

--
« L'homme poursuit la femme jusqu'à ce qu'elle l'attrape. »
(Marcel Achard)
Avatar
Pierre Goiffon
Le 22/09/2011 16:05, SAM a écrit :
La bibli JS censée tuer toutes les autres qui sont très mal fagotées
(dont, entre autres, reniflage de navigateur (la honte !)) :
MyLibrary
<http://www.cinsoft.net/mylib.html&gt;
avec modularité (on peut créer, réduire, sa bibli perso directement sur
le site)



Ha tient ça me rappelle quelque chose... Ha oui, JQuery non ? ;)
Avatar
Pierre Goiffon
Le 21/09/2011 16:24, Une Bévue a écrit :
je cherche des sites intéressants sur JS et MVC (model/view/controller)
histoire de séparer logique et présentation.



Bonjour,

J'ai été un peu surpris de votre message... De mon expérience on n'a
quasiment pas de code métier en JS, et tout ce qui est équivalent de
couche données est en général plutôt géré par une librairie dédié.

Dans quel cadre vous posez-vous ces questions ?
Avatar
unbewusst.sein
Pierre Goiffon wrote:

Dans quel cadre vous posez-vous ces questions ?



non-professionnelle, j'ai juste écrit une page/appli qui utilise js,
xhr, php et sqlite3 pour gérer mes différents mots de passe.

mon code js est "un peu" le bronx et ayant utilisé mvc en java il y a
une bonne dizaine d'années, je souhaite regarder ça en js.

ça me paraît d'ailleurs pas si évident de répartir les tâches entre js
et php...
--
« L'homme poursuit la femme jusqu'à ce qu'elle l'attrape. »
(Marcel Achard)
Avatar
unbewusst.sein
SAM wrote:

La bibli JS censée tuer toutes les autres qui sont très mal fagotées
(dont, entre autres, reniflage de navigateur (la honte !)) :
MyLibrary
<http://www.cinsoft.net/mylib.html&gt;
avec modularité (on peut créer, réduire, sa bibli perso directement sur
le site)



connaitrais-tu des exemples utilisant xhr avec cette lib ?
--
« L'homme poursuit la femme jusqu'à ce qu'elle l'attrape. »
(Marcel Achard)
Avatar
Gildas
On 21 sep, 16:24, Une Bévue wrote:
je cherche des sites intéressants sur JS et MVC (model/view/controller)
histoire de séparer logique et présentation.
je ne souhaite pas du tout utiliser un truc comme JQuerry ou autre,
juste le principe MVC dans mon code.
bien sûr j'ai déjà cherché, mais si vous avez des tuyaux, j'appr écierai.

ma page est simple :

3 colonnes :
catégories ;
items ;
item.

la col catégories sélectionne la catégories des items présentés
succintement dans la col items

enfin la col item présente l'item choisi dans la col items mais
exhaustivement.

à cela s'ajoutent des boutons commandés tels que :
enregistrer, annuler, modifier, ajouter, un champ de recherche...

le html est rempli par xhr.



Voici un excellent article de Peter Michaux à ce sujet:

http://michaux.ca/articles/mvc-architecture-for-javascript-applications