我正在看一个flotr示例,其中(document.getElementById(" editor-render-0")在编码的最后阶段使用。我不明白为什么"编辑器渲染-0"用于它是什么。请解释一下这将有助于我理解flotr的整个编码。
这是一个" editor-render-0"使用 -
(function basic(container) {
var
d1 = [[0, 3], [4, 8], [8, 5], [9, 13]], // First data series
d2 = [], // Second data series
i, graph;
// Generate first data set
for (i = 0; i < 14; i += 0.5) {
d2.push([i, Math.sin(i)]);
}
// Draw Graph
graph = Flotr.draw(container, [ d1, d2 ], {
xaxis: {
minorTickFreq: 4
},
grid: {
minorVerticalLines: true
}
});
})(document.getElementById("editor-render-0"));
答案 0 :(得分:0)
这对flotr来说并不是特别的。这就是所谓的“立即执行功能”或“立即调用功能表达”(IIFE)。
使用IIFE有几个原因:
第一个是在函数内定义的任何变量(在本例中为“d1”,“d2”,“i”和“graph”)。这可以防止这些变量污染全局范围。
第二个原因/好处是封装外部变量。当调用该函数时,您传递的是document.getElementById("editor-render-0")
的结果(可能是带有id的div“editor-render-0”)。
相反,他们可以写下这个:
var
container = document.getElementById("editor-render-0");
d1 = [[0, 3], [4, 8], [8, 5], [9, 13]], // First data series
d2 = [], // Second data series
i, graph;
// Generate first data set
for (i = 0; i < 14; i += 0.5) {
d2.push([i, Math.sin(i)]);
}
// Draw Graph
graph = Flotr.draw(container, [ d1, d2 ], {
xaxis: {
minorTickFreq: 4
},
grid: {
minorVerticalLines: true
}
});
这几乎等同于原始示例,除了在此代码示例中,“容器”,“d1”,“d2”,“i”和“图形”变量将在全局范围内定义。
这是一个代码片段,完全等同于行为。
(function() {
var
container = document.getElementById("editor-render-0");
d1 = [[0, 3], [4, 8], [8, 5], [9, 13]], // First data series
d2 = [], // Second data series
i, graph;
// Generate first data set
for (i = 0; i < 14; i += 0.5) {
d2.push([i, Math.sin(i)]);
}
// Draw Graph
graph = Flotr.draw(container, [ d1, d2 ], {
xaxis: {
minorTickFreq: 4
},
grid: {
minorVerticalLines: true
}
});
})();