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

// Prototypr圖案：

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

兩個看起來相似。但哪一個是考慮

性能優勢，在此基礎上jsperf測試重繪

Answer 1

，它看起來像他們都是大致相同的，因爲它確實取決於你的函數做什麼。但從我選擇的特定功能實現中，在我測試的所有設備（鍍鉻，野生動物園，移動探險）上，原型變量提升速度更快。

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