0

I am seeing a flotr example where (document.getElementById("editor-render-0") is used at the end phase of the coding. I am not getting why "editor-render-0" is used ans what is it. Please explain this it will helps me to understand the whole coding of the flotr.

This is a function where "editor-render-0" is used-

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

1 回答 1

0

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

使用 IIFE 有几个原因：

第一个是函数内部定义的任何变量（在本例中为“d1”、“d2”、“i”和“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”和“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
    }
  });
})();
于 2014-05-13T06:27:31.413 回答