クリーナーsvelteコンポーネントの4つのヒント

私は私の会社のいくつかのdevをSvelteで始めたのを助けました、そして、私は彼らがそれを拾って、生産的であることがどれくらい簡単かについて見ているのが好きです.しかし、私はSvelteは同じことをするためのクリーンな方法を実現することなく、冗長なコードを記述するいくつかの領域に気づいた.
その経験を描いて、私はクリーナーとsvelteのIEのコンポーネントコードを書くために4つの方法を収集しました.より経験豊かなDEVSが何かを学ぶかもしれないけれども、あなたがsvelteに新しいならば、これらが特に役に立つと思います.

コンポーネントテンプレートで動作する

人々がSvelte(または一般的にフロントエンドフレームワーク)に新しいとき、時々私はそれらを使用してくださいquerySelector このようなコンポーネントコードでは、

<script>
  function handleSubmit() {
    const submitButton = document.querySelector('.submit-button');
    submitButton.disabled = true;
    submitButton.innerText = 'Submitting...';
  }
</script>

<button class="submit-button" on:click="{handleSubmit}">
  Submit
</button>

仕事ですか.もちろん.それは良い考えですか?絶対にない.
私は、DEVSがスクリプトタグを見て、彼らが通常のHTML文書のインラインスクリプトのように扱うべきであると仮定するので、これが起こると思います.しかし、Svelteのスクリプトブロックはスクリプトタグではなく、超強力なスクリプトタグです.あなたはバニラJSの要素と相互作用する方法に限定されません.
Svelte(および他の最新のフレームワーク)を使用する利点は、テンプレートがコンポーネントの状態で駆動できることです.手動で手動でクエリを行う代わりに、代わりにそのロジックをテンプレートに直接表示できます.最初の例を書き直すには、テンプレート内のロジックを統合します.

<script>
  let submitting = false;

  function handleSubmit() {
    submitting = true;
  }
</script>

<button on:click="{handleSubmit}" disabled="{submitting}">
  {submitting ? 'Submitting...' : 'Submit'}
</button>

これにより、あなたのコンポーネントをより簡単に説明できます.テンプレートを見ることができますし、コンポーネント内のすべての異なる状態を理解する代わりに、テンプレート内の何かを更新する可能性のあるすべての場所を追跡しようとすること.
(書面で)document.querySelector あなたは潜在的にあなたが働いているものより完全に異なる構成要素で要素を得ることができました.時々、それはあなたが望むものです、しかし、通常、それはそうです
このため、使用を避けるためには、親指の良いルールですquerySelector , querySelectorAll , またはSvelteコンポーネント内の任意の命令クエリメソッドです.これは決してあなたがそれらを使用してはならないと言うことではない.しかし、Svelteに組み込まれている機能を使用すると、より良い解決策になります.

あなたのコンポーネント内の要素のテキストまたは属性を更新している場合は、要素の問い合わせではなく、コンポーネントテンプレートでそれを表現する必要があります.

あなたのコンポーネント(特にバニラJSライブラリを統合するとき、特に一般的です)で特定のDOM要素へのリファレンスを必要とするならば、あなたはまずbind:this またはアクション.

一度だけ考えて、これらのメソッドを除外する必要がありますquerySelector .

双方向結合は素晴らしい

あなたが反応からsvelteに来るならば、本能的にあなたのフォーム入力をこのように書くかもしれません:

<script>
  let value = '';

  function handleInput(e) {
    value = e.target.value;
  }
</script>

<label for="name">Name</label>
<input id="name" type="text" value="{value}" on:input="{handleInput}" />

<p>
  The value is {value}
</p>

これは動作しますが、あまりにも多くのSvelteのDEVSはあまりにも多くのボイラー板であると考えられています.Svelteでは、このコードの多くをbind:value .

<script>
  let value = '';
</script>

<label for="name">Name</label>
<input id="name" type="text" bind:value />

<p>
  The value is {value}
</p>

これは、あなたが書くコードの量をかなり減らすことができます.And less code means fewer bugs.
また、双方向結合を使用することもできますwith component props . この種のバインディングについては、もっと注意しなければなりません.コンポーネントの複数の層を横切って双方向結合を使用する場合は、特にこれはtrueです.しかし、フォーム要素(フォーム要素をラップするコンポーネント)に対して、双方向結合は正しい選択です.
これに関するもう一つの展望のために"How Svelte Makes Two-Way Binding Safe” ダニエルimfeldによって.

スコープスタイルは、スリムなスタイルを書くことができます

Svelteでは、スタイルはautomatically scoped . あなたは、コンポーネント内のスタイルを書くことができますし、彼らはリークされず、予期せずにアプリケーションの別の部分に影響を与えることを保証されます.
コンポーネントスコープのスタイルなしでプロジェクトで作業する場合は、アプリケーションの別の部分のスタイルと競合しないように、長いクラス名を書くのに使用されることがあります.しかし、Svelteでは、あなたはそれについて心配する必要はありません!
あなたのsvelteコンポーネントの「見出し」または「ラッパー」のようなより短い、より一般的なクラス名を使うのは全くOKです、あなたがそれらのスタイルが偶然どこか別の要素に適用されないと確信することができるので.HTMLタグ名をターゲットにすることもできますp and button 安全に、これを行うべきかどうかはコンポーネントによって異なります.
たとえば、次の例では、ボタンと段落にクラスを追加する必要はありません.私はこのコンポーネントのすべての段落とボタンをスタイルしたいので、私はちょうどターゲットp and button 直接、このコンポーネントの外部の要素は影響を受けません.

<p>
    Katamari Damacy (lit. 'Clump Spirit') is a
    third-person puzzle-action video game developed
    and published by Namco for the PlayStation 2.
    It was released in Japan in March 2004 and in North
    America in September 2004.
</p>

<button>
    That's neat!
</button>

<style>
    p {
        border-bottom: 2px solid limegreen;
        padding: 10px;
    }

    button {
        color: hotpink;
        font-size: 20px;
        font-weight: bold;
        background-color: black;
    }
</style>

あなたがこのscopingがどのように機能するかに興味があるならば、私は深いダイビングをしましたhow Svelte scopes styles 昨年.

Svelteの構文砂糖のすべてをお見逃しなく

Svelteは、共通のタスクのためのボイラー板を減らすために組み込みのニコルの多くを持っています.見落とされたかもしれないものがあります.

クラスを追加したり削除したり、インラインスタイルを設定するために、手動で文字列補間を行う代わりにclass: and style: .

を設定する代わりにinput リスナーと同期のローカル状態を維持するには、使用することができますbind:value . 同様に、aを配線する代わりにchange ラジオボタンのグループにリスナーを使用することができますbind:group .

の中で同じ式を複数回書く代わりに#each 使用できるブロック@const

の代わりにbind:this and onMount 特定のDOMノードへのリファレンスが必要な場合は、use an action

どちらのオプションも機能的に同じ結果を生じるでしょう、しかし、2番目はコードとより読みやすいコンポーネント(特にトリッキーなストリング内挿を取り除くことができるならば)を含みます.
私は与えるSvelte docs 完全な読み取りを介して、特に場合は、チュートリアルを行って以来、しばらくしている.あなたは何を行方不明知っている可能性があります!

ラッピング

これのために記事の「速いヒット」スタイルをすることは、楽しみでした.いくつかのより多くのヒント私は咀嚼しているので、いくつかの時点でフォローアップ記事を参照してください可能性があります.
私の「一般的なsvelte antipattern」に反応した誰にでも感謝します🐫 ケースvs .🐍 ケース・ディベート.どのようなクリーナーSvelteのコンポーネントになるいくつかの他の人々のアイデアのためにそれをチェックしに行く!