什么是flotr中的“编辑器-呈现-0”？

Question

我看到一个flotr示例(在编码的最后阶段使用document.getElementById(“编辑器-呈现-0”))。我不明白为什么使用“编辑器-呈现-0”和它是什么。请解释这一点，这将有助于我理解整个编码的浮标。

这是一个使用“编辑器-呈现-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

这并不是专门针对浮标的东西。这就是所谓的“立即执行函数”或“立即调用函数表达式”(IIFE)。

使用综合投资框架有几个原因：

首先，函数中定义的任何变量(在本例中为"d1“、"d2”、"i“和”图“)。这样，这些变量就不会污染全局范围。

第二个原因/好处是外部变量的封装。当函数被调用时，您将传入document.getElementById("editor-render-0")的结果(可能是id为“editor-ren-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
  }
});

这几乎等同于最初的示例，只不过在这个代码示例中，将在全局范围上定义“容器”、"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
    }
  });
})();