綁定配置的功能使用封閉

我讀通過this tutorial在D3可重複使用的圖表和第一個「配置」部分中，作者描述了製作圖表功能的方法有兩種：綁定配置的功能使用封閉

// Method 1 
function chart(config) { 
    // generate chart here, using `config.width` and `config.height` 
} 

// Method 2 
function chart(config) { 
    return function() { 
    // generate chart here, using `config.width` and `config.height` 
    }; 
}

他建議第一種方法，因爲

但是，調用方必須管理圖表函數（假設您有多種類型的圖表可供選擇）和配置對象。要將圖表配置綁定到圖表函數，我們需要一個閉包。

雖然我不明白這個解釋。方法2比第一種方法有什麼優勢？

來源

2012-09-30 grautur

這是關於管理信息。在第一種情況下，如果要更改圖表的配置，調用者必須記住，config將被傳遞到chart：現在

chart(config); 
config.xy = 42; 
// update the chart, calling chart again 
chart(config);

，如果有多個，可能不同，圖表（和因此，不同的圖表函數，如barchart,linechart等），調用者必須記住哪個配置傳遞給哪個函數。

如果圖表的「類型」以某種方式獨立，那將會更容易。在第二個示例中，您將返回對知道如何更新剛創建的圖表的函數的引用。所以，你可以更新圖表不知道哪個函數它被創造：

var myChart = chart(config); 
config.xy = 42; 
// update the chart 
myChart();

這似乎是D3採用的方法，但你也可以使用面向對象的方法，即建立一個適當的Chart構造函數它封裝了用於呈現和更新圖表的邏輯。

來源

2012-09-30 20:08:01

下面是我發現了一種方法，甚至比你們兩個已經上市 - 這是我從D3源代碼拿起：

function chart() { 
    var width, height; 

    function display() { 
     console.log("My dimensions are: (" + width + " x " + height + ")."); 
    } 

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

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

    return display;  
} 

var config = {width: 5, height: 10}, 
    myChart = chart().width(config.width).height(config.height); 

console.log("Width:", myChart.width()); // Width: 5 
console.log("Height:", myChart.height()); // Height: 10 
myChart(); // My dimensions are (5 x 10). 
myChart.height(5); 
myChart(); // My dimensions are (5 x 5).

來源

2012-09-30 23:21:44 Wex

綁定配置的功能使用封閉

回答

相關問題