2. Améliorations du code - Nicodev17/Todo_list_app_recovery GitHub Wiki
Suppression de boucles inutiles dans controller.js
Dans la fonction Controller.prototype.editItemSave initialement comme ceci :
Controller.prototype.editItemSave = function (id, title) {
var self = this;
while (title[0] === " ") {
title = title.slice(1);
}
while (title[title.length-1] === " ") {
title = title.slice(0, -1);
}
if (title.length !== 0) {
self.model.update(id, {title: title}, function () {
self.view.render('editItemDone', {id: id, title: title});
});
} else {
self.removeItem(id);
}
};
Les deux boucles while était inutiles et ont été remplacées par la méthode trim() directement appliquée sur title comme ceci :
Controller.prototype.editItemSave = function (id, title) {
var self = this;
title = title.trim();
if (title.length !== 0) {
self.model.update(id, {title: title}, function () {
self.view.render('editItemDone', {id: id, title: title});
});
} else {
self.removeItem(id);
}
};
Suppression d'une boucle for inutile dans store.js et simplification
Dans la fonction Store.prototype.remove initialement comme ceci :
Store.prototype.remove = function (id, callback) {
var data = JSON.parse(localStorage[this._dbName]);
var todos = data.todos;
var todoId;
for (var i = 0; i < todos.length; i++) {
if (todos[i].id == id) {
todoId = todos[i].id;
}
}
for (var i = 0; i < todos.length; i++) {
if (todos[i].id == todoId) {
todos.splice(i, 1);
}
}
localStorage[this._dbName] = JSON.stringify(data);
callback.call(this, todos);
};
La première boucle for était inutile et a été supprimée, la seconde a été adaptée, voici la fonction simplifiée :
Store.prototype.remove = function (id, callback) {
var data = JSON.parse(localStorage[this._dbName]);
var todos = data.todos;
for (var i = 0; i < todos.length; i++) {
if (todos[i].id === id) {
todos.splice(i, 1);
}
}
localStorage[this._dbName] = JSON.stringify(data);
callback.call(this, todos);
};
Simplification de la fonction de gestion des évènements dans view.js
Structure 'if/else if' redondante et sale dans la fonction View.prototype.bind :
View.prototype.bind = function (event, handler) {
var self = this;
if (event === 'newTodo') {
$on(self.$newTodo, 'change', function () {
handler(self.$newTodo.value);
});
} else if (event === 'removeCompleted') {
$on(self.$clearCompleted, 'click', function () {
handler();
});
} else if (event === 'toggleAll') {
$on(self.$toggleAll, 'click', function () {
handler({completed: this.checked});
});
} else if (event === 'itemEdit') {
$delegate(self.$todoList, 'li label', 'dblclick', function () {
handler({id: self._itemId(this)});
});
} else if (event === 'itemRemove') {
$delegate(self.$todoList, '.destroy', 'click', function () {
handler({id: self._itemId(this)});
});
} else if (event === 'itemToggle') {
$delegate(self.$todoList, '.toggle', 'click', function () {
handler({
id: self._itemId(this),
completed: this.checked
});
});
} else if (event === 'itemEditDone') {
self._bindItemEditDone(handler);
} else if (event === 'itemEditCancel') {
self._bindItemEditCancel(handler);
}
};
Remplacement de cette structure par un switch plus clair :
View.prototype.bind = function (event, handler) {
var self = this;
switch (event) {
case 'newTodo':
$on(self.$newTodo, 'change', function() { handler(self.$newTodo.value) });
break;
case 'removeCompleted':
$on(self.$clearCompleted, 'click', function() { handler() });
break;
case 'toggleAll':
$on(self.$toggleAll, 'click', function() { handler({completed: this.checked}) });
break;
case 'itemEdit':
$delegate(self.$todoList, 'li label', 'dblclick', function() {handler({id: self._itemId(this)}) });
break;
case 'itemRemove':
$delegate(self.$todoList, '.destroy', 'click', function() { handler({id: self._itemId(this)}) });
break;
case 'itemToggle':
$delegate(self.$todoList, '.toggle', 'click', function() { handler({ id: self._itemId(this), completed: this.checked}) });
break;
case 'itemEditDone':
self._bindItemEditDone(handler);
break;
case 'itemEditCancel':
self._bindItemEditCancel(handler);
break;
}
};
Amélioration de l'affichage du compteur dans template.js
La fonction Template.prototype.itemCounter qui indique le nombre de tâches restantes présentait un bug minime affichant un 's' pour le cas où il ne reste plus de tâches à faire exemple : "0 items left"
Template.prototype.itemCounter = function (activeTodos) {
var plural = activeTodos === 1 ? '' : 's';
return '<strong>' + activeTodos + '</strong> item' + plural + ' left';
};
Nous avons optimisé le rendu du compteur comme ceci :
Template.prototype.itemCounter = function (activeTodos) {
var plural = activeTodos === 1 || activeTodos === 0 ? '' : 's';
return '<strong>' + activeTodos + '</strong> task' + plural + ' left';
};
De ce fait à présent lorsqu'il reste 0 tâche à faire le compteur indique bien "0 task left".
En conclusion ce ne sont peut-être que de petites améliorations mais cela fluidifie le code en le rendant plus moderne et optimisé. Mais surtout cela permet de diminuer l'écriture de code afin d'économiser des données au chargement de l'appli et donc de gagner en vitesse.