如何从客户端（Javascript，节点）使用 spin.js

Question

我正在尝试从客户端使用 spin.js（https://spin.js.org/#！），但我遇到了一些问题。
正在做

npm install spin.js

然后

const Spinner = require('spin.js');

不起作用，因为您需要通过浏览器验证模块才能从客户端使用该模块。

我也试过复制和过去 spin.js (https://spin.js.org/spin.js) 并从 html 引用它，但它在 spin.js 中给了我一个错误

export { Spinner };

作为

Uncaught SyntaxError: Unexpected token export

从客户端使用 spin.js 需要什么？

Answer 1

好的，我明白了。

您需要做的是：

将 spin.js 文件复制到您的本地文件系统中（将其命名为 spin.js）并参考html文件中body标签末尾的本地spin.js。

...
<script type="text/javascript" src="js/spin.js"></script>
<script type="text/javascript" src="js/scriptWithSpinner.js"></script>
</body>

注释掉 spin.js 中的以下行。

export { Spinner };

从 https://spin.js.org/spin.css 复制 CSS 并将其存储在本地文件系统中。请参阅 html 文件的 header 中的 CSS。

<head>
    <meta charset="utf-8">
    ...

    <link rel="stylesheet" type="text/css" href="mystyles.css" />
    <link rel="stylesheet" type="text/css" href="spin.css" />
    ...
</head>

如果您使用的是 express，您可能需要在服务器代码中使用 js 和 CSS 公开目录，以便 html 文件可以读取它。

现在您可以直接使用来自 scriptWithSpinner.js 的全局定义的 Spinner object，无需导入或要求。

scriptWithSpinner.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
  speed: 1, // Rounds per second
  rotate: 0, // The rotation offset
  animation: 'spinner-line-fade-quick', // The CSS animation name for the lines
  direction: 1, // 1: clockwise, -1: counterclockwise
  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 0 1px transparent', // Box-shadow for the lines
  position: 'absolute' // Element positioning
};

var target = document.getElementsByClassName('uploader')[0];
var spinner = new Spinner(opts).spin(target);

如何从客户端（Javascript，节点）使用 spin.js

How to use spin.js from client (Javascript, Node)

javascript

node.js

npm

spin.js