植物群中"editor-render-0"什么

Question

我看到一个flotr示例，其中(document.getElementById("editor-render-0")在编码的结束阶段使用。我不明白为什么使用"editor-render-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"));

Answer 1

这并不是flotr所特有的。这就是所谓的"立即执行函数"或"立即调用函数表达式"(IIFE)。

使用生命周期有几个原因:

第一个是函数内部定义的任何变量(在本例中为"d1"、"d2"、"i"one_answers"graph")。这可以防止这些变量污染全局作用域。

第二个原因/好处是外部变量的封装。当调用该函数时，您将传入document.getElementById("editor-render-0")的结果(假设是id为"editor-render-0"的div)。

他们可以这样写:

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

这几乎等同于最初的示例，除了在此代码示例中，"container"， "d1"， "d2"， "i"one_answers"graph"变量将在全局作用域中定义。

这是一个与行为完全相同的代码片段。

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