Fonctionnement global - Geoffrey013/oc-p8-Take-existing-project-over GitHub Wiki

Cette application repose sur le modèle MVC (Model, View, Controller) et n’utilise aucune librairie javaScript externe.

Le pattern MVC permet de bien organiser son code source, le but étant de séparer la logique du code en trois parties que l'on retrouve dans des fichiers distincts.

  • Modèle : cette partie gère les données de l’application. Son rôle est d'aller récupérer les informations « brutes » dans le local storage, de les organiser et de les assembler pour qu'elles puissent ensuite être traitées par le contrôleur.

  • Vue : cette partie se concentre sur l'affichage. Les écouteurs d'événements y sont déclarés. Elle ne fait presque aucun calcul et se contente de transmettre les données liées aux événements et de recevoir des données pour savoir ce qu'elle doit afficher, notamment via template.js qui lui fournira l’ensemble du code HTML dont elle a besoin.

  • Contrôleur : cette partie gère la logique du code qui prend des décisions. C'est en quelque sorte l'intermédiaire entre le modèle et la vue : le contrôleur va demander au modèle les données, les analyser, prendre des décisions et renvoyer ces données à afficher à la vue.

Modèle MVC

L'ensemble des méthodes de ces fichiers est initialisé par "app.js" qui, à sa création, génère une instance de chaque. On peut également constater que le code respectif de ces fichier est englobé dans une fonction anonyme appelée immédiatement. Cela va permettre de s'assurer que les méthodes concernées ne soient pas globales.

helpers.js

De plus, un fichier Helpers est utilisé pour déclarer un ensemble de méthodes globales utiles et récurrentes, comme $parent pour trouver le parent d’un élément, des fonctions de gestion d'événements $on, $delegate… ou encore des sélecteurs $qs, $qsa...