web-dev-qa-db-ja.com

これは何ですか：可変JS構文の後に署名しますか？

svelteライブラリを見て、JSで次の有効な構文を見つけました。

$: doubled = 6 * 2;

最初は、それはライブラリに固有であると思いましたただし、Chromeコンソールで動作します。この構文は何ですか？

何でもかまいません。

name: something = 6 * 2;
javascriptsyntaxsvelte
18
undefined

JavaScriptステートメント（関数宣言を除く種類）の前にはラベルを付けることができます。

foo: var x = 0;

あなたが持っているものはそのようなものです：

$: doubled = 6 * 2;

ステートメントでは、「$」がラベルです。

JavaScriptにはgotoがないため、ラベル付きステートメントにはあまり意味がありません。 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 [〜＃〜] 、 spec

上記はすべてかなり正しいですが、Svelteは独自のビルド時プリプロセッサをコンポーネントのソースコードに適用し、それをブラウザに送信される実際のJavaScriptに変換します。ラベル構文のこの使用は、何かを意味するために彼らによって「ハイジャック」されます。クエンティンの答えを見てください。

13
Pointy

JavaScriptでは label であり、breakおよびcontinueをネストされたループと組み合わせて使用​​する場合に使用するように設計されています（これにより、どのループを解除するかを選択できます）またはから続く）。

Svelteはある種のハックを使用して別の意味を与えているようです。 チュートリアル を参照してください：

Svelteは、コンポーネントの状態が変化したときにDOMを自動的に更新します。多くの場合、コンポーネントの状態の一部は、他の部分（名と姓から派生したフルネームなど）から計算し、変更されるたびに再計算する必要があります。

これらについては、反応的な宣言があります。彼らはこのように見えます：

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

これはJavaScriptのラベルです。

ここで興味深い点は、Svelteがこれを使用して変数を他の変数にバインドする方法です。 リッチハリスが説明しているビデオの一部 。

基本的に、スヴェルトでは、$:は、これらの値が変更されるたびに再実行することを意味します

スヴェルトの 反応宣言の例 の例を見てみると、

<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); }
};

したがって、更新が発生するたびに、これらの変数と更新のダーティチェックが行われます。

結論として。 $: SvelteのJavaScriptラベルとは何の関係もありません。 Svelteコンパイラーがこれらの変数を更新するためのコードを作成するためのディレクティブです。 $:はもちろん有効な構文ですが、Svelteのコンテキスト外では、Svelteで行うことはしません。それは魔法を行うコンパイルです;）

6
sudo bangbang