Javascript 使用回调解决引用错误_Javascript_Jquery_Html_Snap.svg

Javascript 使用回调解决引用错误

javascript jquery html

Javascript 使用回调解决引用错误,javascript,jquery,html,snap.svg,Javascript,Jquery,Html,Snap.svg,我在学习几乎所有的snap.svg基本教程的同时，一墙接一墙地学习。在运行他们的代码时，或者一切正常，但当我通过自己的本地编辑器尝试同样的方法时，我几乎没有运气我的代码： HTML CSS 我经常遇到的主要问题是线路的参考错误： var surface = Snap("#svg"); 我通过包含回调并将块包装到函数中解决了此问题： function main(){ var surface = Snap("#svg"); var circ = surface.circle(100, 100,

我在学习几乎所有的snap.svg基本教程的同时，一墙接一墙地学习。在运行他们的代码时，或者一切正常，但当我通过自己的本地编辑器尝试同样的方法时，我几乎没有运气

我的代码：

HTML

CSS

我经常遇到的主要问题是线路的参考错误：

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

正如您所提到的，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>

Snap对jquery没有依赖性

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

var surface = Snap("#svg");

在svg标记之前

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

正如您已经找到的：）。

在本地下载jqueryfirst@Amit本地下载jquery并更新HTML。没有改变原来或我的决议。这清理了我的方法非常好！将代码从JSFIDLE和codepen复制到本地库时，您通常做什么？由于是新手，从web上的示例中学习编码然后将其移动到本地有些困难。@Vili在开始之前查找一些文档是很重要的。就像在本例中一样，您认为问题在于Snap，但这是因为jQuery。类似地，大多数libr通常都有一个回调，让您知道它们何时可以使用。您可以将它们作为代码执行的起点。最后，你要从错误中吸取教训。总会有错误。您修复了它们，并且在这个过程中学到了一些新的东西：）Snap不依赖于Jquery。这是实际的问题。@ian我看到您的答案被抢走了，我想感谢您为我的问题添加了更多的说明！没问题，主要的是只要你明白到底！

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

var surface = Snap("#svg");

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

$(document).ready( ... )