Question

我正在关注mo.js教程，正在研究圆圈点击爆发部分。

const OPTS = {
  fill:           'none',
  radius:         25,
  strokeWidth:    { 50 : 0 },
  scale:          { 0: 1 },
  angle:          { 'rand(-35, -70)': 0 },
  duration:       500,
  left: 0,        top: 0,
  easing: 'cubic.out'
};

const circle1 = new mojs.Shape({
  ...OPTS,
  stroke:         'cyan',
});

const circle2 = new mojs.Shape({
  ...OPTS,
  radius:         { 0 : 15 },
  strokeWidth:    { 30: 0 },
  stroke:         'magenta',
  delay:          'rand(75, 150)'
});

我正在使用支持...语法的VSCode V 1.7.2。我在Chrome 54.0.2840.99中也遇到了控制台错误。我可以使用相同的格式来解决这个问题吗？我想象options: OPTS之类的东西会起作用，但我没有在文档或互联网上看到任何东西来帮助我。

显然我可以在圆圈声明中复制OPTS中的属性，但我想知道如何使用OPTS变量来简化。

我会标记mo.js，但我没有足够的声誉来创建新标签。

谢谢！

Answer 1

您可以改为使用Object.assign()：

const circle2 = new mojs.Shape(Object.assign({}, OPTS, {
  radius:         { 0 : 15 },
  strokeWidth:    { 30: 0 },
  stroke:         'magenta',
  delay:          'rand(75, 150)'
}));

对象传播仍然是一个提议，而linter无法识别语法。这并不意味着它不起作用。例如，如果您使用带有stage 3 preset（或0,1,2个预设）的babel，它将起作用，即使vscode显示警告。我不熟悉vscode，但您可以添加对此功能的支持。

Mo.js替代对象扩展语法

1 个答案: