Что это: знак после синтаксиса переменной JS? - PullRequest
9 голосов
/ 24 апреля 2019

Я столкнулся со следующим допустимым синтаксисом в JS при просмотре библиотеки svelte:

$: doubled = 6 * 2;

Сначала я подумал, что это специфично для библиотеки, , но она работает на Chromeконсоль .Что это за синтаксис?

Это может быть что угодно:

name: something = 6 * 2;

Ответы [ 3 ]

9 голосов
/ 24 апреля 2019

Любому оператору 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, отправленный в браузер. Такое использование синтаксиса меток «похищено» ими, чтобы что-то значить; см. ответ Квентина.

7 голосов
/ 24 апреля 2019

В JavaScript это метка и предназначена для использования при использовании break и continue в сочетании с вложенными циклами (чтобы вы могли выбрать, какой цикл вы прерываете или продолжаете) .

Похоже, Svelte использует какой-то хак, чтобы придать ему альтернативный смысл. См. учебник :

Svelte автоматически обновляет DOM, когда состояние вашего компонента изменения. Часто некоторые части состояния компонента должны быть вычислены из других частей (таких как полное имя, полученное из имени и фамилия) и пересчитывается всякий раз, когда они меняются.

Для них у нас есть реактивные декларации. Они выглядят так:

let count = 0;
$: doubled = count * 2;
3 голосов
/ 25 апреля 2019

Это метка в JavaScript.

Интересный момент здесь заключается в том, как Svelte использует это для привязки переменных к другим переменным. Вот часть видео, где Рич Харрис объясняет это .

По существу, в Svelte, $: означает перезапуск всякий раз, когда эти значения изменяются

Если мы посмотрим на пример из Реактивного объявления 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.Это компиляция, которая делает магию;)

...