Javascript

Question

每次点击后，我打算清空对象editProductList。我下面的代码是创建一个额外的新对象 editProductList 而不是清空原来的 editProductList。我如何确保在再次单击后清空 editProductList 而不是创建新的 editProductList？

先点击'devices'栏后，再点击#edit_product_add_btn、

我正在登录：

product name, qty:  Remote Tag 6

第二次点击'devices'列后，#edit_product_add_btn，之前的对象仍然存在，同时更新原对象和新对象

product name, qty:  Remote Tag 7
product name, qty:  Remote Tag 6

为什么要创建一个相同的对象 editProductList 而不是清空原来的对象？

EditableGrid.prototype.mouseClicked = function(e) {

    var editProductList = {};

    $.ajax({
        //...
        success: function(response) {
            editProductList = JSON.parse(response);
            console.log('editProductList direct from DB: ', editProductList);

            //adding products into editProductList
            $('#edit_product_add_btn').on('click', function(e) {

                var in_editProductList = false;

                    for (var product in editProductList) {
                        if (editProductList.hasOwnProperty(product)) {
                            if (editProductList[product].name === productType) {
                                //...
                                console.log('product name, qty: ', editProductList[product].name, editProductList[product].qty);

                                in_editProductList = true;
                                break;
                            }
                        }
                    }

                    if (in_editProductList === false) {

                        //...
                        var new_product_obj = { name: productType, qty: qty };
                        editProductList[Object.size(editProductList)] = new_product_obj;
                    }

            });
    });

}

Answer 1

不太清楚你要做什么。

您似乎将点击处理程序定义为 EditableGrid 的一种方法。因此，用户需要单击某些内容才能执行 ajax 调用，然后单击 #edit_product_add_btn 将结果加载到第一个处理程序的本地变量中？大概你在 ajax 调用返回后用 editProductList 做了一些事情，如果根本不加载它是没有意义的，因为你无法从其他任何地方访问它。也许你想要 this.editProductList，所以它可以从 "class"?

的其余部分访问

你确定你不是故意的吗？

EditableGrid.prototype.mouseClicked = function(e) {

  var self = this;

  $.ajax({
    //...
    success: function(response) {
      self.editProductList = JSON.parse(response);
    }
  });
};

关于改变当前对象而不是创建一个新对象：我认为您尝试这样做不会有太大收获。一旦变量指向新对象，旧对象就会被垃圾回收。你一做就创建了一个对象 JSON.parse，所以没有逃避它。

如果我误解了你的意图，请澄清你的问题。

Answer 2

解构您的代码示例后，很明显您想要维护购物车。

如果用户添加购物车中已存在的产品，则只需增加现有产品的数量即可。
如果用户添加了新产品，则应将其添加到购物车。
在这两种情况下，屏幕都应相应更新。

所以这里有两个任务。维护列表并更新屏幕。

要更新屏幕，使用 HTML 模板库很有帮助。这有助于提高代码可读性并降低风险面（不再需要手动 HTML 从字符串构建 = 减少 XSS 风险）。我在下面的例子中使用了Mustache.js。

分离任务也很有帮助，因此函数大小保持可控。

请注意我如何使用自定义 jQuery 事件 (dataUpdated) 将屏幕更新与列表维护分离：

$(function () {
    var editProductList = [];
    var productListItems = Mustache.parse('{{#.}}<li class="list-group-item"><span class="badge">{{qty}}</span>{{name}}<button type="button" class="close" aria-hidden="true">&times;</button></li>{{/.}}');

    EditableGrid.prototype.mouseClicked = function (e) {
        if (this.getColumnName(columnIndex) == 'devices') {
            $.post('get_requested_devices.php', {
                table: this.name,
                request_id: this.getRowId(rowIndex)
            })
            .done(function (response) {
                editProductList = response;
                $('#edit_product_list').trigger("dataUpdated");
            });
        }
    };

    $('#edit_product_list').on("dataUpdated", function () {
        var listItems = Mustache.render(productListItems, editProductList);
        $('#edit_product_list').empty().append(listItems);
    });

    $('#edit_product_add_btn').on('click', function (e) {
        var qty = parseInt($('#edit_product_qty').val().trim(), 10);
        var name = $('#edit_product_type').text().trim();
        var existingProduct;

        if (qty > 0) {
            existingProduct = $.grep(editProductList, function (product) {
                return product.name === name;
            });
            if (existingProduct) {
                existingProduct.qty += qty;
            } else {
                editProductList.push({
                    name: name,
                    qty: qty
                });
            }
            $('#edit_product_list').trigger("dataUpdated");
        } else {
            alert('Enter a number greater than 0');
        }
    });
});

警告上面的代码包含对两个未定义的全局变量（columnIndex 和rowIndex）的引用。我不知道它们来自哪里，我只是从您的代码中提取了它们。出于多种原因维护全局变量是一个坏主意，其中最大的一个原因是许多讨厌的错误可以追溯到全局变量。尝试通过函数结果或局部变量替换这些引用。

推荐这种情况是像Knockout.js这样的MVVM库的完美用例。它们旨在为您完全接管所有 UI 更新，因此您需要做的就是维护购物车的数据模型。您可能需要考虑切换。

Javascript - 清空对象而不是创建新对象

Javascript - Emptying Object instead of Creating new Object

jquery

ajax

scope