0

我目前正在尝试使用 RaphaelJS 矢量库开发交互式图表。我已经成功地创建了一个图表（http://lmhbc.com/newsite/trial1.html需要一段时间才能加载），但在这个过程中不得不重复使用 eval() 函数。

这是我使用的一个简化示例：（这里的项目和类是动态创建的，并且没有链接，即多个项目具有相同的类）

thisArray[item] = paper.path("M"+xStart+" "+yStart+"L"+xEnd+" "+yEnd);
eval("thisArray[item].click(function() {clickHandler("+class+");}");

这是我在实践中使用的一个非常简化的版本，因为我使用 3 层数组等。我创建了超过 15000 个这些对象，我不仅添加了单击处理程序，而且还添加了鼠标悬停和鼠标移出，这是领先的到不少 eval() 的弹出。

所以我的问题是如何避免这些评估。我相信它们是速度的主要问题之一。由于我的项目是动态命名的，因此一旦单击它们就无法检索它们的名称，因为它们没有真正的“名称”。

谢谢您的帮助，

乔什

注意： paper.path(...) 创建了一条我想要点击的矢量线

实际代码示例：

var crew = crewOrders[year][day][position]['crew'];
crewOrders[year][day][position]['line'] = canvas.path("M"+xStart+" "+yStart+"L"+xEnd+" "+yEnd)
                                                    .attr({stroke: 'white', 'stroke-width': 2, 'stroke-linecap': 'round'});
eval("crewOrders[year][day][position]['line'].mouseover(function() {mouseOverCrew("+crew+");document.body.style.cursor = 'hand';})"+
                                                            ".mouseout(function() {mouseOutCrew("+crew+");document.body.style.cursor = 'default';})"+
                                                            ".click(function() {selectedCrew("+crew+");})");
4

2 回答 2

3

尝试：

thisArray[item].click = function(class) {
  return function() { clickHandler(class); };
}(class);

这允许您保留“类”的副本以供处理程序函数使用。

于 2012-06-11T14:15:58.457 回答
2

Javascript 闭包会帮助你。

function getOnClickHandler(class) {
  return function() {
    clickHandler(class);
  }
}
thisArray[item].click(getOnClickHandler(class));

请参阅JavaScript 闭包如何工作？

于 2012-06-11T14:21:56.830 回答