拉斐尔和“全局”变量答案

【问题标题】：Raphael and "global" variables拉斐尔和“全局”变量
【发布时间】：2013-01-24 10:27:01
【问题描述】：

我正在尝试与 Raphael 合作开发一些 SVG 的东西，并尝试用我有限的知识构建一些漂亮的东西；）我有 3 个文件： 1x html 文件和 2xjs 文件 html 文件：带有 onload 函数（+ header、body 和 stuff）

window.onload=function()
{
    init();
}

js File1：具有init函数和加载js文件的函数（例如Raphael）以及加载文件后继续执行的回调

function init()
{
    getScripts(initTool)
}

function getScripts(callback)
{ 
    $.when($.getScript(scripts[raphael]).then(callback) 
} 

function initTool()
{
    $('body').append("<div id='tool'></div>");
    tool=Raphael("tool",5000,5000);
    $('body').append("<a href='javascript:void(0)' onclick='newElement'>New element</a>")
}

js File2：这里我有一个函数 newElement，它应该（对于这个例子）向 Rapahel 创建的 svg 元素添加一个路径

function newElement()
{
    tool.path("M10,20L30,40");
}

不幸的是，路径没有显示出来，我不知道为什么。我尝试在 onload 之前引用“工具”变量，以防它与全局/局部变量（疯狂猜测）相关，但这也不起作用。将 svg 元素的 id 更改为“tool”到“tool2”也不起作用。

还能是什么？我的（可能很明显）盲点在哪里？

【问题讨论】：

标签： javascript svg raphael

【解决方案1】：

这里不应该将回调声明为参数吗？

function getScripts(callback)
{ 
    $.when($.getScript(scripts[raphael]).then(callback) 
}

【讨论】：

对不起，getScripts() 确实是 getScripts(callback)。我在尝试最小化问题的代码时忘记了。我将立即编辑原始问题。谢谢！

【解决方案2】：

老实说，我已经编写了相当多的 javascript，但我还没有完全理解变量范围。但是，在调用函数时，您应该使用括号来指示它应该被执行（有几次您在没有括号的情况下引用它们，但这超出了此答案的范围）。

所以...

$('body').append("<a href='javascript:void(0)' onclick='newElement()'>New element</a>")

但这还不足以让它工作，你还应该像这样声明你的函数：

var newElement = function() {
    tool.path("M10,20L30,40");
}

这是一个可行的解决方案：http://jsfiddle.net/vAjG2/

（也许有人可以详细说明为什么需要这些更改，我自己并不理解）。

【讨论】：

很好，它有效！非常感谢。但我不知道为什么它与以前的实现不同。如果有人能解释一下就好了，否则我必须在遇到同样的问题并且不知道时再次询问；）

【解决方案3】：

这个问题与变量范围无关。您只需要在内联事件处理程序中的函数名称后面加上括号。将最后一行改写为：

$('body').append("<a href='javascript:void(0)' onclick="newElement()">New element</a>")

然后你就可以开始运行了。

然而，内联事件处理程序因各种原因而受到反对。正如quirksmode 所说：“尽管内联事件注册模型古老而可靠，但它有一个严重的缺点。它要求您在不属于它的 XHTML 结构层中编写 JavaScript 行为代码。”

一种更简洁的方法是将标记和脚本分开，例如：

<div id='tool'></div>
<a id="mylink" href='#'>New element</a>

<script>
var tool = Raphael("tool",500,500);

$('#mylink').on("click", function() {
    tool.path("M10,20L30,40");
});
</script>

查看此jsfiddle 了解此代码的实际作用。

最后，作为一个有用的提示，我建议在准备好文档时运行您的代码，而不是加载窗口，尤其是您使用的是 jquery。文档就绪发生在第一次构建 DOM 时。窗口加载等待所有资产完全加载，这可能需要一段时间，通常没有必要。我是long considered a best practice。

【讨论】：