javascript - 封装 jQuery block 以供重用

Question

我有这段jQuery代码，本来打算只用一次，现在发现要在多个实例上用，而且对代码封装不是很熟悉。

所以我的问题是，首先是 block :

$('.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 到其他东西。

我怎样才能把它变成一种插件类型的 block ，这样我就可以在多个对象上使用它，而不用一遍又一遍地复制粘贴相同的代码？

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() 而不是直接使用 attr() 设置 style。这可以通过在外部样式表的类中设置 display:flex 规则并在 JS 代码中使用 addClass() 来进一步改进。