Description Technique - Hinato15/Projet-8-DAF GitHub Wiki
Arborescence
L'image suivante montre l'arborescence de notre application
.
-
On y retrouve le fichier
index.html
à la racine. -
Le dossier
js
qui contient les fonctionnalités. -
node_modules
qui contient notre framework de test unitaire. -
Et pour finir le dossier
test
qui contient nos tests unitaires.
js
Descriptif Technique du dossier Cette partie explique le rôle et le fonctionnement de chaque fichier.
A noter que l'application est conçu selon le motif MVC ( Modèle-vue-contrôleur ).
app.js
C'est ici que notre application
de todos est initialisée.
-
Todo
récupère tout ce dont il a besoin pour générer notre application.- Les données stockées en LocalStorage ( s'il y en a ).
- Le modèle
- Le template qui sera passé à la vue
- Le contrôleur
-
setView
s'occupe de la gestion de la vue au chargement de la page.
controller.js
Le contrôleur est positionné entre le modèle et la vue et permet de modifier cette dernière en fonction des données.
Controller
: Crée le lien entre le modèle et la vue.setView
: Charge et initialise la vue.showAll
: Affiche tous les todos.showActive
: Affiche les todos actifs.showCompleted
: Affiche les todos complétés.addItem
: Se charge d'ajouter un todo.editItem
: Lance la modification d'un todo.editItemSave
: Enregistrer la modification d'un todo.editItemCancel
: Annule la modification d'un todo.removeItem
: Supprime un todo du DOM et du Storage.removeCompletedItems
: Supprime tous les todos complétés du DOM et du Storage.toggleComplete
: Coche ou décoche un todo.toggleAll
: Coche ou décoche tous les todos._updateCount
: Met à jour le nombre de todos._filter
: Filtre les todos selon leur statut._updateFilterState
: Mets à jour le statut des todos selon le filtre choisi.
helpers.js
Ce fichier est comme un framework sauf qu'il est beaucoup plus léger puis qu'il ne possède que quelques fonctions.
qs
récupère un élément en utilisant un sélecteur css.qsa
récupère tous les éléments en utilisant un sélecteur css.$on
ajoute un addEventListener à un élément existant.$delegate
ajoute un gestionnaire d’événement à tous les éléments sélectionnés existant et/ou créer.$parent
trouve le parent d'un élément en utilisant son tag.forEach
permet de boucler sur plusieurs éléments sélectionnés.
model.js
Ce fichier est le modèle de notre application.
Model
s'occupe de créé une nouvelle instance du modèle.create
s'occupe de créé un nouveau modèle.read
cherche et retourne un modèle dans le storage.update
met à jour un modèle en lui attribuant un ID.remove
supprime un modèle du storage.removeAll
supprime toutes les données du storage.getCount
retourne le nombre total de todos.
store.js
Il se charge de créer un nouvel objet de stockage côté client.
Store
créé une base dans le LocalStorage.find
trouve un élément en fonction d'une requête.findAll
récupère tous les éléments.save
sauvegarde un élément.remove
supprime un élément.drop
supprime tous les éléments.
template.js
Il est utilisé par la vue pour générer l'affichage.
Template
définit les valeurs par défaut.show
ajoute le(s) todo(s).itemCounter
affiche un compteur du nombre de todos.clearCompletedButton
ajoute le bouton Clear completed.
view.js
Il s'occupe de l'affichage de notre application
.
View
résume complètement le DOM du navigateur._removeItem
surprime un todo._clearCompletedButton
affiche ou masque le bouton Clear completed._setFilter
ajoute une classe au filtre sélectionné._elementComplete
ajoute un style à un todo validé ou le supprime._editItem
gère le style lors de la modification d'un todo._editItemDone
restaure le style par défaut après la modification._itemId
récupère l'ID d'un todo._bindItemEditDone
restaure le style par défaut lors de la perte du focus._bindItemEditCancel
restaure le style par défaut lorsque la modification est annulée.bind
ajoute des événements.