通过回调解决引用错误

Question

我在跟随几乎所有基本 snap.svg 教程的过程中不断碰壁。虽然运行他们的代码通过 jsfiddle or 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！

Answer 1

如您所说，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 的主要功能已经执行，你得到了一个错误。这就是为什么 $(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>

Answer 2

Snap 不依赖于 jquery。

问题可能是你在运行脚本中调用了这一行。

var surface = Snap("#svg");

在 svg 标记之前

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

被载入DOM。所以它找不到要引用的元素。该问题与 Snap 完全无关，只是正常 HTML/SVG 和 JS 加载和排序。

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

$(document).ready( ... )

如您所见:).

通过回调解决引用错误

Resolving Reference Error with call-back

javascript

jquery

html

snap.svg