Question

我已经写了几个事件来处理snap 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);

Answer 1

使用变量来跟踪状态：

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
});

Answer 2

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');
});

另外，请检查文档中的How do I make a toggle button?。

Answer 3

使您的代码模块化并明确您的概念。

您可以先创建一个封装逻辑的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允许其他代码与之交互，因此您也可以获得更多灵活性。

E.g。您现在可以使用mobileMenu.toggle()切换菜单可见性。

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

3 个答案: