Question

我正在尝试与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”也不起作用。

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

Answer 1

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

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

Answer 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/

（也许有人可以扩展为什么需要这些改变，我自己也没有掌握它们。）

Answer 3

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

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

你就会开始运作。

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

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

<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。

拉斐尔和“全球”变量

3 个答案: