Clever Geek Handbook

1Kbオートコンプリート

すべての人に良い一日を！ 以前の投稿を追跡して、 SvelteJSのオートコンプリートのマイクロコンポーネントの簡単な例を示したいと思います。 誰もこの世界的なフレームワークに慣れる時間を持っていません-カットの下でウェルク！

画像



免責事項（注意<sarcasm />が検出されました！）
すぐに、既存のフレームワークだけでなく、将来のフレームワークも、$ molに近くないことを宣言します。 他のフレームワークが$ molよりもクールだと主張することは決してありません。 これは、これまで人類が作成した最もクールなフレームワークです。 世界を救うのは$ molだと確信しています！


さて、これでSvelteについて話すことができます）これは金曜日の投稿なので、あまり遅らせないようにします。



そのため、タスクのリストは、オプションのリストの非同期ロードをサポートする自動補完の再利用可能なマイクロコンポーネントを作成することです。 つまり、目的の値の入力を開始します。オプションのリストが表示されます。このリストは、静的に設定（特定の配列）することも、サーバーから動的にロードすることもできます。



実際、svelteコンポーネント自体は次のようになります。 



<!-- Autocomplete.html --> <input list="suggestions" bind:value="search" placeholder="Start typing..." /> {{#await suggestions}} {{then options}} <datalist id="suggestions"> {{#each options as option}} <option>{{ option }}</option> {{/each}} </datalist> {{/await}} <script> export default { data: () => ({ search: '', suggestions: [] }) }; </script>


発言
注意深い読者は、ここに存在する独特の「ライフハック」にすぐに気付くでしょう。 つまり、<datalist /> html5タグの使用は、実際にそのような目的で作成されましたが、 ブラウザーのサポートが不十分です 。



ここでは、コードを視覚的に単純化して理解を深めるために、またドロップダウンリストの特定の実装が記事の目的ではないため、ここでは純粋にデモ目的で使用していることに注意してください。 いくつかのスタイルを使用して<datalist />から<ul />にリストを削除することは大したことではないようです。



その結果、入力フィールドとそれに添付されたオプションのリストを持つ単純なテンプレートができました。 入力フィールドはコンポーネントデータの「検索」変数にバインドし、オプションのリストは「提案」配列を使用して動的に設定されます。



テンプレートの{{#await /}}に注意してください。 変数の「提案」が実際の配列であるか、配列に解決されることを約束するかを心配する必要がないのは、この単純な構造です。



これでおそらくすべてです。次に、使用に移りましょう。 



 <!-- App.html --> <h1>Selected location: {{ location }} </h1> <Autocomplete bind:search="location" bind:suggestions="locations" /> <script> import Autocomplete from './Autocomplete.html' import { fetchLocations } from './api.js' export default { data: () => ({ location: '' }), computed: { locations: location => { return location.length >= 3 ? fetchLocations(location) : [] } }, components: { Autocomplete } }; </script>


これは、特定のケースのドメインロジックを実装する特定の親コンポーネントです。 この場合、これは場所（都市）の選択です。



最初に、オートコンプリートコンポーネントと、サーバーAPIとの相互作用を実装する特定のモジュールが接続されます。 また、選択した値を実際に保存する場所変数もあります。 これは、小道具を介してオートコンプリートコンポーネントから「検索」にバインドし、特定の結果値によって少し高く出力されます。



次は興味深い点です。 Svelteは、{{＃await /}}による非同期値の出力、および他のデータに依存する可能性がある計算された小道具の出力をサポートしているため、サーバーからオプションのリストを取得し、変更するためにバインドするための超簡単な計算されたプロパティを書くことができます「場所」。 すなわち ユーザーがフィールドに値を入力すると、リアクティブ変数の「場所」が変更され、計算されたプロパティ「場所」の再計算が行われます。 このプロパティは、小道具を介してオートコンプリートコンポーネントからの「提案」にもバインドします。 そして、すべてが「魔法」のように機能します））））



また、この例をうまく機能させるためには、サーバーに不要なリクエストがあふれないように、デバウンスメソッドを実装する必要があることに注意してください。 この場合、デバウンスはfetchLocations（）関数内にすでに実装されていると想定されます。これは、例と直接関係がないためです。



したがって、再利用可能なマイクロ補完コンポーネントをSvelteに実装するのは非常に簡単です。









さらに、Svelteに関する以前の記事については、Svelteの原理、svelteコンポーネントのAoTコンパイル、およびコードの重複の可能性に関して多くの質問がありました。 SvelteのクリエイターRich Harrisによるこのコメントの無料翻訳を紹介します。



これはいい質問です。 いくつかの方法で答えます。



  1. shared：trueフラグ（svelte-loaderやrollup-plugin-svelteなどのビルドツールと統合すると自動的に発生します）を使用してコードをコンパイルすると、コードの一部がコンポーネント（たとえば、detachNodeなどのメソッド）間で再利用されます） その場合、これらすべてが複製されないため、オーバーヘッドが削減されます。
  2. コードは多かれ少なかれ読みやすいように生成されますが、同時にサイズはかなり小さくなります。
  3. ただし、理論的には、生成されたコードのサイズがフレームワーク+テンプレートのサイズを超える移行ポイントがあります。 ただし、アプリケーションがこのサイズに成長する頃には、おそらくコード分割技術を使用する必要があります。 たとえば、現在のURLに基​​づいてコンポーネントを非同期的にロードします。 コード分​​割手法は、従来のフレームワークよりもSvelteの方がはるかにうまく機能します。これは、伝統的に、コードの最小部分でもライブラリ全体に依存するためです。
  4. コードサイズはSvelteの目標の1つにすぎません。 他の目標は高性能であり、開発者に優れたエクスペリエンスを提供します（コンパイラは静的コード分析に基づいているため、Elmのように有用なエラーメッセージやその他の種類の警告を表示できます）。 また、このアプローチの大きな利点は、フレームワークの新機能の良いアイデアに「ノー」と言う必要がないことです。新機能の外観は、それらを使用しない人には影響しないからです。 従来のフレームワークでは、フレームワークのサイズとユーザーのニーズのバランスを常にとる必要があります。 などなど。
  5. いずれの場合でも、たとえば、プログラムで生成する意味がない静的マークアップが大量にある場合に、より巧妙なギャップ処理を使用したり、innerHTMLを使用したりすることで、生成されるコードのサイズを削減できます。 その結果、生成されたコードのサイズは、コンパイラーの開発によってのみ減少します。


もちろん、例えば、Ractiveに関してはトレードオフがあります-これは柔軟性です。 this.observe（ 'some.nested.property'、（）=> {}）を実行したり、複雑な変数にアダプターを使用したり、テンプレートに{{#with ...}}ブロックを入れたりすることはできません。 これはすべて、Ractiveで理にかなっています。Ractiveでは、「私が意味することをする」という哲学を使用しています。 Svelteは静的分析に基づいており、「私が言うことをする」という事実に基づいていますが、最終的にはより厳密なオプションです。



自分からは、Svelteを多かれ少なかれ大規模なプロジェクトで試していないことを付け加えたいと思います（私は計画していますが）。 また、AngularやVueなどの巨人にも反対しません。 SvelteではなくRactiveがそのフィールドでプレイします。



しかし、小さなプロジェクト（ウィジェットなど）と中規模のプロジェクト（モバイルアプリケーションやテレビアプリケーションなど）のニッチを完全に占めていると思います。 そのようなプロジェクトでは、Svelteは間違いなく小さなバンドルサイズと大きな速度を提供します。 これがあなたに関連しているなら、あなたは彼をもっとよく知るべきです。



良い週末を！ そして、金曜日のフォースがあなたと共に来ますように！



更新：

Svelteでコードの重複が心配な人向け。 Rich Harrisから直接新しい情報があります。 このトピックに関する私のコメントはここで読むことができます 。



更新2：



Svelteに興味があり、その開発をフォローしたい方-ロシア語の電報チャネルSvelteJSへようこそ 。 よろしくお願いします！


More articles:


All Articles