Les spécifications techniques - RemiMoustey/to-do-list-app GitHub Wiki

Le projet est bâti sur une architecture MVC en JavaScript.

Des variables globales, qui seront utiles dans tout le reste du code, sont définies dans le fichier helpers.js. Il s'agit de fonction servant à manipuler le DOM et à gérer les événements. De plus, dans le fichier app.js, tous les composants (storage, model, template, view, controller) sont instanciés.

Étape 1 : requête de l'utilisateur

Comme nous le voyons sur l'illustration, le parcours dans les fichiers qui composent l'architecture MVC est déclenché par l'utilisateur qui fait une requête. Le contrôleur récupère cette requête. Dans app.js, deux événements, qui se déclenchent au chargement de la page et au changement d'URL, permettent l'appel de la fonction setView du contrôleur. Dans ces deux cas, le contrôleur filtre les tâches de la to-do list en fonction de l'onglet sélectionné par l'utilisateur et ainsi, de l'URL.

Étape 2 : demande et obtention des données

Dans la fonction _updateCount, le contrôleur fait appel à la fonction getCount du modèle. Ensuite, la méthode findAll du storage permet de sauvegarder la liste dans le localStorage, permettant de simuler une base de données. Il en est de même pour les autres fonctionnalités du CRUD. Par exemple, pour l'ajout de tâches ou pour n'importe quelle autre action dans l'application, après l'appel de la fonction setView du contrôleur. En effet, le constructeur du contrôleur appelle la fonction bind de la vue pour chaque type d'action. Cette fonction bind utilise la fonction $on définie dans helpers.js, qui contient un addEventListener sur la cible. La fonction envoyée par le contrôleur (appelée handler dans la vue) peut alors s'exécuter pour modifier les données et appeler la fonction correspondante dans render, méthode de la vue.

Étape 3 : affichage des données

Une fois la méthode render de la vue appelée, la vue s'occupe des différentes manipulations de DOM avec certaines de ses méthodes et utilise parfois la classe Template via un innerHTML. Les modifications sont alors affichées à l'écran de l'utilisateur.