Как расширить собственный метод mootools

Можно ли расширить функцию addEvent в mootools, чтобы что-то делать, а также вызывать обычный метод addEvent? Или, если у кого-то есть лучший способ делать то, что мне нужно, мне все годы.

У меня разные обработчики кликов в зависимости от того, на какой странице я нахожусь. Кроме того, их может быть несколько на каждой странице. Я хочу, чтобы каждый щелчок по странице выполнял фрагмент кода, помимо того, что делал бы этот прослушиватель щелчков. Добавление этих двух строк в каждый из обработчиков было бы PITA, мягко говоря, поэтому я подумал о переопределении addEvent, который каждый раз, когда я добавляю прослушиватель щелчка, будет создавать новую функцию, выполняющую код, а затем вызов функции.

Есть идеи, как я мог это сделать?


person Yohan Leafheart    schedule 18.07.2011    source источник


Ответы (1)


Хотя это не невозможно, это сомнительная практика - изменение внутреннего apis mootools. Если вы не разбираетесь в mootools, не следуете указаниям разработчиков на github и не знаете, что ваше изменение не нарушит совместимость в будущем, я бы не рекомендовал это делать.

На мой взгляд, у вас есть два пути:

  1. создайте новый метод Element через implement, который выполняет вашу логику. например: Element.addMyEvent, который делает ваше дело, а затем вызывает обычный element.addEvent. это предпочтительнее и не имеет реальных побочных эффектов (см. выше)

  2. изменить прототип напрямую. означает, что вам не нужно реорганизовывать какой-либо код, и он просто будет работать. это может означать, что у других, кто приступит к работе с вашим кодом, возникнут трудности с его отслеживанием / поиском и устранением неполадок - подумайте, кто-то, кто знает mootools и стандартное addEvent поведение, даже не подумает проверять прототипы, если у них возникнут проблемы.

  3. Выход mootools 2.0, скорее всего, АННУЛИРУЕТ метод 2, описанный выше, если mootools перейдет от модификации Element.prototype в пользу оболочки (для совместимости с другими фреймворками). Вернитесь к методу 1 :)

Думаю, решение 1 лучше и очевиднее.

как для 2: http://jsfiddle.net/dimitar/aTukP/

(function() {
    // setup a proxy via the Element prototype.
    var oldProto = Element.prototype.addEvent;

    // you really need [Element, Document, Window] but this is fine.
    Element.prototype.addEvent = function(type, fn, internal){
        console.log("added " + type, this); // add new logic here. 'this' == element.
        oldProto.apply(this, arguments);
    };

})();

document.id("foo").addEvent("click", function(e) {
    e.stop();
    console.log("clicked");
    console.log(e);
});

это так просто. имейте в виду, что Element.events также следует перейти к документу и окну. кроме того, это не изменит миксин классов Events, для этого вам нужно вместо этого выполнить рефакторинг Events.addEvent.

person Dimitar Christoff    schedule 18.07.2011
comment
Спасибо за отличный ответ, Димитар. Я согласен с тем, что метод 1 - лучший из двух, и я постараюсь применить его к делу. Что касается метода 2, у меня есть функция, называемая domready (первая), которая реализует несколько вещей для элемента, вызова этого кода будет достаточно? - person Yohan Leafheart; 18.07.2011
comment
НЕТ. добавьте этот код ДО готовности. это влияет на прототипы, и его нужно просто определить, прежде чем вы начнете с событий. - person Dimitar Christoff; 18.07.2011