Question

我目前正在尝试使用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+");})");

Answer 1

尝试：

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

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

Answer 2

Javascript Closures将为您提供帮助。

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

请参阅How do JavaScript closures work?

Javascript：在为动态创建的对象设置onClick处理程序时避免使用eval（）

2 个答案: