Question

我正在尝试创建一个简单的界面来生成JSON格式的数据。第一个对象可以成功添加。但是当我尝试添加另一个（将其附加到“myDict”数组对象：请参阅下面的代码）时，原始对象的值将被覆盖，而且我似乎也会添加一个空的键/值对。

我猜这与每次将新的实例添加到“myDict”时不创建“createObj”对象的新实例有关。所以，我试图找出如何动态创建新实例。到目前为止，这是我的代码：

// VARIABLES
var myDict = [];

// CLASSES
function createObj() {
    this.myObj = {};
}
createObj.prototype.newPair = function() {
    this.newKey = document.getElementById('key').value;
    this.newValue = document.getElementById('value').value;
    this.myObj[this.newKey] = this.newValue;

    console.log(this.myObj);

    document.getElementById('key').value = null;
    document.getElementById('value').value = null;
    document.getElementById('key').focus();
}
createObj.prototype.addIt = function() {
    myDict.push(this.myObj);
    console.log(myDict);
}

// ACTIONS
$('#createNew').click(function() {
    $('#item').show();
    var myItem = new createObj();

    $('button#create').click(function() {
        myItem.newPair();
    });

    $('#done').click(function() {
        $('#item').hide();
        myItem.addIt();
    });
});

我在这里查看过类似的Stack Overflow问题：What is the convention for dynamically creating an object instance?

。。。但它似乎没有提供我的问题的任何答案。如果它有用，这里是JSFiddle：http://jsfiddle.net/mysterexs/rffmV/

注意：JSFiddle不显示输出，但它为您提供了所有代码并提供了更多上下文。任何帮助表示赞赏。

Answer 1

我对JQuery知之甚少，但你的问题似乎是每次都添加一个新的事件处理程序（在第一个事件句柄中），并且它为myItem添加了额外的属性（因为关闭了函数仍然可以访问它），以及数组的额外对象（同样的原因）。做这样的事情：

var myItem;
// ACTIONS
$('#createNew').click(function () {
    $('#item').show();
    myItem = new createObj();

});
$('button#add').click(function () {  
        myItem.newPair();
    });
$('#done').click(function () {
        $('#item').hide();
        myItem.addIt();
    });

我使用了一个全局变量来让它变得简单，你可以找到更好的解决方案。

Answer 2

您的情况很有趣，因为一方面，您创建一个类，在类中定义原型属性，并实例化一个类。另一方面，任何时候只有一个类的实例存在，这使得类不必要。还有一些奇怪的行为可以通过检查直接检测到您同时创建一系列文本框并销毁它们，这意味着它们的值将始终保留在一个位置。

Here是解决这些问题的小提琴，请记住HTML标记已更改，以确保ID不会在同一页面上重复。

// VARIABLES
var myDict = [];

// CLASSES
function createObj() {
    this.myObj = $('.item').eq(0);
}
createObj.prototype.newPair = function () {
    var newPair = this.myObj.clone();
    $('#container').append(newPair);
    newPair.find('.key').focus();
}
createObj.prototype.addIt = function () {
    myDict = [];
    $('.item').each(function (i, o) {
        var item = $(o);
        myDict.push({
            'key': item.find('.key').val(),
            'value': item.find('.value').val()
        });
    });
    console.log(myDict);
}

// ACTIONS
var myItem = new createObj();
$('.item').hide();

$('#createNew').click(function () {
    $('.item').show();
});
$('#add').click(function () {
    myItem.newPair();
});

$('#done').click(function () {
    $('.item').hide();
    myItem.addIt();
});

动态创建对象的实例

2 个答案: