[英]How to import Javascript module
I'm trying to use http://spin.js.org/ to create a spinner on my site that starts spinning when an AJAX post fires and stops when it completes.我正在尝试使用http://spin.js.org/在我的网站上创建一个微调器,当 AJAX 帖子触发时它开始旋转并在它完成时停止。 I'm struggling to get the spinner working at all, though.
不过,我正在努力让微调器工作。
I have a node app and am templating with EJS.我有一个节点应用程序并且正在使用 EJS 进行模板化。 Under the usage section, spin.js's website says:
在使用部分下,spin.js 的网站说:
import {Spinner} from 'spin.js';
var opts = {
lines: 13, // The number of lines to draw
length: 38, // The length of each line
width: 17, // The line thickness
radius: 45, // The radius of the inner circle
scale: 1, // Scales overall size of the spinner
corners: 1, // Corner roundness (0..1)
color: '#ffffff', // CSS color or array of colors
fadeColor: 'transparent', // CSS color or array of colors
opacity: 0.25, // Opacity of the lines
rotate: 0, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
fps: 20, // Frames per second when using setTimeout() as a fallback in IE 9
zIndex: 2e9, // The z-index (defaults to 2000000000)
className: 'spinner', // The CSS class to assign to the spinner
top: '50%', // Top position relative to parent
left: '50%', // Left position relative to parent
shadow: none, // Box-shadow for the lines
position: 'absolute' // Element positioning
};
var target = document.getElementById('foo');
var spinner = new Spinner(opts).spin(target);
I'm not sure where the import {Spinner} from 'spin.js'
is supposed to go?我不确定
import {Spinner} from 'spin.js'
中的import {Spinner} from 'spin.js'
应该去哪里? I've searched around a lot and haven't been able to find out how to actually implement this.我已经搜索了很多,但无法找到如何实际实现这一点。 I found this example of a jquery plugin for spin.js but I'm struggling with that one as well.
我找到了这个用于 spin.js 的 jquery 插件示例,但我也在努力解决这个问题。 Any help would be much appreciated!
任何帮助将不胜感激!
As of right now, this is what I have:截至目前,这就是我所拥有的:
<div id="spinnerContainer" class="spinner" style="width:100px;height:100px;background-color: Gray; color:black;">
</div>
<script src="/scripts/spin.js/spin.js" type="text/javascript"></script>
<script>
var opts = {
lines: 20, // The number of lines to draw
length: 0, // The length of each line
width: 15, // The line thickness
radius: 42, // The radius of the inner circle
scale: 0.85, // Scales overall size of the spinner
corners: 1, // Corner roundness (0..1)
color: '#41d62b', // CSS color or array of colors
fadeColor: 'transparent', // CSS color or array of colors
opacity: 0.05, // Opacity of the lines
rotate: 0, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
speed: 1, // Rounds per second
trail: 74, // Afterglow percentage
fps: 20, // Frames per second when using setTimeout() as a fallback in IE 9
zIndex: 2e9, // The z-index (defaults to 2000000000)
className: 'spinner', // The CSS class to assign to the spinner
top: '50%', // Top position relative to parent
left: '50%', // Left position relative to parent
shadow: 0, // Box-shadow for the lines
position: 'absolute' // Element positioning
};
var target = document.getElementById('spinnerContainer');
var spinner = new Spinner(opts).spin(target);
</script>
The script to load in spin.js is finding the file correctly, but then I get the error Uncaught SyntaxError: Unexpected token export
referencing the line export { Spinner };
在 spin.js 中加载的脚本正确地找到了该文件,但随后出现错误
Uncaught SyntaxError: Unexpected token export
reference the line export { Spinner };
from spin.js来自 spin.js
I also get an error saying Uncaught ReferenceError: Spinner is not defined
which I assume is related to the error above but I'm not sure.我还收到一条错误消息,说
Uncaught ReferenceError: Spinner is not defined
我认为这与上述错误有关,但我不确定。
Perhaps all you want is to use a CDN version if you aren't set up to manage imports如果您没有设置管理导入,也许您只想使用CDN 版本
var opts = { lines: 20, // The number of lines to draw length: 0, // The length of each line width: 15, // The line thickness radius: 42, // The radius of the inner circle scale: 0.85, // Scales overall size of the spinner corners: 1, // Corner roundness (0..1) color: '#41d62b', // CSS color or array of colors fadeColor: 'transparent', // CSS color or array of colors opacity: 0.05, // Opacity of the lines rotate: 0, // The rotation offset direction: 1, // 1: clockwise, -1: counterclockwise speed: 1, // Rounds per second trail: 74, // Afterglow percentage fps: 20, // Frames per second when using setTimeout() as a fallback in IE 9 zIndex: 2e9, // The z-index (defaults to 2000000000) className: 'spinner', // The CSS class to assign to the spinner top: '50%', // Top position relative to parent left: '50%', // Left position relative to parent shadow: 0, // Box-shadow for the lines position: 'absolute' // Element positioning }; var target = document.getElementById('spinnerContainer'); var spinner = new Spinner(opts).spin(target);
<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.js"></script> <div id="spinnerContainer" class="spinner" style="width:100px;height:100px;background-color: Gray; color:black;"> </div>
I was getting same error open the CDN file from @charlietfl answer copy it and replace it with your spin.js file.我在从@charlietfl 回答中打开 CDN 文件时遇到同样的错误,将其复制并替换为您的 spin.js 文件。 It will work.
它会起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.