NgSysV.創建一個簡單的 Reactive Svelte Web 應用程式

該貼文系列已在 NgateSystems.com 上建立索引。您還可以在那裡找到超級有用的關鍵字搜尋工具。

最後評論：24 年 11 月

一、簡介

上一篇文章建立了一個完全由簡單 HTML 組成的 Svelte Web 應用程式。它不包含任何 Javascript，因此沒有使用 Svelte 任何複雜的動態 HTML 產生工具。這篇文章只會觸及 Svelte 功能的表面，但應該能讓您感受到語言的強大功能。

2. 狀態和反應性

客觀地來看，Web 應用程式是 HTML 頁面、彈出視窗、表格、表單和按鈕的複雜層次結構。這種令人眼花撩亂的視覺元素組合是由數據「告知」的。 表格中充滿了 JavaScript 陣列內容。彈出視窗根據標誌欄位的要求出現和消失。當滑鼠和鍵盤輸入「戳」時，表格中的資料就會綻放出來。簡而言之 - 這很複雜。在這種情況下如何建立某種秩序？

總的來說，定義 Web 應用程式在任何時刻的外觀的資料體稱為 Web 應用程式的 狀態。我們在軟體開發技術上投入了大量精力，旨在讓編寫在狀態變化時能夠有效地做出反應的網路應用程式變得更加容易。像 Svelte 這樣的平台專門設計用於提供良好的反應性。

讓我們來看看 Svelte 對 State 的定義方法及其 Reactivity 的實作。

2.1 一個簡單的反應式Web應用程式

網頁上的一個常見功能是一個彈出窗口，當您啟動它時，它會顯示（通常很煩人），但當您單擊它時，它會自動消失。讓我們看看 Svelte 如何讓您使用 State 和 Reactivity 在 Web 應用程式中實現這一點。

在Javascript中，你需要先定義一個變量，然後才能使用它。例如，像
這樣的指令

console.log(myDataItem);

將拋出錯誤，除非在程式碼的較早位置您使用類似
的語句定義了它

let myDataItem;

順便說一句，您會發現訪問「遊樂場」很有用，它可以讓您快速嘗試像這樣的 JavaScript 程式碼。任何瀏覽器頁面的「檢查」視圖都提供了這樣一個遊樂場 - 在隨機頁面上開啟檢查器並選擇其功能表列上的「控制台」標籤。或者，您也可以嘗試 PlayCode 上的 javascript 控制台。

關於 JavaScript 的 let 關鍵字有很多話要說（嘗試向 chatGPT 詢問「範圍」），但 let 在 Svelte 中還有額外的意義，因為這就是定義 State 的方式。在 Svelte 程式中，任何使用 let 定義的變數都會成為程式狀態的一部分。

那又怎樣？好吧，我之前說過狀態變數——定義 web 應用程式外觀的變數——是「反應性的」。這表示當它們的值發生變化時，Web 應用程式的外觀會自動進行相應的更改。 假設您使用 popupVisible 布林變數來定義彈出視窗的狀態。 Svelte（反應式平台）可以使用變數的值來確定彈出視窗是否可見嗎？我們來試試吧。

這是我建議使用的程式碼。我將在一分鐘內解釋它的作用：

//src/routes/ page.svelte - 在執行之前刪除此行

    讓 popupVisible = true;

    函數切換彈出（）{
        popupVisible = !popupVisible;
    }
腳本>

<div>
    {#if popupVisible}
        



<p>這裡的程式碼分為兩部分。上面的「腳本」部分由 <script></script> 定義。標籤，宣告一個 popupVisible javascript 變數和一個togglePopup() 函數。下方的「範本」部分指定 Svelte {#if} {/if} 邏輯區塊「調節」的 HTML。 Svelte 程式碼可以引用 <script> 中定義的變數和函數。指導 HTML 程式碼產生的部分。引用用大括號 {} 括起來，除非直接在邏輯區塊中使用它們 - 有關完整詳細信息，請參閱基本標記和邏輯區塊中的 Svelte 文檔。 </script></p>

<p>上面顯示的程式碼非常粗糙。 「彈出視窗」通常由 </p>
<div> 定義。使用邊框和一些定位 CSS 格式化的標籤。這裡我使用了一個 <button>標籤 - 更常用於定義表單上的「提交」元素。我這樣做只是因為它使我能夠避免一些可能分散您注意力的技術問題。我已將“彈出”按鈕塗成藍色，以便您可以看到它。 

<p>如果您仍有在 2.1 後建立的 svelte-dev Svelte 專案骨架的副本，請嘗試使用此程式碼取代 src/routes/ page.svelte 的全部內容。當您在專案上開啟終端並像以前一樣啟動開發伺服器時，您的瀏覽器現在應該會啟動並顯示如下所示的畫面：</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173277643775221.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>

<p>藍色矩形是「彈出視窗」。它在啟動時顯示，因為此時 popupVisible 變數設為 true，並且指示驅動頁面 HTML 產生的 Svelte 邏輯建立一個 <button> 按鈕。在這種情況下標記。 </button></p>

<p>現在嘗試點擊彈出視窗。魔法！它消失了。這是因為 指定彈出視窗的標記包含一個 onClick 子句，該子句使單擊元素運行togglePopup 函數。這又將 popupVisible 變數設為 false。 </p>
<p>我之前說過，更改 Svelte「狀態」變數會導致 Svelte 透過重新運行頁面的模板部分來刷新螢幕。因此，模板部分重新運行，現在，由於 popupVisible 的值為 false，因此 <button> 會顯示出來。顯示彈出視窗的程式碼被繞過，留下空白頁面。 </button></p>

<p>現在花點時間來理解這一點。如果您仍在使用我在 1.1 篇文章中介紹的原始 DOM 操作程式碼，那麼這種效果只能透過編寫大量相當技術性的程式碼（並且可能是相當低效）低階程式碼。在這裡，您只需更改變數的值。 Sveltekit 已經<strong>自動</strong>處理了複雜的後果（而且，放心，高效）。 </p>

<p>簡而言之，Svelte 為您提供了一種高級語言，讓您將瀏覽器螢幕管理的繁瑣細節留給框架。  </p>

<p><em>2024 年 10 月，Svelte 5 對其反應性定義安排進行了一系列改進。上面描述的 let 結構仍然適用於本系列文章中的所有內容，但現在可以使用新的符文概念來處理更複雜的需求。有關詳細信息，請參閱什麼是符文。 </em></p>

<h4>
  
  
  2.2 資料輸入
</h4>

<p>讓我們讓彈出視窗變得更有趣一點。想像一下，您的工作是維護一家製造公司的「產品」清單。您需要一個實用程式來顯示目前清單並允許您新增產品。當然，在實踐中，您也希望它能夠編輯和刪除條目，但現在讓我們保持簡單。 </p>

<p>看看下面的程式碼。它可能會擴展您的 JavaScript 知識，但內部註釋應該會有所幫助。 <br>
</p>

<pre class="brush:php;toolbar:false">//src/routes/ page.svelte - 在執行之前刪除此行

    讓 popupVisible = false;
    讓新產品編號 = "";
    讓產品= []； // 產品物件陣列 {productNumber: ProductNumber}
腳本>

<div>



<p>這裡的「範本」部分先檢查 popupVisible 的值。如果這是false（它將在啟動時出現，因為該變數剛剛在「腳本」部分中初始化），則Web 應用程式將顯示Web 應用程式的目前「產品」清單（儲存在產品數組中的產品編號數組）。 </p>

<p>程式碼現在繼續並顯示一個「新增另一個產品」按鈕 - 現在是一個正常的按鈕，而不是上一個範例中使用的怪異版本。但是，和以前一樣，它有一個關聯的 on:click 函數，並且該函數將 popupVisible 的值設為 true。 </p>

<p>如果點擊按鈕會發生什麼事？為什麼，既然 popupVisible 是一個反應變量，那麼 web 應用程式將刷新其螢幕。 </p>

<p>這次，表單的產品顯示部分將被忽略，控制項將直接移至範本部分的第二部分。 </p>
<p>在這裡，您會看到更像傳統彈出視窗的內容。這個使用了 </p>
<form> 。容器內的標籤 div>收集 newProductNumber 狀態變數的輸入。  這裡使用特殊的 Svelte「綁定」限定詞來將 newProductNumber 與使用者的鍵盤輸入同步。每次使用者在表單的 <input> 欄位中鍵入一個字元時，newProductNumber 都會更新。 

<p>當使用者最終點擊表單的「註冊」按鈕時，其 on:click 函數能夠將完全更新的 newProductNumber 推送到產品陣列中並重置 popupVisible 欄位。 </p>

<p>最後，由於 popupVisible 是一個反應變量，因此程式碼的「範本」部分將重新運行，並且彈出視窗將被更新的產品編號清單取代。 </p>

<p>其他一兩件事可能會讓您感到困惑。在前面的範例中，anon:click 限定詞引用了 web 應用程式的 <script> 中定義的函數。部分。然而，在這個新版本的 page.svelte 中，該函數是在 <button> 中明確定義的。字段的 HTML 規範。這兩種方法都是完全有效的。這裡使用的版本對您來說可能看起來有點奇怪，但它是一種廣泛使用的安排，其優點是函數的邏輯是在其呼叫點定義的。這使得更容易看到正在發生的事情。 </script></p>

<p>僅供參考，表達式：<br>
“() => { .... }”表示“這是由以下JavaScript 語句定義的函數：“{ .... }”。有很多變體。請chatGPT 為您提供有關“箭頭”的教程“功能。 </p>

<p>繼續前進，您還會注意到我在「造型」方面更具冒險精神。例如，有一個標題，並且所有內容都很好地居中（CSS“繼承”確保>

</p>
<p>但這已經足夠了。讓我們看看 web 應用程式的運作情況。將新程式碼貼到 page.svelte 檔案的目前內容上，儲存它並（如有必要）在專案上開啟終端，然後使用 npm run dev -- --open 命令重新啟動開發伺服器。這是您應該在瀏覽器中看到的內容::</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173277643810144.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>

<p>這是點擊按鈕時應該看到的內容：<br><br></p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173277643952736.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>

<p>由於 newProductNumber 欄位沒有驗證，您會發現您可以輸入字元和數字 - 我們將在以後的帖子中修復此問題。即便如此，當您按一下「註冊」按鈕時，您應該會看到彈出視窗已被原始庫存顯示頁面取代，並且您的新產品「編號」已新增至清單。 </p>

<p>Svelte 的這個片段幾乎開始看起來像一個資訊系統！ </p>
<h3>
  
  
  3. 前進和向上
</h3>

<p>這篇文章讓您簡要地了解了 Svelte 語言中體現的關鍵概念。不幸的是，有一個障礙。我相信您會注意到，您剛剛看到的“庫存”示例實際上毫無用處，因為每次您關閉網頁應用程式時，其產品清單都會消失！因此，下一步是向您介紹 Google 的 <strong>Firestore</strong> 資料庫技術。這將允許您在伺服器主機上建立<strong>持久</strong>儲存。 </p>

<h3>
  
  
  後記 (a)：當出現問題時 - 使用 Chrome Inspector 調查佈局問題
</h3>

<p>Post 2.1 中的「當事情出錯時」描述瞭如何處理開發 Web 應用程式時遇到的一些更嚴重的問題。但現在您處於更高級的水平，您需要更複雜的工具。本節向您介紹“Chrome 檢查器”，它在糾正 Web 應用程式的螢幕佈局問題和 JavaScript 中的邏輯錯誤時提供了寶貴的幫助（以及更多內容，您將在本系列後面看到）。 </p>

<p>透過右鍵點擊頁面並選擇「檢查」選項，可以在 Web 應用程式頁面上啟動檢查器。這是其輸出的範例：</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173277644070139.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>

<p>在此螢幕截圖中，我有：</p>
<ul>
<li>啟動了檢查器，如上所述。 w 檢查視窗現在隱藏了 web 應用程式視窗的下半部。這可能會很不方便，因為檢查器現在可能隱藏了一些我想要檢查的 webapp 元素！透過點擊並拖曳檢查器視窗的上邊框來「調整」檢查器視窗的大小可以部分解決此問題。或者，您可以使用選單最右側三點圖示下的「停靠側」工具將檢查器停靠在螢幕一側。 </li>
<li>從檢查器選單列中選擇「元素」標籤</li>
<li>擴展了和 <div> HTML 標記層次結構中的行顯示在左側檢查面板中，並將滑鼠懸停在 <h1> 上。顯示網頁應用程式標題的標籤


</h1>
<p>如果您自己嘗試一下，您會注意到標題已經獲得了一些彩色圖形。這些顯示了已新增至文字中的邊距、邊框和填滿的大小和位置。右側檢查面板提供更多細節。如果您單擊選單中的計算選項卡，您將獲得一個圖形，其中解釋了各種元素的顏色編碼和詳細尺寸。如果您按一下「樣式」標籤，您將看到附加到文字的樣式的詳細資訊。清單中的第一組條目確認使用標籤的> 明確設定的樣式

</p>
<p>這個面板的美妙之處在於您可以使用檢查器來查看更改和添加樣式的效果。例如，假設您想在標題上嘗試紅色字體，請點擊面板頂部的 element.style 條目中的某處，然後輸入顏色：紅色。標題現在順理成章地變成了紅色。請注意使用自動完成功能來嘗試不同顏色的機會。 </p>

<p>我不想強調這一點，但我認為您應該開始了解這個工具如何為您提供一個精確且直觀的工具來調查和修復佈局問題。有關更多信息，請查看 Google 關於 DevTools 檢查器的文檔。 </p>

<p>準備好在這上面花費相當多的時間。檢查器是一個複雜的工具，因此您需要一段時間才能自信地使用它。  但這時間花得值。 Inspector 無疑為我節省了無數個小時的源代碼設定盲目實驗時間。檢查器的圖形顯示可使元素寬度、邊距和填滿的所有隱藏屬性可見。 </p>

<h4>
  
  
  後記 (b)：使用 Chrome Inspector 調查邏輯問題
</h4>

<p>檢查器還可以幫助您查看原始程式碼並在您想要停止執行的行上設定“斷點”，從而幫助您發現邏輯錯誤。刷新 Web 應用程式後（檢查器仍開啟），您可以檢查每個斷點處的欄位值。這是檢查器運作時的螢幕截圖：</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173277644137804.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>
<p>在此螢幕截圖中，我：</p>

<ul>
<li>像以前一樣啟動檢查器。 </li>
<li>點擊左側面板上方的「來源」標籤，並在頁面檢視中展開 localhost 的來源層次結構，以便我能夠點擊 src/routes 行中路線的斜體 page.svelte 條目。 </li>
<li>注意到右側面板現在顯示 page.svelte 的原始程式碼並點擊 let popupVisible = false;設定斷點的行（透過其行號上的藍色反白顯示確認）。 </li>
<li>刷新瀏覽器中的頁面，並注意到 Web 應用程式現在顯示“在偵錯器訊息中暫停”，其中包括“恢復執行”按鈕和“跳過下一個函數呼叫”按鈕。您也會看到 let popupVisible = false;該行現在反白</li>
</ul>

<p>所有這些的效果是將 web 應用程式置於「程式碼偵錯」模式。現在，我正在調試 web 應用程式的 <strong><script></script></strong> 部分，這有點毫無意義，因為它只運行一次，而且你確切知道它的作用。但讓我們走一遍這些動作，因為它們將幫助您了解偵錯器可以在 JavaScript 原始程式碼中為您做什麼。 </p>

<p>目前，Web 應用程式在執行第一條語句之前就已經停止，因此沒有執行任何有用的操作。但是，透過按一下「Step over next」按鈕前進到下一條語句，並注意反白顯示現在已移至第二行。將滑鼠懸停在第一行中的 popupVisible 欄位上，請注意現在顯示的工具提示顯示其目前值 - 當然是 false。重複這個技巧來確認 newProductNumber 和 products 的設定。 </p>

<p>如果您在 <script> 中定義的 Javascript 函數中設定斷點，則可以更清楚地看到檢查器的價值。部分。每次引用函數時都會執行它們，並且檢查器非常適合追蹤這些進程的進度。 </script></p>

<p>不幸的是，使用 page.svelte 檔案的「範本」部分中的斷點進行偵錯並不是那麼簡單。在這裡，每次頁面在回應變數發生變更後重新呈現時都會執行程式碼，但此處顯示的「來源」標籤的程式碼（即 page.svelte 的原始 Sveltekit 程式碼）並不是現在實際運行的程式碼。原始程式碼已替換為本機伺服器產生的 Svelte 腳本。因此，您獲取有關正在發生的事情的資訊的範圍有限。 </p>

<p><em>如果您想了解更多有關渲染過程以及為什麼您的頁面。 svelte 檔案在檢查器中的行為與此類似，請短暫跳到 Post 4.4 的末端。但是，請注意，這很複雜！ </em></p>

<p>根據我的經驗，您通常可以在 Sveltekit 語句上設定斷點，從而追蹤重新渲染期間所採取的路徑。但這些不會顯示欄位值。 </p>
<p>但是，您可以在嵌入式函數中有效地設定斷點。例如，嘗試在 products.push({productNumber: newProductNumber}); 中設定斷點「註冊」按鈕的行。請注意，<button> 的整個區塊都是程式碼會被反白（灰色），提醒您這是一個「匿名函數」（讓 chatGPT 有時向您解釋這一點）。現在重新運行 web 應用程式並觀察斷點的行為方式，就像在 <script> 中一樣。部分。要求 Web 應用程式註冊新的產品編號 123 並按一下「註冊」按鈕後，您將看到 Web 應用程式在斷點行停止。 「跳過下一個函數呼叫」並將滑鼠懸停在 products.push({productNumber: newProductNumber}); 上線。您會注意到，它現在顯示產品陣列現在包含單一值 123。 </script></button></p>

<p>如果所有其他方法都失敗，並且您仍然需要檢查模板部分中變數的值，則變數「x」的「console.log」等效項將是</p>
<p>x 的值是{x } p>聲明。 </p>

<p>請注意，「在偵錯器中暫停」行上的按鈕在檢查器功能表列中重複，並輔以「步入下一個函數」按鈕，使您能夠遍歷巢狀函數。 </p>

<p>您很快就會意識到，斷點設定保留在 webapp 檔案中。再次點擊斷點線即可將其關閉。在螢幕右側檢查器的「斷點」面板中的檔案條目中「右鍵單擊」將顯示一個主開關，用於刪除所有斷點。 </p>

<p>終於。請注意，當網路應用程式遇到重大問題並「崩潰」時，開啟檢查器將在其功能表列的右側顯示紅色的「錯誤計數」。發生這種情況時，可以在檢查器的「控制台」標籤中查看問題的詳細資訊。 </p>


          </div>

            
        </li>
</ul>
</form>
</div>