Mootools - как уничтожить экземпляр класса

Question

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

<a href="some-document.pdf" onmouseover="new TestClass(this)">Testing</a>

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

Код:

TestClass = new Class({
    initialize: function(anchor) {
        this.anchor = $(anchor);
        if(!this.anchor) return;

        if(!window.zzz) window.zzz = 0;
        this.id = ++window.zzz;

        this.anchor.addEvent('mouseout', function() {
            // i need to get a reference to this function
            this.hide();
        }.bind(this));

        this.show();

    },
    show: function() {
        // TODO: cool web 2.0 stuff here!
    },
    hide: function() {
        alert(this.id);

        //this.removeEvent('mouseout', ?);  // need reference to the function to remove

        /*** this works, but what if there are unrelated mouseout events? and the class instance still exists! ***/
        //this.anchor.removeEvents('mouseout');

        //delete(this);  // does not work !
        //this = null; // invalid assignment!
        //this = undefined; // invalid assignment!

    }
});

Что в настоящее время происходит с приведенным выше кодом:

• 1-й тайм-аут: оповещения 1
• 2-й тайм-аут: оповещения 1, 2
• 3-й тайм-аут: предупреждения 1, 2, 3
• и т. Д.

Желаемое поведение:

• 1-й тайм-аут: предупреждения 1
• 2-й тайм-аут: оповещения 2
• 3-й тайм-аут: оповещения 3
• и т. Д.

Проблема заключается в том, что каждый раз, когда я нажимаю на ссылку, создаюновый экземпляр класса и добавление нового события mouseout для этого экземпляра.Экземпляр класса также остается в памяти неопределенно долго.

При наведении мыши мне нужно удалить событие mouseout и уничтожить экземпляр класса, поэтому при последующих наведениях мыши мы начинаем заново.

Я мог бы создать помощникаФункция для этого, чтобы убедиться, что класс создается только один раз для каждой ссылки, что-то вроде этого:

function TestClassHelper(anchor) {
    anchor = $(anchor);
    if(!anchor) return;

    if(!anchor.retrieve('TestClass')) anchor.store('TestClass', new TestClass(anchor));
    anchor.retrieve('TestClass').show();
}

<a href="some-document.pdf" onmouseover="TestClassHelper(this)">Testing</a>

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

Answer 1

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

Например:

// inside initialize
this.boundHandler = function() {
    this.hide();
}.bind(this)
this.anchor.addEvent('mouseout', this.boundHandler);

// inside hide    
this.removeEvent('mouseout', this.boundHandler);

См. removeEvent docs для примеров этой самой проблемы.

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