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();

两人看起来都很像。但是哪一个更有利于考虑

性能，重画

Answer 1

根据jsperf测试，它们看起来都大致相同，因为它实际上取决于您的函数所做的工作。但是从我选择的具体功能实现来看，带有可变提升的原型模式在我测试过的所有设备(chrome、safari、mobile )上都更快。

​

​

/**
 * 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