Javascript：带参数的动态函数

Question

这有点棘手，但我需要使下面的大代码块通用。

我有许多遵循相同格式的视图：一个充满行的表，其中每一行都包含一个删除图标。每个图标都有一个 data-id 属性，它是数据库中项目的 _id。

我将每个图标上的单击操作连接到它打开标准对话框以要求确认的位置。您可以猜到，对话框的“是”按钮将有一个 onclick，它使用项目的 _id 参数调用所需的函数。例如，设置onclick = deleteContact(fdke75jdsgtd7i)

假设我有 3 个表：Contacts、Cases 和 Firms。

只要我在每个视图中复制并粘贴以下代码块，我就可以为任何给定表格工作它。

let deleteItemAnchors = document.getElementsByClassName("delete-item");

Array.from(deleteItemAnchors).forEach( (item) => {

    item.addEventListener('click', () => {

        // Highlight the selected row.
        highlightedTableRow = item.closest("tr");
        highlightedTableRow.classList.add("table-warning");

        // The record's _id is in the data-id attribute.
        let itemId = item.getAttribute("data-id");

        let buttons = [{
            //onclick: () => { removeTableRowHighlight(); deleteContact(itemId); },
            onclick: () => { removeTableRowHighlight(); deleteFunction(itemId); },
            text: "Yes"
        }, {
            onclick: () => { removeTableRowHighlight(); },
            text: "No",
            class: "btn-secondary"
        }];

        let confirmDelete = new CustomDialog("Delete this " + recordType + "?", 'Click "Yes" to delete it.  Press "No" to cancel.', buttons);

    });

});

以下是单击按钮时调用的函数示例：

function deleteContact(itemId) {
    console.log("You deleted the item with id = " + itemId);
}

请记住，它只有在评论的 onclick 行是活动的并且其正下方的通用行被注释掉时才有效。

我想停止为每个视图重新创建大块代码，方法是将其移动到一个可重用的函数，该函数可以从 3 个视图中的每一个调用，如下所示：

let deleteFunction = () => { deleteContact(); };  
wireDeleteIcons("Contact", deleteFunction);


let deleteFunction = () => { deleteCase(); };
wireDeleteIcons("Case", deleteFunction);

因此，我将代码块移到了一个名为“wireDeleteIcons”的函数中，该函数接受：

• 记录类型为字符串，并且
• 执行删除的函数，如 deleteCase() 或 deleteContact()。

在我的联系人视图中，我正在打电话：

let deleteFunction = () => { deleteContact(); };  
wireDeleteIcons("Contact", deleteFunction);

目前一切正常，除了单击图标时的 deleteFunction(itemId) 调用。

如果您回头查看大代码块，请查看注释的 onclick 行下方的行。

我正在尝试将参数 itemId 添加到传递的函数中。在测试中，它一直到我的 deleteContact() 函数，但它没有传入 _id。 所以，我的 console.log 显示，根据我的 deleteContact() 函数，“你删除了 id = undefined"的项目

如何一般地传递​​函数，并从我的通用wireDeleteIcons() 函数中将参数插入其中？

Answer 1

你的deleteFunction() 需要一个参数：

let deleteFunction = (id) => deleteContact(id);

但您并不真正需要 deleteFunction 变量。随便写：

wireDeleteIcons("Contact", deleteContact);
wireDeleteIcons("Case", deleteCase);

wireDeleteIcons 的定义应该是这样的：

function wireDeleteIcons(tableId, deleteFunction) {
    let deleteItemAnchors = document.getElementById(tableId).getElementsByClassName("delete-item");

    Array.from(deleteItemAnchors).forEach( (item) => {

        item.addEventListener('click', () => {

            // Highlight the selected row.
            highlightedTableRow = item.closest("tr");
            highlightedTableRow.classList.add("table-warning");

            // The record's _id is in the data-id attribute.
            let itemId = this.getAttribute("data-id");

            let buttons = [{
                onclick: () => { removeTableRowHighlight(); deleteFunction(itemId); },
                text: "Yes"
            }, {
                onclick: () => { removeTableRowHighlight(); },
                text: "No",
                class: "btn-secondary"
            }];

            let confirmDelete = new CustomDialog("Delete this " + recordType + "?", 'Click "Yes" to delete it.  Press "No" to cancel.', buttons);

        });

    });
}