根据现有对象有效地创建新的JavaScript对象

debugcn 发表于 Dev

用户名

在现有对象的基础上创建新的JavaScript对象并使用新属性对其进行扩展的最佳实践是什么？

以下应该起作用，但是，我希望有一个更有效的解决方案。

<div class="chart" data-type="bar" data-title="My Bar Chart 1" data-foo="Hello"></div>
<div class="chart" data-type="pie" data-title="My Bar Pie" data-foo="Good Morning"></div>
<div class="chart" data-type="bar" data-title="My Bar Chart 2" data-foo="Good Day"></div>
<div class="chart" data-type="bar" data-title="My Bar Chart 3" data-foo="Good Evening"></div>

$('.charts').each(function(){
    $(this).highcharts($.extend( {}, {
        bar: {/* default settings for a bar chart  */ },
        pie: {/* default settings for a pie chart  */ },
        line:{/* default settings for a line chart */ }
      }[$(this).data('type')], {
        title: {text: $(this).data('title')},
        somethingElse: {foo: $(this).data('bar')}
            // ...
      } ));
});

Searlea

这里有一些想法：

仅创建一次默认设置
$(this)每个循环仅调用一次
（可能）尝试调用$this.data()一次提取所有数据

注意：这是过早优化的经典案例。Highcharts将比您创建设置做更多的工作，因此优化设置对象的创建可能毫无意义！

结合了要点建议后，您的JS看起来应该像这样：

var defaults = {
    bar: {/* default settings for a bar chart  */ },
    pie: {/* default settings for a pie chart  */ },
    line:{/* default settings for a line chart */ }
};

$('.charts').each(function(){
    var $this = $(this),
        data = $this.data(),
        settings = $.extend(true, {}, defaults[data.type], {
            title: { text: data.title },
            somethingElse: { foo: data.bar },
            ...
        });
    $this.highcharts(settings);
});

注意：在不确切知道您的默认设置有多复杂的情况下，将true参数传递$.extend给确保jQuery进行深拷贝而不是浅拷贝是比较安全的。（这种对浅层深度的要求也是我没有回显@Maxx建议使用的原因Object.assign，因为这不会进行深层复制。）

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。