1.0Чудо{вищные} заметкиhttps://miracle.rpz.nameMiRacLehttps://miracle.rpz.name/author/miracle/Оборачиваем событие jQuery собственным обработчикомСовременный фронтенд несётся скоростным поездом, в окнах мелькают es6, <del>es7</del> es2015, react, redux и куча других пассажиров. И не везде этот поезд останавливается. Но на станциях по-прежнему полно ...jQuery.
И сегодня понадобилось дополнить "чужой" обработчик события (для простоты пусть будет onClick) дополнительными проверками, которые "чужим" не предусмотрен:
<pre class="javascript">
jQuery('element').bind('click', function() {
if (checkIt()) {
doIt();
}
});
</pre>
В дополнение к checkIt() необходимо <em>позвать</em> ещё и testIt().
В простейшем случае обработчик события может быть именованной функцией и задача становится тривиальной:
<pre class="javascript">
// editable "original"
function clickHandler(event) {
if (checkIt()) {
doIt();
}
}
jQuery('element').bind('click', clickHandler);
// custom code
jQuery('element').unbind('click').bind(function(e) {
if (testIt()) {
clickHandler(e);
}
});
</pre>
Но "чужой" код изменить нельзя, а значит обработчик события останется анонимной функцией. Как до неё добраться ?
Беглый поиск по исходникам jQuery помог найти недокументированный метод <strong>jQuery._data</strong>, который поможет добраться до скрытых в его недрах обработчиков события. Несмотря на наличие комментария:
<blockquote>_Never_ expose "private" data to user code (TODO: Drop _data, _removeData)</blockquote>
в интересующей меня ветке 1.xx, методы (вместе с комментарием) перекочевали в последнюю на данный момент версию 3.1, а значит я без риска и страха использую их и даже порекомендую вам сделать тоже самое, но всё же на ваш страх и риск, в похожей небезвыходной ситуации.
И так к делу:
<pre class="javascript">
// original HARDcode
jQuery('element').bind('click', function() {
if (checkIt()) {
doIt();
}
});
// custom code
var originalClickHandler = jQuery._data( element ).events.click[0].handler; // save handler
jQuery('element')
.unbind('click') // remove handler
.bind('click', function(e) {
if (testIt()) { // wrap old handler with custom logic
originalClickHandler(e)
}
});
</pre>
Буду надеятся что таким чудо{вищным} методом никому больше воспользоваться не придётся.rich