javascript - 封装jQuery块以供重用

我最初打算只使用一次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其他。

如何将其转换为一种插件类型的块，以便可以在多个对象上使用它，而不必一遍又一遍地复制粘贴相同的代码？

最佳答案

您不必为此创建一个完整的插件。相反，您可以使用常见的.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规则并在JS代码中使用addClass()可以进一步改善此规则。