单个元素的多个单击处理程序

Multiple click handlers for a single element

本文关键字：单击 处理 程序 元素 单个      更新时间：2023-09-26

我写了一些事件来处理快照js抽屉的打开和关闭。下面的代码有效，但我觉得它可以更有效地编写。有什么建议吗？

function openMobileMenu() {
    event.preventDefault();
    snapper.open('left');
    $('#btn-menu').off('click', openMobileMenu);
    $('#btn-menu').on('click', closeMobileMenu);
}
function closeMobileMenu() {
    event.preventDefault();
    snapper.close('left');
    $('#btn-menu').on('click', openMobileMenu);
    $('#btn-menu').off('click', closeMobileMenu);
}
$('#btn-menu').on('click', openMobileMenu);

使你的代码模块化，你的概念明确。

您可以从创建一个封装逻辑的 MobileMenu 对象开始。

注意：未测试以下代码。 

var MobileMenu = {
    _snapper: null,
    _$button: null,
    _direction: 'left',
    init: function (button, snapper, direction) {
        this._$button = $(button);
        this._snapper = snapper;
        if (direction) this._direction = direction;
        this._toggleSnapperVisibilityWhenButtonClicked();
    },
    _toggleSnapperVisibilityWhenbuttonClicked: function () {
        this._$button.click($.proxy(this.toggle, this));
    },
    toggle: function () {
        var snapperClosed = this._snapper.state().state == 'closed',
            operation = snapperClosed? 'open' : 'closed';
        this._snapper[operation](this._direction);
    }
};

然后在您的页面中，您只需执行以下操作来初始化您的功能：

var mobileMenu = Object.create(MobileMenu).init('#btn-menu', snapper);
从长远来看，模块化

代码将使其更易于维护和理解，但也允许您对其进行单元测试。由于组件的公开 API，允许其他代码与之交互，因此您还可以获得更灵活的收益。

例如，您现在可以使用mobileMenu.toggle()切换菜单可见性。

使用变量来跟踪状态：

var menu_open = false;
$("#btn-menu").on('click', function(event) {
    event.preventDefault();
    if (menu_open) {
        snapper.close('left');
    } else {
        snapper.open('left');
    }
    menu_open = !menu_open; // toggle variable
});
snap

有一个 .state() 方法，该方法返回一个填充了属性的对象，其中一个是 .state 。

我想你想要：

$('#btn-menu').on('click', function() {
    if(snapper.state().state == "closed") {
        snapper.open('left');
    } else {
        snapper.close('left');
    }
});

或者，在一行中： 

$('#btn-menu').on('click', function() {
    snapper[['close','open'][+(snapper.state().state == 'closed')]]('left');
});

另外，请查看文档中的如何制作切换按钮？

相关文章：