Question

我使用vex dialog library基本上作为标准警报，确认，提示等框的替代品，我一直在使用它们，例如：

$('.js-edit-cancel').on('click', function(e) {

    e.preventDefault();

    vex.dialog.buttons.YES.text = t('Yes');
    vex.dialog.buttons.NO.text = t('No');

    vex.dialog.confirm({
        message: t('Are you sure you want to cancel?'),
        callback: function(value) {

            if (value) {
              // Some code here...
            }

        }
    });

});

现在虽然这有效，但当您使用对话框进行多项操作时，它会开始变得有点重复。

理想情况下，我只需将 HTML5 data-*属性添加到我想要的任何元素上，例如data-confirm-box或data-prompt-box;但是这个方法的问题是我还需要能够设置自定义消息，而不是总是设置为您确定要取消吗？以及能够提供回调函数来运行;我从技术上讲，我可以将这些数据作为额外的data-*属性提供，但它对我来说似乎有些混乱。

然后我想我可以继续为我想要的每个元素做click个事件并传入自定义消息，但我想我也必须以这种方式传递回调然后这会结束每次要使用一个代码块时都有两个代码块; click事件处理程序，然后是回调函数。

有没有更干净的方法来做我想做的事情 - 每次我想要一个确认框时，能够设置自定义消息以及可选的回调/自定义代码吗？

图书馆本身是香草 JavaScript ，但我也正在使用 jQuery ，因为我们很高兴使用它们。

Answer 1

您可以声明并使用统一的功能（比方说showDialog(type, options)）传递对话框的类型和自定义选项对象：

function showDialog(type, options) {
    if (typeof type !== 'string' 
        || ['alert','prompt','confirm','open'].indexOf(type) === -1) {
        throw new Error('Wrong dialog type!');
    }
    // You can specify your own buttons if you want more options than just OK or Cancel. 
    // If you simply want to change the labels, you can override the default options

    // You can also specify a static message text for a certain dialog type
    vex.dialog[type](options);
}

// Approximate usage:
...
$('.js-edit-cancel').on('click', function(e) {
    e.preventDefault();

    showDialog('confirm', {
        message: t('Are you sure you want to cancel?')
    });

});
...

$('.some_element').on('click', function(e) {
    e.preventDefault();

    showDialog('alert', {
        message: t("You don't have permission on this action!")
    });

});
...

$('.some_other_element').on('click', function(e) {
    e.preventDefault();

    showDialog('open', {
        message: t('Select date and time:'),
        callback: function(data) {

            if (data) {
              // Some code here...
            }

        }
    });

});

清理方式调用Vex对话框以避免代码重复？

1 个答案: