javascript - 如何简化 getter-setter 函数

Question

我正在尝试使用 d3.js 制作可重复使用的图表。这些代码有效，但它们非常多余。

我正在尝试简化以下代码:

function myChart(){
    // default properties
    var svgWidth = 1000,
        svgHeight = 250;

    function chart(selection){
       // do something with the previous properties ....
    }

    // define setter-getter functions
    chart.svgWidth = function(_){
        if(!arguments.length) return svgWidth;
        svgWidth = _;
        return chart;
    };
    chart.svgHeight = function(_){
        if(!arguments.length) return svgHeight;
        svgHeight = _;
        return chart;
    };

    return chart;
}

如您所见，所有的 setter-getter 函数都非常相似。如果要设置的属性很多，比如说 10 个，那么 setter-getter 函数就会堆得很长。

那么有人能简化它吗？

Answer 1

KISS:定义一个 defaults 对象并迭代它的键以创建新属性:

function myChart(){
    // default properties
    var defaults = {
      svgWidth: 1000,
      svgHeight: 250
    }

    function chart(selection){
       // do something with the previous properties ....
    }

    Object.keys(defaults).forEach((key) => {
      chart[key] = function(_) {
        if(!arguments.length) return defaults[key];
        defaults[key] = _;
        return chart;
      };
    });

    return chart;
}