Question

我将一个大的“选项”对象传递给我在JavaScript中实例化的另一组对象。问题是，这些“选项”中很少有必须从一个对象改变为另一个对象。制作一个完全独立的选项变量，改变了许多选项中的一个，感觉很傻。我也不认为我可以只改变相同“选项”对象的选项，因为所有对象都会引用相同的“选项”。

以下是相关代码。

    for (var i = 0; i < invoices.length; i++) {

        var ura_original_column = { "column" : "ura_ppa_original",
                                    "on_update" : [format_ura],
                                    "display" : "URA" };

        if (invoices[i]["type"] == "P") {
            ura_original_column = { "column" : "ura_original",
                                    "on_update" : [format_ura],
                                    "display" : "URA" };
        }

        var options = { template_table  : "template_table",
                        template_total  : "template_total",
                        template_row    : "template_row",
                        template_text   : "template_text",
                        template_select : "template_select",
                        packet_id       : <?val=packet["packet_id"]?>,
                        products        : <?val=json.dumps(products)?>,
                        allow_new_rows  : <?val=json.dumps(packet["status"] not in api.NON_MODIFIABLE_STATUS)?>, 
                        on_table_focus  : on_table_focus,
                        on_row_update   : on_row_update,
                        on_new_row      : on_new_row,
                        columns : [{"column" : "product_code", 
                                    "display" : "Product"},
                                   {"column" : "transaction_type",
                                    "display" : "FFSU/MCOU",
                                    "editor" : "selectedit",
                                    "options" : ["FFSU", "MCOU"]},
                                    ura_original_column,
                                   {"column" : "ura_current",
                                    "display" : "Calculated URA"},
                                   {"column" : "units_current",
                                    "display" : "Current Units",
                                    "on_update" : [format_units],
                                    "show_total" : true},
                                   {"column" : "amount_claimed", 
                                    "display" : "Amt Claimed",
                                    "on_update" : [format_currency],
                                    "show_total" : true},
                                   {"column" : "scripts_current",
                                    "display" : "Scripts",
                                    "on_update" : [format_scripts],
                                    "show_total" : true},
                                   {"column" : "amount_medi_reimbursed", 
                                    "display" : "MEDI Amt", 
                                    "on_update" : [format_currency],
                                    "show_total" : true},
                                   {"column" : "amount_non_medi_reimbursed", 
                                    "display" : "Non-MEDI Amt", 
                                    "on_update" : [format_currency],
                                    "show_total" : true},
                                   {"column" : "amount_total_reimbursed", 
                                    "display" : "Total Amt", 
                                    "on_update" : [format_currency],
                                    "show_total" : true}]}

        var invoice_id = invoices[i]['invoice_id'];
        var transactions = transactions_by_invoice[invoice_id];
        var table = new Table.Table("invoice_" + invoice_id, options, transactions);

        tables.push(table);
    }
});

因此，在这个巨大的选项结构中，只有“ura_original_column”会发生变化。这可能是最好的方法，但感觉有点像黑客。

有人有更优雅的建议吗？

感谢您花时间去看。

Answer 1

您可以使用新的Object.create创建一个只有不同选项的新对象，但由具有所有其他选项的原型支持。（这是一个ES5功能，但您可以创建一个版本，提供主要功能或使用“ES5垫片”项目，包括您需要的位; 完全是不可能的在ES5之前的环境中创建Object.create，但您不需要全部。）

看起来像这样：

var mainOptions = { /* ...bit list of main options... */ };

for (index = 0; index < limit; ++index) {
    theseOptions = Object.create(mainOptions);
    theseOptions.column = "new column name";
    doTheThing(theseOptions);
}

您最终得到的是一个只包含您更改的属性的对象，但如果要求其他任何属性，则会返回主选项原型中的值。

以下是执行此操作的自包含示例：Live copy | source

(function() {

  // Get a `create` function that acts a bit like
  // `Object.create` even if `Object.create` isn't
  // there
  var objectCreate = (function() {
    if (Object.create) {
      return Object.create;
    }

    function ctor() { }

    return function(proto) {
      var rv, key;

      ctor.prototype = proto;
      rv = new ctor();
      ctor.prototype = undefined;

      return rv;
    };
  })();


  var mainOptions = {
    option1: "Main option 1",
    option2: "Main option 2",
    option3: "Main option 3"
  };

  var index;
  var theseOptions;

  for (index = 0; index < 4; ++index) {
    theseOptions = objectCreate(mainOptions);
    theseOptions.option2 = "Special option 2 for index " + index;

    displayOptions(index, theseOptions);
  }
  display("Options passed to function");

  function displayOptions(index, options) {
    // Do it *later* so we know we weren't just
    // doing it before the object got updated
    setTimeout(function() {
      display("Options for index " + index + ":");
      display(options.option1);
      display(options.option2);
      display(options.option3);
    }, 0);
  }

  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = String(msg);
    document.body.appendChild(p);
  }
})();

同样重要的是要了解objectCreate如果Object.create不存在Object.create，那么不是真实{{1}}的完整垫片。只需要完成我们想要完成的工作。

对大型“选项”数据结构进行微小更改

1 个答案: