Чистый способ передачи параметров между событиями Javascript?

Question

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

Я использую глобальные переменные для хранения этих значений. Кажется, есть лучшие способы сделать это, например, поместить эти значения в объект с пространством имен. Выгоды? Любые другие предложения?

Answer 1

Мое любимое занятие - вставлять переменные в обработчики событий.Curry является прототипом функции и при вызове функции возвращает версию функции с предустановленными аргументами:

Function.prototype.curry = function curry() {
    var fn = this, args = Array.prototype.slice.call(arguments);
    return function curryed() {
        return fn.apply(this, args.concat(Array.prototype.slice.call(arguments)));
    };
};

node.addEventListener('mousedown', handler.curry(var1,var2,etc));

Answer 2

Вы можете привязать данные к родительскому элементу, который является релевантным контейнером для каждого значения.Например, скажем, у вас есть #dragAndDropContainer, в котором есть много перетаскиваемых и сбрасываемых элементов, а затем, как только событие перетаскивания срабатывает (т.е. начинается перетаскивание), вы можете (в jQuery) выполнить:

$('#dragAndDropContainer').data('lastDragged', $(this).attr('id'));

А затем просто запрашивайте $('#dragAndDropContainer').data('lastDragged') каждый раз, когда вам нужно.

Answer 3

Мне нравится решение Дэвина, но есть альтернатива, если оно вам не подходит. Вы можете создать замыкание вокруг обработчика событий следующим образом:

var data = { x: 1, y: 2 };
var handler = function() {
  console.log(data);
}

if (node.addEventListener) {
  node.addEventListener('mousedown', handler, false);
} else {
  node.attachEvent('onmousedown', handler);
}

Answer 4

Альтернатива использованию Function.bind (иногда его называют карри): вы можете контролировать область действия вашей общей переменной.Вот некоторый псевдокод jQuery, демонстрирующий это.Shared доступен для этих двух обработчиков и больше ни для кого.

$(function(){
  var shared = {a:1, b:2};
   $('#id-1').click(function() {
      alert(shared.a);
   });

   $('#id-2').click(function() {
      alert(shared.b);
   });
});

Если вы пишете процедурный код jQuery, подход замыкания гораздо проще.Поскольку почти все, что я пишу, является объектом, я бы предпочел не заходить на слишком много уровней внутренних замыканий, поэтому я предпочитаю устанавливать обработчик с привязкой / каррированием (как пример Мартина), если обработчику требуется доступ к разделяемым переменным.*