d3.js图表框架建模

Question

在考虑性能时，哪种模型最适合使用d3.js构建图表？闭包类型还是构造函数原型模型？

我为每种图表类型（例如柱状图、折线图、面积图）都有单独的模块，还有一个通用模块用于绘制图表。

闭包模式相对于原型模式有什么优势呢？

示例通用模块：

// 闭包模式

function chart() {
  var width = 720, // default width
      height = 80,
      scale,legends,axes; // 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;
}

var bar = new chart();
bar();

//原型模式：

var chart = function(){
 this.width =500;
 this.height = 500;
 this.initialize();
}
chart.prototype.initialize = function()
{
  //generate chart here
}
var bar = new chart();

两种看起来相似，但在考虑性能、重绘方面哪个更有优势呢？

- rty

---

我很想看看在这两种情况下调用简单函数的性能影响如何。想要尝试为此创建一个jsperf吗？http://jsperf.com/ - Lance

这是有帮助的：http://mrale.ph/blog/2012/09/23/grokking-v8-closures-for-fun.html - Lance

这是一个快速的性能测试：http://jsperf.com/javascript-prototype-vs-closure-performance - Lance

Answer 1

基于那个jsperf测试，看起来它们都大致相同，因为这真的取决于你的函数做什么。但从我选择的特定函数实现来看，具有变量提升的原型模式在我测试的所有设备上（chrome、safari、移动safari）速度更快。

/**
 * List prototype.
 */

function List() {
  this.add = true;
  this.items = [
    { x: 10, y: 10 },
    { x: 20, y: 20 },
    { x: 30, y: 30 },
    { x: 40, y: 40 },
    { x: 50, y: 50 },
    { x: 60, y: 60 },
    { x: 70, y: 70 },
    { x: 80, y: 80 },
    { x: 90, y: 90 },
    { x: 100, y: 100 }
  ];
}

/**
 * Update without caching `items`.
 */

List.prototype.update1 = function(){
  if (this.add) {
    for (var i = 0, n = this.items.length; i < n; i++) {
      this.items[i].x += 5;
      this.items[i].y += 5;
    }
  } else {
    for (var i = 0, n = this.items.length; i < n; i++) {
      this.items[i].x -= 5;
      this.items[i].y -= 5;
    }
  }

  this.add = !this.add;
};

/**
 * Update and cache `items`.
 */

List.prototype.update2 = function(){
  var items = this.items;

  if (this.add) {
    for (var i = 0, n = items.length; i < n; i++) {
      items[i].x += 5;
      items[i].y += 5;
    }
  } else {
    for (var i = 0, n = items.length; i < n; i++) {
      items[i].x -= 5;
      items[i].y -= 5;
    }
  }

  this.add = !this.add;
};

/**
 * List closure.
 */

function closure() {
  var add = true;
  var items = [
    { x: 10, y: 10 },
    { x: 20, y: 20 },
    { x: 30, y: 30 },
    { x: 40, y: 40 },
    { x: 50, y: 50 },
    { x: 60, y: 60 },
    { x: 70, y: 70 },
    { x: 80, y: 80 },
    { x: 90, y: 90 },
    { x: 100, y: 100 }
  ];

  function list() {

  }

  list.update = function(){
    if (add) {
      for (var i = 0, n = items.length; i < n; i++) {
        items[i].x += 5;
        items[i].y += 5;
      }
    } else {
      for (var i = 0, n = items.length; i < n; i++) {
        items[i].x -= 5;
        items[i].y -= 5;
      }
    }

    add = !add;
  };

  return list;
}

var p = new List;
var c = closure();
var update = c.update;

http://jsperf.com/javascript-prototype-vs-closure-performance

- Lance