Beatbump：探索動態 Web 應用程式的 Svelte 最佳實踐

簡介

由於其處理 UI 更新的簡單性和獨特方法，Svelte 已成為建立快速反應式 Web 應用程式的強大框架。在本部落格中，我們將使用 Beatbump 專案作為主要範例，探討使用 Svelte 的一些最佳實踐。 Beatbump 是一個開源音樂串流平台，展示如何有效利用 Svelte 的功能來創建模組化、高效且用戶友好的應用程式。透過這次討論，我們將重點介紹希望在自己的專案中採用 Svelte 的開發人員的關鍵要點和可行的見解。

了解 Beatbump

儲存庫概述及其用途

Beatbump 是一個開源音樂串流平台，旨在為主流服務提供輕量級、用戶友好的替代方案。該專案以簡單性和效能為優先考慮，利用現代網路技術來提供無縫的音訊串流體驗。它是開發人員的絕佳資源，旨在探索 Svelte 的最佳實踐，同時解決建立互動式 Web 應用程式中的常見挑戰。

使用的技術

Beatbump 的核心利用了 Svelte 獨特的反應方法，同時結合了多種現代技術。此專案使用 HLS.js 實現流暢的音訊串流，使用 TypeScript 實現類型安全，並使用 SCSS 實現可維護的樣式。此技術堆疊使 Beatbump 能夠提供無縫的音樂串流體驗，同時保持乾淨且可維護的程式碼庫。
該專案的架構透過其資料夾結構展示了深思熟慮的組織：

beatbump/app
├── src/
│   ├── lib/
│   │   ├── components/    // Reusable UI elements
│   │   ├── actions/       // DOM interactions
│   │   └── utils/         // Shared utilities
│   ├── routes/           // Application pages
│   ├── ambient.d.ts      // Type declarations
│   └── env.ts            // Environment settings

Beatbump 中的 Svelte 最佳實踐

TypeScript 整合

TypeScript 確保類型安全性和可預測性，使程式碼庫更加健全且不易出現執行時錯誤。在 Beatbump 中，自訂類型和聲明有助於標準化資料結構和特定於應用程式的物件的處理。

1. ambient.d.ts 中的自訂類型： IResponse 介面為 API 回應提供強型別結構，確保整個應用程式中資料處理的一致性。 此介面擴展了 Body 並包含 json() 等用於解析 JSON 回應的方法。 它確保每個回應都遵循一致的結構，減少 API 整合中的潛在錯誤。

beatbump/app
├── src/
│   ├── lib/
│   │   ├── components/    // Reusable UI elements
│   │   ├── actions/       // DOM interactions
│   │   └── utils/         // Shared utilities
│   ├── routes/           // Application pages
│   ├── ambient.d.ts      // Type declarations
│   └── env.ts            // Environment settings

1. app.d.ts 中的應用程式特定聲明： SvelteKit 特定物件的自訂類型可確保平台偵測邏輯的清晰度。 Locals 介面為特定於平台的標誌提供類型定義，確保 iOS 和 Android 的檢查一致。 這些標誌是根據使用者代理程式在 hooks.server.ts 中設定的，從而可以更輕鬆地處理特定於平台的 UI 行為。

   interface IResponse<T> {
       readonly headers: Headers;
       readonly ok: boolean;
       readonly redirected: boolean;
       readonly status: number;
       readonly statusText: string;
       readonly type: ResponseType;
       readonly url: string;
       clone(): IResponse<T>;
       json<U = any>(): Promise<U extends unknown ? T : U>;
   }

範圍樣式

Svelte 中的作用域樣式透過將樣式封裝在元件內來幫助維護模組化和可維護的程式碼。

1. 範例：Alert.svelte 中的作用域樣式：

   declare namespace App {
       interface Locals {
           iOS: boolean;
           Android: boolean;
       }
       interface Session {
           iOS?: boolean;
           Android?: boolean;
       }
   }

1. 組件中的用法：

   <style lang="scss">
       .alert-container {
           position: fixed;
           bottom: var(--alert-bottom, 5.75rem);
           left: 0;
           right: 0;
           z-index: 1000;
           max-height: 60vmin;
           pointer-events: none;
       }
       .alert {
           transition: opacity 0.3s ease;
           background: var(--alert-bg);
       }
   </style>

1. 在組件中的使用： use:clickOutside 指令將操作應用於
   。自訂事件 click_outside 觸發 closeModal 函數，保持邏輯清晰且可重複使用。

      <div>
   
   
   
   <p><strong>Explanation:</strong>  </p>
   
   <ul>
   <li>The alerts are dynamically generated using the $alertHandler store.
   </li>
   <li>Scoped styles ensure that the alert design remains consistent without affecting other parts of the UI.
   </li>
   </ul>
   
   <h4>
     
     
     <strong>Custom Events</strong>
   </h4>
   
   <p>Custom events in Svelte allow encapsulating complex logic within reusable actions.  </p>
   
   <ol>
   <li>
   <strong>Example: click_outside Action in clickOutside.ts:</strong>
    This action listens for clicks outside a specific node and dispatches a click_outside event when detected.The destroy method ensures proper cleanup to avoid memory leaks.
   </li>
   </ol>
   
   <pre class="brush:php;toolbar:false">   export const clickOutside = (node: HTMLElement) => {
          function detect({ target }: MouseEvent) {
              if (!node.contains(target as Node)) {
                  node.dispatchEvent(new CustomEvent("click_outside"));
              }
          }
          document.addEventListener("click", detect, { capture: true });
          return {
              destroy() {
                  document.removeEventListener("click", detect);
              },
          };
      };
   

   可重複使用的操作

   操作是應用於 DOM 元素的可重複使用邏輯區塊，在保持模組化的同時增強互動性。

   1. 範例：tooltip.ts 中的工具提示操作： 當使用者將滑鼠懸停在元素上時，工具提示操作會動態建立並顯示工具提示。當不再套用該操作時，銷毀函數中確保進行正確的清理以刪除工具提示。

      <div use:clickOutside on:click_outside={() => closeModal()}>
          <p>Click outside this box to close the modal.</p>
      </div>
   

   1. 在組件中的使用： data-tooltip 屬性提供工具提示的文字。工具提示操作動態管理其建立和清理。

      export function tooltip(node: HTMLElement) {
          let div: HTMLDivElement;
          node.addEventListener("pointerover", () => {
              const title = node.getAttribute("data-tooltip");
              div = document.createElement("div");
              div.className = "tooltip";
              div.innerText = title;
              node.appendChild(div);
          });
          node.addEventListener("pointerout", () => {
              if (div) {
                  node.removeChild(div);
              }
          });
          return {
              destroy() {
                  if (div) {
                      node.removeChild(div);
                  }
              },
          };
      }
   

   可讀的狀態管理

   Beatbump 中使用 Svelte 儲存來無縫管理反應式狀態更新。 $alertHandler 儲存保存警報的反應清單。當商店發生變化時，元件會自動更新，確保聲明式和無縫的 UI 更新

   商店警訊管理：
   

      <button use:tooltip data-tooltip="Click me!">Hover me</button>
   

   這些小細節創造了一個充滿活力且精美的介面，給人一種生機勃勃的感覺。

   • 此外，Svelte 的動畫指令 (flip) 用於在新增或刪除警報時進行無縫更新。這確保了元素能夠流暢地重新排列，使狀態之間的轉換在視覺上具有凝聚力。

   反應性語句
   
   Svelte 的反應性是其突出的功能之一，Beatbump 很好地利用了它。

   • 在ArtistPageHeader.svelte中，像opacity和y這樣的反應變數會根據滾動事件動態更新。

   beatbump/app
   ├── src/
   │   ├── lib/
   │   │   ├── components/    // Reusable UI elements
   │   │   ├── actions/       // DOM interactions
   │   │   └── utils/         // Shared utilities
   │   ├── routes/           // Application pages
   │   ├── ambient.d.ts      // Type declarations
   │   └── env.ts            // Environment settings
   

   這些變數即時調整視覺元素，例如淡出縮圖或移動標題，從而創建輕鬆適應使用者互動的響應式設計。

   組件通訊
   
   Svelte 讓元件可以輕鬆使用 props 和事件相互通信，而 Beatbump 充分利用了這一點。

   • 在ArtistPageHeader.svelte中，像description這樣的道具會傳遞給像Description這樣的子元件。這可確保父級控制內容，而子級則專注於渲染內容。

      interface IResponse<T> {
          readonly headers: Headers;
          readonly ok: boolean;
          readonly redirected: boolean;
          readonly status: number;
          readonly statusText: string;
          readonly type: ResponseType;
          readonly url: string;
          clone(): IResponse<T>;
          json<U = any>(): Promise<U extends unknown ? T : U>;
      }
   

   這種模組化方法可讓程式碼保持井井有條，並且每個元件都專注於其特定的角色。

   環境變數
   
   Beatbump 中使用環境變數乾淨地處理組態管理。

   • env.ts 檔案透過 import.meta.env 存取變量，以確保不同環境（開發、生產等）之間的靈活性：

      declare namespace App {
          interface Locals {
              iOS: boolean;
              Android: boolean;
          }
          interface Session {
              iOS?: boolean;
              Android?: boolean;
          }
      }
   

   透過集中特定於環境的設置，程式碼庫保持乾淨、適應性強且安全。

   透過深思熟慮地使用這些功能，Beatbump 不僅展示了 Svelte 的功能，還展示了開發人員如何利用它們來建立高效且優雅的應用程式。這些小而有影響力的細節使用戶體驗流暢且程式碼庫易於維護。

   程式碼組織與模組化

   Beatbump 專案體現了卓越的程式碼組織和模組化，顯著增強了可導航性和可維護性。以下將詳細分析這些原則是如何實現的：

   檔案與資料夾結構

   儲存庫採用精心設計的文件和資料夾結構，遵循關注點分離原則：

   • 全域設定檔：
     
     集中配置和類型定義位於檔案中，例如用於類型宣告的ambient.d.ts和用於環境變數的env.ts。這種集中化確保了整個專案的一致性和易於存取。

   • 元件架構：
     
     lib/components 目錄包含模組化且可重複使用的 UI 元件，例如 Alert.svelte 和 ArtistPageHeader.svelte。這種模組化方法提高了可重複使用性，並簡化了更新或擴展 UI 元素的過程。

   • 操作與實用程式：

     • Actions： 與 DOM 相關的行為，例如 clickOutside 和 longpress，都組織在 lib/actions 目錄中。這種封裝確保 DOM 互動以乾淨且可預測的方式進行管理。
     • API 公用程式： lib/api.ts 檔案封裝了網路邏輯，為 API 呼叫提供了一致且可重複使用的介面。這種抽象減少了冗餘並改善了錯誤處理。

   實用函數

   此專案利用實用函數來簡化複雜的邏輯並增強可維護性。這些函數被設計為可重複使用，並策略性地放置在程式碼庫中。

   • 範例：gestures/utils.ts 中的boundingRect： 此實用函數提取 DOM 元素的尺寸，方便實現拖放或基於手勢的互動。此函數定義如下：

   beatbump/app
   ├── src/
   │   ├── lib/
   │   │   ├── components/    // Reusable UI elements
   │   │   ├── actions/       // DOM interactions
   │   │   └── utils/         // Shared utilities
   │   ├── routes/           // Application pages
   │   ├── ambient.d.ts      // Type declarations
   │   └── env.ts            // Environment settings
   

   • 範例：計算速度： 此函數計算手勢的速度，確保動畫流暢且反應靈敏。此類實用程式對於提供優質的使用者體驗至關重要。

   自訂掛鉤

   Beatbump 利用自訂掛鉤來執行應用程式範圍的策略並有效管理設定。這些鉤子封裝了否則會重複或難以維護的邏輯。

   • 範例：hooks.server.ts: 此自訂掛鉤為每個請求設定安全 HTTP 標頭，遵循安全最佳實務。實現如下：

      interface IResponse<T> {
          readonly headers: Headers;
          readonly ok: boolean;
          readonly redirected: boolean;
          readonly status: number;
          readonly statusText: string;
          readonly type: ResponseType;
          readonly url: string;
          clone(): IResponse<T>;
          json<U = any>(): Promise<U extends unknown ? T : U>;
      }
   

   此方法可確保安全標頭在整個應用程式中一致應用，從而減少常見漏洞。

   最佳實務與建議

   雖然 Beatbump 專案展示了許多最佳實踐，但還可以在其他方面進行改進以進一步增強程式碼庫：

   1. 檢定：

      • 單元測試： 引入可重複使用操作、實用函數和 API 實用程式的單元測試，以確保跨各種場景的可靠性和功能。
      • 整合測試：考慮新增整合測試來驗證元件和服務之間的互動。

   2. 輔助功能：

      • ARIA 屬性： 在工具提示等元件中實作 aria-* 屬性，以提高殘障使用者的可訪問性。
      • 鍵盤導航：確保所有互動組件都支援鍵盤導航，增強包容性。

   3. 效能最佳化：

      • 延遲加載：對不是立即需要的組件和資源實現延遲加載，減少初始加載時間。
      • 反應性管理：透過仔細管理反應性語句和儲存來最大程度地減少不必要的 DOM 更新。

   開發人員的關鍵要點：

   • 採用平衡的 TypeScript 方法：
     
     Beatbump 是 Svelte 最佳實踐的實際範例，包括模組化設計、可重複使用操作和高效的狀態管理。這些實踐有助於建立乾淨、可維護且可擴展的程式碼庫。

   • 設計模組化、可重複使用的組件：
     
     該專案利用 Svelte 的內建過渡、動畫和反應功能來提供動態且響應迅速的用戶體驗。

   • 一開始就優先考慮性能：
     
     雖然程式碼庫很強大，但文件、測試和效能優化方面的進一步增強可以提高其可維護性和可擴展性。

   結論

   Beatbump 證明了 Svelte 在建立可擴展、動態和可維護的 Web 應用程式方面的強大功能。其組織良好的結構、對 Svelte 功能的周到使用以及對最佳實踐的堅持使其成為開發人員的寶貴資源。透過探索此儲存庫，您可以獲得有效 Svelte 開發策略的實用見解，並將這些原則應用到您自己的專案中。

   如果您渴望更深入地了解 Svelte 並提高您的開發技能，這裡有一些額外的資源和部落格建議：

   • Svelte 官方文件：Svelte 功能和語法的綜合指南。
   • Svelte 反應性 — 內部和外部指南：對 Svelte 反應式程式設計範例的初學者友善解釋。

   透過結合 Beatbump 的見解和這些資源，您可以進一步完善您的 Svelte 開發方法，並建立不僅實用、面向未來且用戶友好的 Web 應用程式。

以上是Beatbump：探索動態 Web 應用程式的 Svelte 最佳實踐的詳細內容。更多資訊請關注PHP中文網其他相關文章！