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

Question

After each click, I intend to empty object editProductList . My code below is instead creating an additional new object editProductList instead of emptying the original editProductList . How do I ensure I'm emptying editProductList instead of creating a new editProductList after clicking it once more?

After the first clicking on the 'devices' column, then #edit_product_add_btn ,

I'm logging:

product name, qty:  Remote Tag 6

After the second clicking on the 'devices' column, then #edit_product_add_btn , the previous object remains, and it updates both the original object and new one at the same time

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

Why is it creating an additional object of the same editProductList instead of emptying the original one?

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

After deconstructing your code example it became clear that you want to maintain a shopping cart.

• If the user adds a product that also is already in the cart, it should simply increase the quantity of the existing item.
• If the user adds a new product, it should append it to the cart.
• In both cases the screen should be updated accordingly.

So there are two tasks here. Maintain a list and update the screen.

For updating the screen it is helpful to use an HTML templating library. This helps code readability and reduces the risk surface (no more manual HTML building from strings = less XSS risk). I used Mustache.js in the following example.

It is also helpful to separate the tasks so function size stays manageable.

Note how I use a custom jQuery event ( dataUpdated ) to decouple screen updating from list maintenance:

$(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');
        }
    });
});

Warning The above code contains references to two undefined global variables ( columnIndex and rowIndex ). I have no idea where they come from, I just carried them over from your code. It is a bad idea to maintain global variables for a number of reasons, the biggest one being that many nasty bugs can be traced back to global variables. Try to replace those references, either by function results or by local variables.

Recommendation This situation is the perfect use case of MVVM libraries like Knockout.js. They are designed to completely take over all UI updating for you, so all you need to do is to maintain the data model of the shopping cart. You might want to consider switching.

Answer 2

It's not so clear what you are trying to do.

You seem to be defining a click handler as a method of EditableGrid. So the user will need to click something for the ajax call to be executed, and then click #edit_product_add_btn to load the results into a variable which is local to the first handler? Presumably you are doing something with editProductList after the ajax call comes back, if not loading it at all is pointless, since you can't access it from anywhere else. Perhaps you want this.editProductList instead, so it is accesible from the rest of the "class"?

Are you sure you don't mean to do something like this?

EditableGrid.prototype.mouseClicked = function(e) {

  var self = this;

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

About mutating the current object instead of creating a new one: I don't think you gain much from trying to do this. The old object will be garbage collected as soon as the variable points to the new one. You are creating an object as soon as you do JSON.parse, so there's no escaping that.

If I missundersood your intentions, please clarify your question.