Где используются кастомные события?

Question

[0x80070005]

Ребята, задался таким вот вопрос, где в основном используются кастомные события? Недавно вот писал todo list и я там использовал кастомные события. Написал событие на вывод сами todo и события на добавление и удаление. Верно ли я поступил? Ну, как по мне, это верное решение и код читается понятным, чем какие-то функции. В каких проектах Вы бы использовали?

Comments

[alexalexes]

где в основном используются кастомные события?

Там, где вы разрабатываете компоненты интерфейса без использования фреймворков и библиотек, как говорят, на чистом JS.
Большая часть архитектур современных фреймворков построена так, что обработчики событий компонентов вы пишите, придерживаясь концепции выбранного фреймворка. Вам на низкий уровень спускаться не нужно, только познакомиться в учебных целях.

Верно ли я поступил?

Пример кода в студию.

[0x80070005]

alexalexes, Хорошо! Сейчас скину

[0x80070005]

alexalexes,

'use strict'; 
 
(function (d) { 
    const input = d.querySelector('input'); 
    const button = d.querySelector('button'); 
 
    const initialTask = ['Tesk 1', 'Task 2']; 
    const tasks = [...initialTask]; 
 
    const events = new EventEmitter; 
 
    events.on('tasks', task => { 
        console.log(task); 
    }); 
 
    events.on('addTask', (task, val) => { 
        console.log('[EventEmitter] Add Task ' + val); 
        events.trigger('tasks', task); 
    }); 
 
    events.trigger('tasks', tasks); 
 
    button.addEventListener('click', () => { 
        const val = input.value; 
        if (val.length === 0) { 
            return; 
        } 
        tasks.push(val); 
 
        events.trigger('addTask', tasks, val); 
         
        input.value = ''; 
    }); 
})(document);

[0x80070005]

alexalexes, немного объясню, что тут я написал. Имеется у меня в общем поле и обычная кнопка для добавления нового таска в массив. При загрузке странице я сразу триггерю массив тасков чтобы их вывести. Также имеется событие на добавление нового таска. После добавление нового таска, я триггерю его и получаю это событие для того, чтобы триггерить повторное событие на вывод самих тасков. Триггерю событие tasks в addTask для того, чтобы оно было все типо в реальном времени :)

[0x80070005]

alexalexes, если что я в курсе, что EventEmitter больше для ноды, а в клиенте уже имеется CustomEvent. Но честно говоря, я не понял отличие CustomEvent от своего написаного EventEmitter :)

Поэтому решил написать свой класс, чем использовать уже готовый класс)

[alexalexes]

const tasks = [...initialTask];
Под список задач нужно создавать отдельный прототип объекта taskList со своими методами, обработчиками, событиями. Голый массив задач не может лежать отдельно, он должен быть внутри taskList и иметь отдельные методы доступа. В общем, тут нужно усилить ООП-шность. Нужно создать такой прототип, чтобы он сам следил за состоянием своего ресурса-массива.

[0x80070005]

alexalexes, верно? :)

//TaskList.js

class TaskList extends EventEmitter { 
    constructor (initialTask = []) { 
        super(); 
        this.tasks = [...initialTask]; 
    } 
 
    getTasks () { 
        return this.tasks; 
    } 
 
    addTask (task) { 
        this.tasks.push(task); 
 
        this.trigger('addTask', task); 
        this.triggerTask(); 
    } 
 
    triggerTask () { 
        this.trigger('tasks', this.getTasks()); 
    } 
}

// index.js

(function (d) { 
    const input = d.querySelector('input'); 
    const button = d.querySelector('button'); 
 
    // Default tasks 
    const initialTasks = ['Task 1', 'Task 2']; 
    const taskList = new TaskList(initialTasks); 
 
    taskList.on('tasks', task => console.log(task)); 
    taskList.on('addTask', task => console.log('[EventEmitter]: Add New Task ' + task)) 
 
    button.addEventListener('click', (_) => validInput(input, value => taskList.addTask(value))); 
 
    // Field validation 
    let validInput = (elem, fn) => { 
        const trimmedValue = elem.value.trim(); 
        if (trimmedValue.length === 0) return; 
 
        fn(trimmedValue); 
        elem.value = ''; 
    } 
 
    taskList.triggerTask(); // task insulation 
})(document)

[WbICHA]

alexalexes,

Под список задач нужно создавать отдельный прототип объекта taskList со своими методами

А что, можно использовать только ООП и любой другой вариант под запретом?

Answer 1

[Антон Иванов]

Хороший пример, это плагины или npm-библиотеки. Вы даёте пользователю большую гибкость при использовании таких плагинов. Например, модалка - тут прям напрашиваются события onModalOpen, onModalClose и подобные.