使用回调解决参考错误答案

【问题标题】：Resolving Reference Error with call-back使用回调解决参考错误
【发布时间】：2017-08-03 10:54:32
【问题描述】：

在学习几乎所有基本的 snap.svg 教程时，我一直在碰壁。通过jsfiddle 或codepen 运行他们的代码时，一切正常，但是当我通过自己的本地编辑器尝试相同的操作时，我运气不佳。

我的代码：

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript" src="js/snap.svg.js"></script>
  </head>
  <body>
    <svg id="svg" class="svg"></svg>
  </body>
</html>

JavaScript

var surface = Snap("#svg");
var circ = surface.circle(100, 100, 50);
circ.attr({
    fill: "#addedd",
    strokeWidth: 10,
    stroke: "#beeeef"
});

CSS

body {
  display: block;
  width: 200px;
  height: 200px;
  margin: 50px auto;
}

.svg {
  width: 100%;
  height: 100%;
}

我总是遇到的主要问题是该行的参考错误：

var surface = Snap("#svg");

我通过包含一个回调并将块包装在一个函数中解决了这个问题：

function main(){
var surface = Snap("#svg");
var circ = surface.circle(100, 100, 50);
circ.attr({
    fill: "#addedd",
    strokeWidth: 10,
    stroke: "#beeeef"
 });
};
$(document).ready(main);

我觉得这些教程跳过了什么？我确定有比我想出的更好的解决方案吗？你怎么看？

我只想开始学习 Snap！

【问题讨论】：

先下载jquery到本地
@Amit 在本地下载 jquery 并更新了 HTML。原件或我的决议没有改变。

标签： javascript jquery html snap.svg

【解决方案1】：

Snap 不依赖 jquery。

问题可能是您正在运行脚本并调用此行。

var surface = Snap("#svg");

在 svg 标记之前

<svg id="svg" class="svg"></svg>

被加载到 DOM 中。所以它找不到要引用的元素。这个问题根本与 Snap 无关，只是正常的 HTML/SVG 和 JS 加载和排序。

原始代码中不清楚的是，当您加载自己的 js 代码时。您可以尝试将其放在 svg 标记之后，但通常最好先确保文档已准备好...

$(document).ready( ... )

你已经找到了:)。

【讨论】：

这是真正的问题。
@ian 我看到你的答案被抢了，我想感谢你为我的问题添加更多的澄清！
没问题，主要的是只要你最后能明白！

【解决方案2】：

正如你所提到的，Snap 代码只能执行一次，jQuery 被加载。

$(document).ready(function(){
    var surface = Snap("#svg");
    var circ = surface.circle(100, 100, 50);
    circ.attr({
        fill: "#addedd",
        strokeWidth: 10,
        stroke: "#beeeef"
    });
});

加载js文件的顺序很重要。 ~~因为 snap 依赖于 jQuery，所以在 jQuery 准备好之前你不能执行它~~。

比 Snap 或任何 javaScript 库更重要的是，首先了解 JS 的基础知识。较小的文件将比大文件更快地加载，即使它们是在之后请求的。

在你的情况下，甚至在 jQuery 被下载之前，你的 js 的 main 函数就被执行了，你得到了一个错误。这就是为什么 $(document).ready 始终是使用 jQuery 启动代码的首选方式。

编辑：

正如@Ian 所指出的，snap 不依赖于 jQuery。实际问题是 js 文件的错误顺序。正确的顺序应该如下，

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

    <script type="text/javascript" src="js/snap.svg.js"></script>
  </head>
  <body>
    <svg id="svg" class="svg"></svg>

    <!-- custom code should be loaded after the svg markup -->
    <script type="text/javascript" src="js/main.js"></script>
  </body>
</html>

【讨论】：

这很好地清理了我的方法！将代码从 jsfiddle 和 codepen 复制到本地库时，您通常会做什么？作为新手，从网络上的示例中学习编码然后将它们移动到本地有点困难。
@Vili 在开始之前查找一些文档很重要。就像在这种情况下，您认为问题出在 Snap 上，但这是因为 jQuery。同样，这些库中的大多数通常都有一个回调，让您知道它们何时可以使用。您可以将它们作为代码执行的起点。最后，你会从错误中吸取教训。总会有错误。你修复了它们，你在这个过程中学到了一些新东西:)
Snap 不依赖 Jquery。