Инкапсулировать блок jQuery для повторного использования

Question

У меня есть этот код jQuery, который я изначально планировал использовать только один раз, но теперь выясняется, что я должен использовать его для нескольких экземпляров, но я не очень хорошо знаком с инкапсуляцией кода.

Так что мой вопрос, первый блок:

$('.share-checklist-trigger').click(function() { 
    $('body').addClass('no-overflow'); 
    $(document).scrollTop(-1); 
    $('.widget-top-drawer.share-checklist-drawer').slideToggle(244, "linear").dimBackground({ 
     darkness: 0.2 
    }); 
    $('.widget-top-drawer-header').slideToggle(244, "linear").attr('style', 'display: flex;'); 
    $('.dashboard-main').addClass('top-draw-out'); 
}).stop(); 

вещи, которые будут меняться от ссылки на объект в другой класс после основного класса .widget-top-drawer.share-checklist-drawer, например, - .share-checklist-drawer будет чем-то другим и основным селектором, например. - .share-checklist-trigger что-то еще.

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

Answer 1

Для этого необязательно создавать для этого целый плагин. Вместо этого вы можете использовать обычный класс .share-checklist-trigger для группировки необходимых элементов. Затем вы можете поместить атрибут data для этих элементов для изменения исполняемой логики в обработчике событий. Попробуйте это:

<div class="share-checklist-trigger" data-target=".widget-top-drawer.share-checklist-drawer">Foo</div> 
<div class="share-checklist-trigger" data-target=".fizz.buzz">Bar</div> 

$('.share-checklist-trigger').click(function() { 
    var target = $(this).data('target'); 
    $('body').addClass('no-overflow'); 
    $(document).scrollTop(-1); 
    $(target).slideToggle(244, "linear").dimBackground({ 
     darkness: 0.2 
    }); 
    $('.widget-top-drawer-header').slideToggle(244, "linear").css('display', 'flex'); 
    $('.dashboard-main').addClass('top-draw-out'); 
}).stop(); 

отметить также использование css() над установкой style непосредственно с помощью attr(). это можно было бы дополнительно улучшить, установив правило display: flex в классе во внешней таблице стилей и используя addClass() в вашем JS-коде.