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;
}

Answer 2

我相信这个 getSet.js 函数正是你想要的：https://gist.github.com/gneatgeek/5892586。

根据它的创造者，它可以：

动态创建D3组件的getter / setter函数

由于S.O.不建议仅使用链接答案。（因为链接可以改变或变得无法访问）这里有一个简短的解释。

这是上述功能：

function getSet(option, component) {
    return function(_) {
        if (!arguments.length) {
            return this[option];
        }

        this[option] = _;

        return component;
    };
}

让我们看看如何使用它。首先，你将变量存储在一个对象中（这是函数的一个缺点，见上面的链接），如下所示：

var opts = {
    width: 200,
    height: 50,
    color: '#000'
};

之后，您使用此for...in循环：

for (var key in opts) {
    chart[key] = getSet(key, chart).bind(opts);
}

这样，你就可以动态生成你的setter / getters。

这是一个使用getters的演示：

function getSet(option, component) {
    return function(_) {
        if (!arguments.length) {
            return this[option];
        }

        this[option] = _;

        return component;
    };
}

function chart() {
    // do something
};

var opts = {
    width: 200,
    height: 50,
    color: '#000'
};

for (var key in opts) {
    chart[key] = getSet(key, chart).bind(opts);
}

//using the getters
console.log(chart.height())
console.log(chart.width())
console.log(chart.color())

<script src="https://d3js.org/d3.v4.min.js"></script>

现在让我们使用setter设置一些值，然后使用getter获取它们：

function getSet(option, component) {
    return function(_) {
        if (!arguments.length) {
            return this[option];
        }

        this[option] = _;

        return component;
    };
}

function chart() {
    // do something
};

var opts = {
    width: 200,
    height: 50,
    color: '#000'
};

for (var key in opts) {
    chart[key] = getSet(key, chart).bind(opts);
}

//using the setters...
chart.width(42)
chart.height(3.14)
chart.color("foo")

//...and then the getters
console.log(chart.width())
console.log(chart.height())
console.log(chart.color())

<script src="https://d3js.org/d3.v4.min.js"></script>

如何简化getter-setter函数

2 个答案: