Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.08.2018, 10:48
Аватар для villiwalla
Интересующийся
Отправить личное сообщение для villiwalla Посмотреть профиль Найти все сообщения от villiwalla
 
Регистрация: 16.02.2016
Сообщений: 26

Советы по todo
Надеюсь, веткой не промазал.
Дабы лучше разобраться в JS, решил начать с примитивов. Первым что решил сделать это TODO. Вроде реализовать туду мне удалось, конечно наверняка собрав все самые детские грабли. Хотел бы получить комментарии с указанием на те самые грабли и возможно какие либо полезные советы, что бы держать вектор развития. Спасибо.

Линк

Вопросы:
1. Каким образом можно лучше организовать подписку элементов на события?
2. Почему в 80 строке if(row.classList.contains(elemClass)), в консоль пишет что у classList нету метода contains? (см.вложение) Хотя он работает как надо.
3. Чем заменить forEach в findById? Подойдёт ли map или filter, но тогда придётся перезаписывать let todos, плохо это или хорошо?
Изображения:
Тип файла: png Снимок экрана от 2018-08-10 10-35-50.png (5.7 Кб, 5 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 10.08.2018, 11:12
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,225

Сообщение от villiwalla
Почему в 80 строке if(row.classList.contains(elemClass)), в консоль пишет что у classList нету метода contains?
В какой-то ситуации у вашего "row" нет свойства "classList", а у null нет метода "contains".

Сообщение от villiwalla
3. Чем заменить forEach в findById? Подойдёт ли map или filter, но тогда придётся перезаписывать let todos, плохо это или хорошо?
Почему не создать дополнительный объект, в котором список задач будет индексированным? Тогда от перебора в этой функции можно вообще отказаться, все сведется к проверке наличия значения в индексном объекте и возвращению оного либо выбрасыванию ошибки.

Последний раз редактировалось Nexus, 10.08.2018 в 11:18.
Ответить с цитированием
  #3 (permalink)  
Старый 10.08.2018, 11:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,071

villiwalla,
Сообщение от villiwalla
2. Почему в 80 строке if(row.classList.contains(elemClass)), в консоль пишет что у classList нету метода contains?
строка 203 или лишняя или не доделана(получается row, это event, а у event нет classList)
Ответить с цитированием
  #4 (permalink)  
Старый 10.08.2018, 11:15
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 2,783

Сообщение от villiwalla
1. Каким образом можно лучше организовать подписку элементов на события?
addEventListener
Ответить с цитированием
  #5 (permalink)  
Старый 10.08.2018, 11:22
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,450

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));
Ответить с цитированием
  #6 (permalink)  
Старый 10.08.2018, 11:48
Аватар для villiwalla
Интересующийся
Отправить личное сообщение для villiwalla Посмотреть профиль Найти все сообщения от villiwalla
 
Регистрация: 16.02.2016
Сообщений: 26

Сообщение от рони Посмотреть сообщение
villiwalla,

строка 203 или лишняя или не доделана(получается row, это event, а у event нет classList)
Точно, задублировал, и так в rowEvent ловлю клик
Ответить с цитированием
  #7 (permalink)  
Старый 10.08.2018, 12:06
Аватар для villiwalla
Интересующийся
Отправить личное сообщение для villiwalla Посмотреть профиль Найти все сообщения от villiwalla
 
Регистрация: 16.02.2016
Сообщений: 26

Сообщение от Dilettante_Pro Посмотреть сообщение
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
        };


Сообщение от j0hnik Посмотреть сообщение
addEventListener
Это конечно понятно. Но на вопрос не отвечает. Наверное вы его не так поняли. Я о том как разбросаны коллбэки событий, например rowEvent для трёх элементов, отдельно для создания add. Каким образом можно организовать подписку слушателей события на всех элементах управления, более кучно?
Ответить с цитированием
  #8 (permalink)  
Старый 10.08.2018, 13:08
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 301

У вас методы и переменные относящиеся к списку дел являются глобальными, что неожиданно сильно всё усложнит, если вдруг вы захотите, чтобы у вас был ещё один список.

Например, абстрактный тип данных «список дел» может быть оформлен в виде класса, и тогда все списки дел в программе будут являться объектами — экземплярами класса «список дел».

Вызвав 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>


Сообщение от villiwalla
Каким образом можно организовать подписку слушателей события на всех элементах управления, более кучно?
Это может быть сделано при создании нового экземпляра класса ToDoApp, когда вызывается функция constructor.


Сообщение от 9-ое издание спецификации ECMAScript, пункт 4.2.1
[...] часто бывает удобно определить абстракции похожие на класс [...] Встроенные объекты ECMAScript сами следуют такому шаблону. Начиная с ECMAScript 2015, язык ECMAScript включает определение синтаксиса классов, которое позволяет программистам кратко определять объекты, которые соответствуют тому же шаблону абстракции похожей на класс, который используется встроенными объектами.
Ответить с цитированием
  #9 (permalink)  
Старый 10.08.2018, 16:33
Аватар для villiwalla
Интересующийся
Отправить личное сообщение для villiwalla Посмотреть профиль Найти все сообщения от villiwalla
 
Регистрация: 16.02.2016
Сообщений: 26

Malleys,
Спасибо, думал что сделаю как класс следующим этапом, но после того как через прототипы.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
требуются советы по выбору технологий и инструментов Megagluk Серверные языки и технологии 0 17.05.2016 13:51
Прошу дать советы по сайту Heleн Ваши сайты и скрипты 1 10.03.2014 07:11
todo backbone i underscore maksZidan007 Общие вопросы Javascript 2 03.11.2013 01:06
Советы по коду Lansaid Ваши сайты и скрипты 10 07.03.2013 10:46
Нужны советы по коду Joyfit Общие вопросы Javascript 3 01.07.2012 12:33