Question

这是我的代码，

var MyNameSpace.ShoppingList = {
    addItem: function (itemName, functionName, listName) {
        $("<li>", { text: itemName })
             .on("click", functionName)
             .appendTo($("#" + listName));
    },
};

然后在另一个模块中，

var MyNameSpace.ModuleX = {
    init: function () {
         MyNameSpace.ShoppingList.addItem("Get Eggs From Market", alert("Run Me when listItemClicked"), "shoppingpoplist");
    },
};

问题

我希望alert("Run Me when listItemClicked")仅在点击listitem时运行...

我已经知道将其更改为有帮助，

MyNameSpace.ShoppingList.addItem("Get Eggs From Market", function () { alert("Run Me when listItemClicked"); }, "shoppingpoplist");

但是上面的解决方案让我的代码很长，所以我没有必要添加一个单独的addListItem，我可以用最少的代码解决上面的问题吗？我是否必须添加function（）{} ...在调用alert的位置或在addListItem方法本身中添加

如果通常这样做，那么我是否正确地将addItem放在一个单独的方法中？

Answer 1

语法addItem将立即调用alert并将其返回值传递给alert(..)。你需要的是传递一个函数，在被调用时将执行function () { alert(..); }。这有三个选项：

alert.bind(null, '..')

或：

function callback() {
    alert(..);
}
addItem(.., callback)

或：

implicit val userWrites = new Writes[User] {
  override def writes(user: User): JsValue = Json.obj(
    "name" -> user.name,
    "email" -> user.email,
    "encryptedPassword" -> "hidden",
    "id" -> user.id
  )
}

接受你的选择。它不会变短。

Answer 2

使用ES6，你会得到箭头功能，这会大大缩短事情：

MyNameSpace.ShoppingList.addItem("Get Eggs From Market",
    () => alert("Run Me when listItemClicked"), "shoppingpoplist");
//  ^^^^^ equivalent to function() { return ... }

如果你不能使用箭头功能（最新版本的Chrome和Firefox支持，但不支持IE11及以下版本），如果你真的需要，可以这样做：

function handleWithAlert(msg) {
    return function() { alert(msg); };
}

MyNameSpace.ShoppingList.addItem("Get Eggs From Market", 
    handleWithAlert("Run Me when listItemClicked"), "shoppingpoplist");

handleWithAlert()将返回一个函数，该函数应该作为第一个参数传递。因此，您将获得警报消息的通用事件处理程序生成器。

在JavaScript中调用函数

2 个答案: