Советы по todo
Вложений: 1
Надеюсь, веткой не промазал.
Дабы лучше разобраться в JS, решил начать с примитивов. Первым что решил сделать это TODO. Вроде реализовать туду мне удалось, конечно наверняка собрав все самые детские грабли. Хотел бы получить комментарии с указанием на те самые грабли и возможно какие либо полезные советы, что бы держать вектор развития. Спасибо. Линк Вопросы: 1. Каким образом можно лучше организовать подписку элементов на события? 2. Почему в 80 строке if(row.classList.contains(elemClass)), в консоль пишет что у classList нету метода contains? (см.вложение) Хотя он работает как надо. 3. Чем заменить forEach в findById? Подойдёт ли map или filter, но тогда придётся перезаписывать let todos, плохо это или хорошо? |
Цитата:
Цитата:
|
villiwalla,
Цитата:
|
Цитата:
|
villiwalla,
elem.innerText = `(${qty})`; - Не во всех браузерах работает лучше elem.innerText = '('+qty+')'; Если id в todos упорядоченный и без пропусков, то
let todos = [
{id: 1, status: false, text: 'Herb'},
{id: 2, status: false, text: 'Tea'},
{id: 3, status: false, text: 'Potato'},
{id: 4, status: true, text: 'Meat'},
{id: 5, status: false, text: 'Coal'},
{id: 6, status: true, text: 'Beer'},
{id: 7, status: true, text: 'Water'},
];
id = "6";
// todos.forEach((item, i) => {
// if(item.id === parseInt(id)) {
// result = {index: i, todo: item};
// }
// });
let result = {index: id, todo: todos[id-1]} ;
alert(JSON.stringify(result));
|
Цитата:
|
Цитата:
todos.splice(todo.index, 1); При удалении может вырезать середину. При добавлении возрастает:
let id = todos[count(todos) - 1].id + 1;
let todo = {
id: id,
status: false,
text: text
};
Цитата:
|
У вас методы и переменные относящиеся к списку дел являются глобальными, что неожиданно сильно всё усложнит, если вдруг вы захотите, чтобы у вас был ещё один список.
Например, абстрактный тип данных «список дел» может быть оформлен в виде класса, и тогда все списки дел в программе будут являться объектами — экземплярами класса «список дел». Вызвав new ToDoApp вы получаете ссылку на объект, в котором всё относится к одному определённому списку дел.
<body><script>
//описание класса «список дел»
class ToDoApp {
constructor(todos) {
this.todos = todos;
//здесь возможно создать нужные элементы
this.element = document.createElement("div");
this.element.classList.add("todo");
this.activeInput = null; // и т. д.
this.render();
// добавление событии
this.element.addEventListener("keypress", this.rowEvent.bind(this));
this.element.addEventListener("click", this.rowEvent.bind(this));
// добавление в DOM приложения
document.body.appendChild(this.element);
}
count() {}
findById() {}
rowEvent() {}
closeActiveInput() {}
createRow() {}
add() {}
remove() {}
edit() {}
render() {
// для примера вывод текста задач, здесь всё очень приблизительно для примера,
// но вы можете заполнить своим кодом из примера выше
this.element.textContent = this.todos.map(task => task.text).join(", ");
}
}
// пример использования
var todoApp = new ToDoApp([
{id: 1, status: false, text: 'Herb'},
{id: 2, status: false, text: 'Tea'},
]);
var todoApp2 = new ToDoApp([
{id: 1, status: false, text: 'CSS'},
{id: 2, status: false, text: 'HTML'},
]);
</script>
Цитата:
Цитата:
|
Malleys,
Спасибо, думал что сделаю как класс следующим этапом, но после того как через прототипы. |
| Часовой пояс GMT +3, время: 02:16. |