使用回拨解决参考错误

我一直在跟着几乎所有的基本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);

我觉得这些教程正在跳过什么？我确信有比我想出的更好的分辨率？你怎么看？

我只想开始学习管理单元！

来源

2017-08-03 Vili

本地下载jquery – Amit

@Amit本地下载jquery并更新HTML。没有改变原来的或我的决议。 – Vili

-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指出，捕捉对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>

来源

2017-08-03 11:04:45 Piyush

这很好地清理了我的方法！将jsfiddle和codepen中的代码复制到本地库时，通常会做什么？作为新人，从网络上的例子中学习编码然后将它们转移到本地是有点困难的。 – Vili

@Vili在开始之前寻找一些文档很重要。就像在这种情况下，你认为问题出在Snap上，但这是因为jQuery。同样，这些libr中的大多数通常会有一个回调，让您知道它们什么时候可以使用。您可以将它们作为您的代码执行的起点。最后，你从错误中学习。总会有错误。你修复它们，你在这个过程中学到了一些新东西:) – Piyush

Snap没有依赖于Jquery。 – Ian

快照没有依赖jQuery的。

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

var surface = Snap("#svg");

SVG的标记

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

之前被加载到DOM。所以它找不到要引用的元素。这个问题与Snap完全无关，只是普通的HTML/SVG和JS加载和排序。

什么是不明确的原始代码，是当你加载自己的js代码英寸你可以尝试把它放在svg标记后，但通常最好确保文件准备第一..

$(document).ready(...)

因为你已经找到了:)。

来源

2017-08-03 15:24:45 Ian

这是真正的问题。 – Piyush

@ian我看到你的答案被抢了，我想感谢你为我的问题添加更多的澄清！ – Vili

没问题，最主要的是只要你理解到底！ – Ian

使用回拨解决参考错误

回答

相关问题