Question

我正在看一个flotr示例，其中（document.getElementById（＆＃34; editor-render-0＆＃34;）在编码的最后阶段使用。我不明白为什么＆＃34;编辑器渲染-0＆＃34;用于它是什么。请解释一下这将有助于我理解flotr的整个编码。

这是一个＆＃34; editor-render-0＆＃34;使用 -

(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）。

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

什么是＆＃34; editor-render-0＆＃34;在flotr

1 个答案: