2

在学习 D3.js 时，我看到了一篇解释其可重用代码单元背后的主要设计模式的博客文章。我已经复制了下面的相关代码。下面展示的模式正是它在 D3 代码库和插件中使用的方式（示例）。

我对这段代码的一个问题是它有太多的属性复制粘贴。JavaScript 作为一种函数式语言，我认为我可以将样板代码重构出来，但我想不出办法来做到这一点。argumentsandvalue参数很容易传递给通用函数，但我找不到保留对widthandheight属性的引用的方法。

function chart() {
  var width = 720, // default width
      height = 80; // default height

  function my() {
    // generate chart here, using `width` and `height`
  }

  my.width = function(value) {
    if (!arguments.length) return width;
    width = value;
    return my;
  };

  my.height = function(value) {
    if (!arguments.length) return height;
    height = value;
    return my;
  };

  return my;
}

事实上，这就是它在实际 D3 代码库中的完成方式，这让我想知道是否可以进行重构，但我希望这只是一个不是高优先级问题的问题（并且新的贡献者正在这样做方式，因为这就是以前的做法）。

我正在寻找的基本上是将每个访问器的主体替换为：

my.height = function(value) {
  return getSet(arguments, value, whatever);
};

调用仍有一些样板，但至少逻辑是集中的，如果需要，可以只在一个地方更新。

4

2 回答 2

1

如果您getSet在 的范围内定义chart，它也可以访问封闭的变量。问题是，您不能通过名称字符串访问这些变量（除非您使用某种eval）。

您可以通过将所有私有变量包装在未经测试的对象中来避免这种情况：

function chart() {
    var props = {
        width: 720, // default width
        height: 80 // default height
    }

    function my() {
        // generate chart here, using `width` and `height`
    }

    my.height = function(value) {
        // Call getSet with current my instance as this, 
        // 'height' as the first argument, then value
        return getSet.apply(this, arguments.slice().unshift('height'));
    };

    // Works just like your current accessors, on the props object
    function getSet(property, value) {
        if (arguments.length > 1) return props[property];
        props[property] = value;
        return this;
    }

    return my;
}

问题是这并不比为每个属性编写几个类似的访问器短多少。您当前的访问器使私有变量实际上是公开的，那么为什么不放弃它们并使用公共变量呢？

于 2013-02-19T04:11:15.357 回答
0

已经提供的另一种解决方案是定义一个“属性”函数，它返回一个函数，例如

function property (v) {
    return function (_) {
    if(!arguments.length)
            return v;
        v = _;
    return this;
};
}

所以你可以说：

function chart() {
    chart.width = property.call(chart, 500);
    chart.height = property.call(chart, 500);

    chart.render = function() {
    //render logic goes here
    };

    return chart;
}

我不能完全相信这一点——我认为来源实际上是 Mike Bostock（但我找不到原始帖子的链接）

我在我的许多模块中都使用了这个“属性”功能——它节省了很多烦人的打字。您可以轻松地扩充它以在传入值更改时发出事件。

于 2013-03-25T22:12:05.887 回答