Svelte は長い間存在しており、私はいつもわかりやすい原理分析記事を書きたいと思っていました。長い間先延ばしにしていましたが、ついにそれを書きました。 デモ1まず、コンパイル プロセスを見てみましょう。次の <h1>{カウント}</h1> <スクリプト> count = 0 とします。 </スクリプト> このコードはコンパイラによってコンパイルされると、次の 3 つの部分で構成されるコードを生成します。
// 一部のコードを省略します... 関数create_fragment(ctx) { h1とします。 戻る { c() { h1 = 要素("h1"); h1.textContent = `${count}`; }, m(ターゲット, アンカー) { 挿入(ターゲット、h1、アンカー); }, d(切り離し) { if (デタッチ) detach(h1); } }; } count = 0 とします。 クラスAppはSvelteComponentを拡張します{ コンストラクタ(オプション) { 素晴らしい(); init(this、オプション、null、create_fragment、safe_not_equal、{}); } } デフォルトのアプリをエクスポートします。 フラグメントの作成まず、 h1 = 要素("h1"); h1.textContent = `${count}`; 挿入(ターゲット、h1、アンカー); 関数挿入(ターゲット、ノード、アンカー) { target.insertBefore(ノード、アンカー || null); } if (デタッチ) detach(h1); 関数 detach(ノード) { ノードの親ノードを削除します。 } フローチャートをよく見ると、 これは、 スヴェルトコンポーネント各コンポーネントは、 クラスAppはSvelteComponentを拡張します{ コンストラクタ(オプション) { 素晴らしい(); init(this、オプション、null、create_fragment、safe_not_equal、{}); } } 要約すると、
状態を変更できるデモここで、 <h1 on:click="{update}">{count}</h1> <スクリプト> count = 0 とします。 関数 update() { カウント++; } </スクリプト> コンパイルされた製品の変更、および // モジュールのトップレベルの宣言から let count = 0; // インスタンスメソッドになる function instance($$self, $$props, $$invalidate) { count = 0 とします。 関数 update() { $$ 無効化(0, count++, count); } [count, update]を返します。 } // テンプレートに3つのアプリを定義する <アプリ/> <アプリ/> <アプリ/> // count が不変の場合、ページは次のようにレンダリングされます: <h1>0</h1> <h1>0</h1> <h1>0</h1> <h1>0</h1> <h1>3</h1> <h1>1</h1> したがって、各
見つかった変数は 同時に、上記の操作を実行するステートメントがテンプレートを通じて参照できる場合、そのステートメントは
したがって、コンパイルされた // ソースコードの更新 関数 update() { カウント++; } // コンパイルされたインスタンスで更新 関数 update() { $$ 無効化(0, count++, count); }
c() { h1 = 要素("h1"); //countの値はctxから取得されます t = text(/*count*/ ctx[0]); }, m(ターゲット, アンカー) { 挿入(ターゲット、h1、アンカー); 追加(h1, t); // イベントバインディング dispose = listen(h1, "click", /*update*/ ctx[1]); }, p(ctx, [ダーティ]) { // set_data は t に格納されているテキスト ノードを更新します。if (dirty & /*count*/ 1) set_data(t, /*count*/ ctx[0]); }, d(切り離し) { if (デタッチ) detach(h1); // イベントのバインド解除 dispose(); } // UI 内の複数の状態を参照する<h1 on:click="{count0++}">{count0}</h1> <h1 on:click="{count1++}">{count1}</h1> <h1 on:click="{count2++}">{count2}</h1> 対応する p(new_ctx, [ダーティ]) { ctx = new_ctx; if (dirty & /*count*/ 1) set_data(t0, /*count*/ ctx[0]); if (dirty & /*count1*/ 2) set_data(t2, /*count1*/ ctx[1]); if (dirty & /*count2*/ 4) set_data(t4, /*count2*/ ctx[2]); },
上記は、JavaScript 開発における Svelte の実装原則の詳細な説明の詳細な内容です。Svelte の実装原則の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
>>: HTML+CSS で div タグの右上隅に削除アイコンを追加するサンプルコード
この記事では、参考までにMySQLの無料インストール構成チュートリアルを紹介します。具体的な内容は次...
vue-cli で構築されたプロジェクト スキャフォールディングでは、すでに autoprefix...
Docker を正式に使用する前に、まず Docker でよく使用されるコマンドに慣れておきましょう...
この記事では、参考までに、簡単な抽選機能を実装するためのjsの具体的なコードを共有します。具体的な内...
1. 背景ボタンは非常によく使われており、Element のボタン機能は非常に包括的です。この記事で...
wxsとは何ですか? wxs (WeiXin Script) は、小規模プログラム用のスクリプト言語...
<br /> テキスト、シンボル、リンクの 3 つの側面に焦点を当て、主に中国語で、私の...
目次環境設定の概要1.K8Sとは何ですか? 2. K8S を使用する理由3. K8S を使用する利点...
1. 遭遇したいくつかの問題2008 年にパフォーマンス テストを行っていたとき、パフォーマンス テ...
Nginx は現在、最も人気のあるロード バランサーの 1 つです。インターネット トラフィックの...
1. MySQLデータベースのエンコーディングを確認する mysql -u ユーザー名 -p パスワ...
1. 環境整備各コンテナの IP アドレス: nginx: 172.16.10.10マイSQL: 1...
目次単一マシンの展開オンラインプルミラーを見るRabbitMQを作成して実行するMQコンテナを正常に...
目次トリガーとは何かトリガーを作成する表は次のようになります。さらにいくつかの単語を挙げます。制限と...
この記事では、WeChatアプレットでビデオプレーヤーの集中砲火を実装するための具体的なコードを参考...