Un micro-framework Javascript pour faire du micro-MVC

Cela fait plusieurs mois que je l’utilise, ce micro-framework mérite son petit article.

L’idée est de simuler un MVC avec un framework très léger qui n’impose pas une syntaxe particulière. Je vais vous présenter Stapes.js.

Tout le monde peut créer sa propre architecture sans avoir forcément énormément de connaissances.

Ci-après un exemple de MVC pour une gestion simplifiée d’articles. Par exemple articles.mvc.js.

/* Modèle */
var ArticlesModel = Stapes.subclass({

	constructor: function() {
		/* Ici les variables */
		this.author = 'syl';
	},

	/* Getter */
	getAttribute: function(attr) {
		return this[attr];
	},

	/* Liste des selecteurs utilisés */
	getSelector: function(key) {
		this.selectors = {
			$form: 	$('#form')
		};

		return this.selectors[key];
	},

	/* Setter */
	setAttribute: function(attr, value) {
		this[attr] = value;
	},

	/* Chargement articles */
	load: function() {
		// ...
	},

	/* Ajout article */
	add: function(new_value) {
		var self = this;

		$.ajax({
			url: '/add',
			data: self.getSelector('$form').serialize(),
			dataType: 'json',
			success: function(json) {
				console.log(json);
			}
		});
	}

});

/* Vue */
var ArticlesView = Stapes.subclass({

	constructor: function(model) {
		var self    = this;
		this.model  = model;

		/* Ajouter un article */
		this.model.getSelector('$form').on('submit', function(e) {
			e.preventDefault();			

			/* Déclenche évènement */
			self.model.push({
				item: 'add'
			});
		});
	}

});

/* Contrôleur */
var ArticlesController = Stapes.subclass({

	constructor: function() {
		var self    = this;
		this.model  = new ArticlesModel();
		this.view   = new ArticlesView(this.model);

		/* Ecouteur */
		this.model.on('change', function(id) {
			var obj = self.model.get(id);

			switch(obj.item) {
				case 'add': /* Ajout d'un article */
					self.model.add();
				break;
			}
		});

		/* Chargement des articles */
		this.model.load();
	}

});

Pour éxécuter le tout (dans un autre fichier, de préférence) :

var articles = new ArticlesController();

Je le répète, c’est moi qui ai décidé de l’architecture, cela pourra vous inspirer.

Le modèle :

  • Contient les variables à utiliser dans tout le fichier (à placer dans le constructeur)
  • Contient les variables sélecteur (jQuery) dans getSelector()
  • Contient le getter et setter
  • Contient les autres méthodes

La vue :

  • Contient les gestionnaires d’événements, du type .on(‘click’), etc
  • Ces événements ne doivent pas faire de traitement, ils doivent déclencher l’écouteur du contrôleur qui-lui même appelle la méthode du modèle adéquate

Le contrôleur :

  • Contient le routage des événements reçus de la vue pour transmission au modèle
  • Exécute si nécessaire des méthodes du modèle au chargement

En guise de mot de la fin, je trouve que c’est beaucoup moins compliqué que les gros frameworks MVC du « marché ». Et tout dépend du besoin, comme d’habitude.
Vous pouvez d’ailleurs trouver son exemple TodoMVC.

Vous aimerez aussi...