Question

我正在尝试使用此模式https://bl.ocks.org/rcmoore38/9f2908455355c0589619编写图表函数。除了width，height，margin和stroke之外，我打算提供更多选项，但它太繁琐了。

由于大多数代码都是重复的，如何简化它以使外部函数更简洁，我可以为每个选项（闭包变量）动态创建内部函数（图表方法）吗？

function drawChart() { 
  var width, height, margin, stroke;
  function chart() {
    // draw chart
  }
  chart.width = function (value) {
    if (!arguments.length) return width;
    width = value;
    return chart;
  };
  chart.height = function (value) {
    if (!arguments.length) return height;
    height = value;
    return chart;
  };
  chart.margin = function (value) {
    if (!arguments.length) return margin;
    margin = value;
    return chart;
  };
  chart.stroke = function (value) {
    if (!arguments.length) return stroke;
    stroke = value;
    return chart;
  };
  return chart;
}

Answer 1

JavaScript不提供动态访问闭包变量的机制，就像您可以访问window属性一样。您可以将它们移动到单个对象中：

＆＃13;

function drawChart() { 
  var props = {
    width: undefined,
    height: undefined,
    margin: undefined,
    stroke: undefined
  }
  function chart() {
    // draw chart
    // use props.width instead of just width
    console.log(props)
  }
  Object.keys(props).forEach((p) => {
    chart[p] = function(value) {
      // getter when called without arguments, e.g. drawChart().width()
      // setter when called with a value, e.g. drawChart().width(0)
      if (!arguments.length) {
        return props[p]
      }
      props[p] = value
      return chart
    }
  })
  return chart;
}

var x = drawChart().width(3).height(4)
var y = drawChart().height(5)

x()
y()

＆＃13;

动态创建函数内的多重函数

1 个答案: