Question

我只是JS的初学者并且在前端工作。我制作了一些工作代码，但它让我很难维护和扩展它。我想尽可能地转向函数式编程，但我无法理解如何处理我的延迟。

工作代码（制作模态，询问2个参数，然后继续使用参数，或关闭模态，不要继续前进）：

var defer = $.Deferred();

var modal = {
    class: 'modal-box',
    title: 'Action required',
    message: 'Please specify where to split:',
    choices: [{modePK: 0, mode: 'All', checked: true},
              {modePK: 1, mode: 'Right-most'},
             ]

    };

$('body').append($('<div id="overlay_visible">'));
$('body').append($(Mustache.render($("#modal-delimiter-template").html(), modal)));

$('body').on('click', '#delimiter-submit', function () {
    defer.resolve(true, $(this));
});

$('body').on('click', '#deny-forms', function () {
    defer.resolve(false, $(this));
});

defer.done(function (cancelled, caller) {
    if (!cancelled) { *do fancy stuff with the choice*} else { *close the modal*} });

在这个例子中，deferred在我手动归属于模态中的两个按钮的两个函数中得到解决。现在我想转到这样的事情：

function buttonAccept() {
   $('body').on('click', '#delimiter-submit', function () {
        defer.resolve(true, $(this)); <- THIS ISN'T DEFINED
   });
}

function buttonCancel() {
    $('body').on('click', '#deny-forms', function () {
        defer.resolve(false, $(this));  <- THIS ISN'T DEFINED
   });
}

function showModal(modal, template, ...buttonFunctions) {
    var defer = $.Deferred();
    $('body').append($(Mustache.render($(template).html(), modal)));
    buttonFunctions.apply(this) <--- THIS IS WHERE I AM STUCK
    }

function askUserDelimiterMode () {

    var modal = {
        class: 'modal-box',
        title: 'Action required',
        message: 'Please specify where to split:',
        choices: [{modePK: 0, mode: 'All', checked: true},
                  {modePK: 1, mode: 'Right-most'},
                 ]

        };

    var template = "#modal-delimiter-template"

    return showModal(modal, template, buttonAccept, buttonCancel)
};

askUserDelimiterMode().then(*do fancy stuff with the choice*);

第二个代码已经更加清晰了，我可以重用一些东西，但是idk如何将延迟传递给buttonFunctions。 buttonFunctions使用...运算符，因为我可能需要在我的前端使用具有不同效果的任意数量的按钮。我是一个绝对的初学者，我会很高兴任何进入正确的方向。

Answer 1

当他们在一起时，不要把它们放在不同的功能中。当然，您可以简单地将延迟对象作为参数传递给它们，但这是一种不好的做法 - 异步函数应该自己创建，解析并返回它们的承诺。

function showModal(modal, template, ...buttons) {
    const defer = $.Deferred();
    $('body').append($(Mustache.render($(template).html(), modal)));
    for (const [i, selector] of buttons.entries()) {
        $('body').on('click', selector, function() {
            defer.resolve(i, $(this));
        });
    }
    return defer.promise();
}
function askUserDelimiterMode () {
    var modal = {
        class: 'modal-box',
        title: 'Action required',
        message: 'Please specify where to split:',
        choices: [
            {modePK: 0, mode: 'All', checked: true},
            {modePK: 1, mode: 'Right-most'},
        ]
    };
    return showModal(modal, '#modal-delimiter-template', '#deny-forms', '#delimiter-submit');
}

askUserDelimiterMode().then(/*do fancy stuff with the choice*/);

如何让另一个函数解析jquery延迟的函数式编程

1 个答案: