Javascript：如何将带有字符串参数的函数作为参数传递给另一个函数

I need to do something like this:

我需要做这样的事情：

<input type="button" value="click" id="mybtn" 
onclick="myfunction('/myController/myAction', 
                   'myfuncionOnOK('/myController2/myAction2', 
                                  'myParameter2');',
                   'myfuncionOnCancel('/myController3/myAction3', 
                                  'myParameter3');');"  />

The context of this question is that on the onClick I need to call a javascript function that will make an ajax call to the url I provide. It will open a modal div with OK and Cancel buttons.

这个问题的上下文是在onClick上我需要调用一个javascript函数，它将对我提供的url进行ajax调用。它将打开一个带有OK和Cancel按钮的模态div。

Up to here it's fine. But then I also needed to tell the javascript function another function with other parameters and urls to be called when an OK button is clicked in the new div. And another one for the Cancel button.

到目前为止一切都很好。但是我还需要告诉javascript函数另一个函数和其他参数以及在新div中单击OK按钮时要调用的url。另一个用于取消按钮。

The problem is I can't manage to pass the second argument properly as it doesn't escape properly and gives me javascript errors.

问题是我无法正确传递第二个参数，因为它没有正确转义并给我javascript错误。

I have done a search for other similar Javascript questions in SO but non of them seem to cover what I need to do.

我已经在SO中搜索了其他类似的Javascript问题，但它们似乎没有涵盖我需要做的事情。

Anybody knows how could I pass this kind of string parameters to the javascript function? Or maybe there's another better solution of passing this things that I didn't think of.

有谁知道我怎么能把这种字符串参数传递给javascript函数？或许还有另一个更好的解决方案，传递这些我没想到的东西。

Thanks in advance

提前致谢

3 个解决方案

#1

One way would be to just escape the quotes properly:

一种方法是正确地逃避报价：

<input type="button" value="click" id="mybtn"
       onclick="myfunction('/myController/myAction', 
               'myfuncionOnOK(\'/myController2/myAction2\', 
                   \'myParameter2\');',
               'myfuncionOnCancel(\'/myController3/myAction3\', 
                   \'myParameter3\');');">

In this case, though, I think a better way to handle this would be to wrap the two handlers in anonymous functions:

但是，在这种情况下，我认为更好的方法是将两个处理程序包装在匿名函数中：

<input type="button" value="click" id="mybtn"
       onclick="myfunction('/myController/myAction', 
                function() { myfuncionOnOK('/myController2/myAction2', 
                             'myParameter2'); },
                function() { myfuncionOnCancel('/myController3/myAction3', 
                             'myParameter3'); });">

And then, you could call them from within myfunction like this:

然后，你可以在我的函数中调用它们，如下所示：

function myfunction(url, onOK, onCancel)
{
    // Do whatever myfunction would normally do...

    if (okClicked)
    {
        onOK();
    }

    if (cancelClicked)
    {
        onCancel();
    }
}

That's probably not what myfunction would actually look like, but you get the general idea. The point is, if you use anonymous functions, you have a lot more flexibility, and you keep your code a lot cleaner as well.

这可能不是myfunction实际上的样子，但是你得到了一般的想法。关键是，如果你使用匿名函数，你会有更多的灵活性，并且你的代码也更加清晰。

#2

Try this:

尝试这个：

onclick="myfunction(
    '/myController/myAction',
    function(){myfuncionOnOK('/myController2/myAction2','myParameter2');},
    function(){myfuncionOnCancel('/myController3/myAction3','myParameter3');}
);"

Then you just need to call these two functions passed to myfunction:

然后你只需要将这两个函数调用传递给myfunction：

function myfunction(url, f1, f2) {
    // …
    f1();
    f2();
}

#3

Me, I'd do it something like this:

我，我会这样做：

HTML:

HTML：

onclick="myfunction({path:'/myController/myAction', ok:myfunctionOnOk, okArgs:['/myController2/myAction2','myParameter2'], cancel:myfunctionOnCancel, cancelArgs:['/myController3/myAction3','myParameter3']);"

JS:

JS：

function myfunction(params)
{
  var path = params.path;

  /* do stuff */

  // on ok condition 
  params.ok(params.okArgs);

  // on cancel condition
  params.cancel(params.cancelArgs);  
}

But then I'd also probable be binding a closure to a custom subscribed event. You need to add some detail to the question really, but being first-class functions are easily passable and getting params to them can be done any number of ways. I would avoid passing them as string labels though, the indirection is error prone.

但后来我也可能将一个闭包绑定到一个自定义订阅的事件。你需要真正地为这个问题添加一些细节，但是作为一流的函数很容易通过，并且可以通过多种方式获取它们的参数。我会避免将它们作为字符串标签传递，间接是容易出错的。

#1