Лучший способ реализовать События на Javascript - PullRequest
1 голос
/ 09 ноября 2019

Как разработчик .NET, я привык к делегатам и событиям на пользовательских элементах управления. Я уже давно создаю javascript-коды, но мне интересно, как лучше реализовать это в javascript. Ниже описано, как я обычно кодирую свои компоненты.

var RGComp= RGComp || {};
RGComp.MyComponent = function () {
    function events(){
        $("a").unbind("click");
        $("a").click(function () {
             // Do something
        });
    }
    function generateUI(){
        //generate HTML UI
        events();
    }
}

Я уверен, что это неправильно. Я должен звонить unbind все время, чтобы избежать засорения DOM. Большое спасибо заранее.

1 Ответ

0 голосов
/ 09 ноября 2019

Глобальные обработчики событий

Будут люди за и против всего, включая движение молекул воздуха, хотя в конце дня все, что имеет значение, это то, что вы можете делать то, что вам нужноделать, и вы остаетесь организованным в процессе. На веб-платформе JAB Creations мы используем глобальные события, где это уместно, и иногда мы устанавливаем специфичные для элемента события , если необходимо .

//Do not shorten event to e, you WILL want to reference e separately.
window.onclick = function(event)
{
 if (condition) {}
 else if (condition) {}
}

Установка определенных событий:

  1. Обычно вам нужно проверить, подходит ли section() или page() (при условии, что вы располагаете правильной информационной иерархией).
  2. Вы захотите, чтобы функция возвращалаидентификатор текущей страницы, в моем случае это push_current_id() или id_(push_current_id()) (например, push_current_id() == 'admin_' для панели управления и до снятия ограничения символов для атрибута id в HTML5).
  3. Установка статических событийдля определенных элементов это хорошо в некоторых обстоятельствах, хотя часто вы захотите использовать универсально применимые поведения:

CTRL + Горизонтальная прокрутка:

window.onwheel = function(event)
{
 if (event.ctrlKey)
 {
  if (e.scrollHeight > e.clientHeight && event.deltaY != 0)
  {
   event.preventDefault();
   //Change 5 to adjust sensitivity.
   e.scrollLeft = e.scrollLeft + (5 * event.deltaY);
  }
  //else if (condition) {}//Other behavioral tweaks.
 }
 //else if (condition) {}//Other behavioral tweaks.
}

Основной выводчто вы ограничиваете большинство, если не все ваши вызовы событий, глобальными обработчиками, и вы можете быть настолько специфичными или широкими в условиях, которые требуются для того, чтобы элемент связывался с частями этих глобальных эвэнтов. Вам не нужно добавлять / удалять события, просто измените ваши if условия. Я уверен, что кто-то там будет категорически не согласен, хотя у нас не было ничего, кроме успеха с этим подходом для всей веб-платформы, предназначенной для явной работы в отсутствие фреймворков и библиотек для максимизации производительности.

...