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

Question

我需要做类似于这样的事情：

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

这个问题的背景是，当点击时需要调用一个 JavaScript 函数，该函数将对我提供的 URL 进行 AJAX 调用。它将打开一个带有“确定”和“取消”按钮的模态 div。

到这里为止都还好。但是我还需要告诉 JavaScript 函数另一个函数及其它参数和要在新 div 中点击“确定”按钮后调用的 URL。以及另一个 cancel 按钮的情况。

问题是我无法正确传递第二个参数，因为它不能适当地转义，从而导致 JavaScript 错误。

我已经在 SO 中搜索了其他类似的 JavaScript 问题，但没有一个覆盖了我需要做的事情。

有人知道如何将这种字符串参数传递给 JavaScript 函数吗？或者也许有更好的解决方案可以传递这些东西，我没有想到。

谢谢！

- antonioh

Answer 1

一种方法是适当地转义引号：

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

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

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

然后，您可以在myfunction内部以这种方式调用它们：

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

    if (okClicked)
    {
        onOK();
    }

    if (cancelClicked)
    {
        onCancel();
    }
}

那可能不是myfunction实际的样子，但你可以得到一般的概念。重点是，如果你使用匿名函数，你将拥有更多的灵活性，并且代码也会更加简洁。

- hbw

Answer 2

试试这个：

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

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

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

- Gumbo

Answer 3

Me, I'd do it something like this:

HTML:

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

JS:

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

  /* do stuff */

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

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

但是我可能还需要绑定一个闭包到自定义订阅事件上。你需要在问题中添加一些细节，但是由于JavaScript中的函数是一等公民，所以很容易传递并可以通过多种方式获取参数。我会避免将它们作为字符串标签传递，因为这种间接性容易出错。

- annakata