这是什么：在可变的JS语法后签名？

Question

在查看svelte库时，我在JS中遇到以下有效语法：

$: doubled = 6 * 2;

起初，我认为它是特定于该库的，但是它可以在Chrome控制台上使用。这是什么语法？

可以是任何东西：

name: something = 6 * 2;

Answer 1

这是 JavaScript 中的标签。

这里有趣的一点是 Svelte 如何使用 this 将变量绑定到其他变量。这是 Rich Harris 解释这一点的视频的一部分。

本质上，在 Svelte 中，$:意味着只要这些值发生变化就重新运行

如果我们看一下 Svelte 的Reactive 声明示例中的示例，

<script>
    let count = 1;

    // the `$:` means 're-run whenever these values change'
    $: doubled = count * 2;
    $: quadrupled = doubled * 2;

    function handleClick() {
        count += 1;
    }
</script>

<button on:click={handleClick}>
    Count: {count}
</button>

<p>{count} * 2 = {doubled}</p>
<p>{doubled} * 2 = {quadrupled}</p>

变量doubled和quadrupled有$标签。因此，它们将分别在count或doubled更改时再次计算。

如果你看一下编译后的代码，你可以看到

let doubled, quadrupled;
$$self.$$.update = ($$dirty = { count: 1, doubled: 1 }) => {
    if ($$dirty.count) { $$invalidate('doubled', doubled = count * 2); }
    if ($$dirty.doubled) { $$invalidate('quadrupled', quadrupled = doubled * 2); }
};

因此，每次更新发生时，都会对这些变量进行脏检查并进行更新。

综上所述。$:in Svelte 与 JavaScript 标签没有任何关系。这是 Svelte 编译器拥有更新这些变量的代码的指令。$:当然是有效的语法，但在 Svelte 的上下文之外，它不会做它在 Svelte 中所做的事情。编译是有魔力的 ;)

Answer 2

任何JavaScript语句（除了函数声明之外的其他种类）都可以带有标签：

foo: var x = 0;

您所拥有的是这样的：

$: doubled = 6 * 2;

在您的语句中，“ $”是标签。

标记语句没有太多意义，因为gotoJavaScript中没有。双方break并continue可以包括封闭循环的一个标签说明有多少“层”应当参与。

wholeLoop:
for (let i = 0; i < matrix.length; i++) {
  for (let j = 0; j < matrix[i].length; j++) {
    if (matrix[i][j] == null)
      // Oh no! This is terrible
      break wholeLoop;
  }
}

MDN，规格

以上所有内容都非常正确，但是显然Svelte将其自己的构建时预处理器应用于组件源代码，并将其转换为发送给浏览器的实际JavaScript。标签语法的这种使用被他们“劫持”了一些意思。参见昆汀的答案。

Answer 3

在JavaScript中，它是一个标签，旨在与嵌套循环配合使用break并continue与之结合使用（因此，您可以选择要中断还是继续的循环）。

斯维尔特（Svelte）似乎使用某种技巧来赋予它其他含义。参见教程：

当组件状态更改时，Svelte会自动更新DOM。通常，组件状态的某些部分需要从其他部分计算（例如，从名字和姓氏派生的全名），并在每次更改时重新计算。

对于这些，我们有反应式声明。他们看起来像这样：

let count = 0;
$: doubled = count * 2;