Javascript “什么是”呢；编辑器-render-0“；弗洛特

我看到了一个flotr示例，其中（document.getElementById（“editor-render-0”）用于编码的结束阶段。我不明白为什么使用“editor-render-0”以及它是什么。请解释这一点，它将帮助我理解flotr的整个编码

这是一个使用“editor-render-0”的函数-

（基本功能（容器）{
变量
d1=[[0,3]，[4,8]，[8,5]，[9,13]，//第一个数据系列
d2=[]，//第二个数据系列
i、 图形；
//生成第一个数据集
对于（i=0；i<14；i+=0.5）{
d2.推挤（[i，Math.sin（i）]）；
}
//作图
graph=Flotr.draw（容器[d1，d2]{
xaxis：{
minorTickFreq:4
}, 
网格：{
米诺替卡林：对
}
});
})（document.getElementById（“editor-render-0”）；

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

使用IIFEs有几个原因：

第一个是函数中定义的任何变量（在本例中为“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
  }
});

var
container=document.getElementById（“editor-render-0”）；
d1=[[0,3]，[4,8]，[8,5]，[9,13]，//第一个数据系列
d2=[]，//第二个数据系列
i、 图形；
//生成第一个数据集
对于（i=0；i<14；i+=0.5）{
d2.推挤（[i，Math.sin（i）]）；
}
//作图
graph=Flotr.draw（容器[d1，d2]{
xaxis：{
minorTickFreq:4
}, 
网格：{
米诺替卡林：对
}
});

这几乎等同于原始示例，只是在这个代码示例中，“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
    }
  });
})();

（函数（）{
变量
container=document.getElementById（“editor-render-0”）；
d1=[[0,3]，[4,8]，[8,5]，[9,13]，//第一个数据系列
d2=[]，//第二个数据系列
i、 图形；
//生成第一个数据集
对于（i=0；i<14；i+=0.5）{
d2.推挤（[i，Math.sin（i）]）；
}
//作图
graph=Flotr.draw（容器[d1，d2]{
xaxis：{
minorTickFreq:4
}, 
网格：{
米诺替卡林：对
}
});
})();

对不起，我的英语不好，我的语言有点慢。

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