コールバックのないsvelte

私はこの夏、フロントエンドのインタビューをしてきました.それは私がひどい何かです.
何年もの間、jQueryアプリケーションは「スパゲッティコード」を引き起こすために非難されました.これは、アプリケーショントリッキーについての推論を行った.
反応は歓迎されて、状態/ライフサイクルを明白にするために祝われました.それは本当に役に立ちました.しかし、コンポーネント間の変数を移動すると、それは常にぎこちないであるように感じるし、毎年多くの畳み込みを取得するようだ.

アンドリュー・クラーク
@ acdlite

私がタイムマシンを持っているならば、私は2016年に戻って、私のより若い自己を肩で捕らえて、叫びます
午前7時01分- 2019年5月23日
100
701
これはSvelteに私を描いたものです-あなたは不気味な方法で変数を変更することができます.すべてのスパゲティを必要としているようだ.

<!-- Parent.svelte -->
<script>
  import Child from './child.svelte'
  let str = 'init'
  setTimeout(() => {
    str = 'changed'
  }, 2500)
</script>
<div>
  <Child {str} />
</div>

<!-- Child.svelte -->
<script>
  export let str = ''
</script>
<div>
  child: <b>{$str}</b>
</div>

ここでは、子のHTMLが自動的に更新されます.それは実際には非常に注目すべきことです.コードの半分が不足しているように感じます.

コールバックはありません…？

私は認める、私は時々svelteの制御フローの問題に立ち往生する.いくつかのpuzzlersすることができます.私は時々、自分がそうしなければならないとき、私自身がコールバックのまわりで投げているのを見つけます.
次の例を考えます.

<script>
  let value = 'foo'
</script>
<div>
  <input bind:value />
  magical variable: <b>{value}</b>
</div>

この変数は' hot 'です-両方の方法で配線されています.あなたがソースを見るならば、getElementById'sとaddEventListener's -あなたが通常自分自身を書いていたものがあります.

まだコールバックがありますか？

親が変数を子に渡すと、子プロセスは自動的に変更を聞きます.親はbindを使用している場合のみ子を聞くことになります.

<!-- one-way (down) -->
<Child str={str} />
<!-- both-ways -->
<Child bind:str />

孫は入れ子になったバインドを使用して変数を変更できます.

prop ➔ bind:prop ➔ bind:prop

兄弟は2つのバインドを使用して変数を変更できます

prop ➔ [bind:prop, bind:prop]

どちらの場合も、スプレッドシートのようにすべてのコンポーネント間で自動的に更新されます.
閉じるこの動画はお気に入りから削除されています.これは、Web開発の大きな塊を自動化している.それは、吸うチャンクを自動化しています.感じています.
おそらく、Bindも私が混乱するそれらのredux仕事インタビュー質問の多くを解決します.

しかし、コールバックはどうですか？

私はまだこれについて少し混乱しています.
Svelteは$ letで変数を宣言する方法を持っています.Let -の代わりに変数が変更されたときに知っています.
私は完全にそれを得ません、しかし、それは本当に強力です

<!-- Parent.svelte -->
<script>
  import Child from './Child.svelte'
  let str = 'init'
  // (fancy-part!)
  $: strLen = () => {
    return str.length
  }
</script>
<div>
  <Child bind:str />
  {strLen()}
</div>

<!-- Child.svelte -->
<script>
  export let str = ''
  setTimeout(() => {
    str = 'child-changed'
  }, 2000)
</script>

この関数は、子コンポーネントが変数を変更した後に再起動します.
つまり、コールバックです.私は、ちょうどそれをもうまわりに渡す必要はありません.この$:ものを使用すると、上部、下部、または側のコンポーネントから変更を聞くことができます.汗もない.

たぶんコールバック

これら3つの側面

「熱い」小道具(下がっている)

「バインド」概念

ドル:もの(どこでも)

彼らは完全なインターフェイスのようです.多分、これは公共図書館とオープンソースコンポーネントのためのインターフェースです.わかりません.
svelteコンポーネントインターフェースがどのように見えるかについての福音はありません.多くのライブラリは小道具を受け入れます、そして、変化する各々の小道具のためのコールバック.この「イベントアップ」コールバックのスタイルは私もクールです.
ああ、the Store conceptもあります.これは観測可能なサブ/パップ物です.私は私が多くのそれらを必要としなかったことを考え出すまで店をたくさん使用しました.変数更新についてより明示的で伝統的です.
Svelteのコンポーネントは、小道具として書き込み可能なストアを受け入れる必要がありますか?これは次のようになります.

<!-- Parent.svelte -->
<script>
  import { writable } from 'svelte/store'
  import Child from './Child.svelte'
  let str = writable('init')
  str.subscribe(wowChanged => {
    // is this a callback?
  })
</script>
<div>
  <Child {str} />
</div>

<!-- Child.svelte -->
<script>
  export let str
  setTimeout(() => {
    $str = 'child-changed' //change store
  }, 2000)
</script>

私はそれもクールだと思う.
ああ、a Context conceptあまりにも、すべての一緒に小道具を渡す必要が回避できます.それはかっこいい.
ああ、そして、Svelte(何らかの理由で)にReduxを加えているa ton of peopleがあります.それはかっこいい.
Svelte開発者も、この銀河系の脳マルチページアプリ242479152を構築します.クール.
それはすべてクールです.Svelteは本当に楽しく、柔軟なライブラリを使用することです.より多くの人々が飛び込んで、このメッセージを渡すことはより明確になることを望みます.もう考えないでください.