Précisions sur les closures
Bonjour, j'ai repris JS depuis peu et je bloque sur les closures c'est encore vague.
Voilà ce que j'ai compris: chaque variable déclarée ou paramètre d'une fonction mère pourront être utilisées dans les fonctions filles mais j'aimerais comprendre avec les contextes d'exécutions, le cheminement des variables... Voilà 2 fonctions pour faire la traditionnelle todoList içi todo et index sont récupéré via les closures par createTodoElement
Merci d'avance pour les éclaircissements
Code:
1 2 3 4 5 6 7 8 9 10 11 12
|
const displayTodo = () => {
const todosNode = todos.map((todo, index) => {
if (todo.editMode) {
return createTodoEditElement(todo, index);
} else {
return createTodoElement(todo, index);
}
});
ul.innerHTML = "";
ul.append(...todosNode);
}; |
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
| const createTodoElement = (todo, index) => {
const li = document.createElement("li");
const buttonDelete = document.createElement("button");
buttonDelete.innerHTML = "Supprimer";
const buttonEdit = document.createElement("button");
buttonEdit.innerHTML = "Editer";
buttonDelete.addEventListener("click", (event) => {
event.stopPropagation();
deleteTodo(index);
});
buttonEdit.addEventListener("click", (event) => {
event.stopPropagation();
toggleEditMode(index);
});
li.innerHTML = `
<span class="todo ${todo.done ? " done" : ""}"></span>
<p>${todo.text}</p>
<button>Supprimer<button>
`;
li.addEventListener("click", (event) => {
toggleTodo(index);
});
li.append(buttonEdit, buttonDelete);
return li;
}; |