將迷你應用程式程式設計原則套用至範例專案

Thomas Steiner

注意： 這篇文章屬於文章集合的一部分，其中每篇文章都是以先前的文章為基礎。如果您才剛到達這裡，建議您從開頭開始閱讀。

應用程式網域

為示範應用於網頁應用程式的精簡應用程式程式設計方法，我需要具備一個足夠但功能完整的應用程式構想。高強度間歇訓練 (HIIT) 是一種心血管運動策略，會在短時間緊張的劇烈運動上切換，且強度較低的恢復期。許多 HIIT 訓練都會使用 HIIT 計時器，例如，這是 YouTube 頻道 The Body Coach TV 提供的 30 分鐘線上課程。

有效期間。

休息期間。

HIIT 時間範例應用程式

在這個章節中，我建立了一個名為「HIIT 時間」的基本範例，讓使用者能定義和管理各種計時器，且一律包含高強度和低強度的計時器，並選擇其中一個用於訓練課程。這是回應式應用程式，內含導覽列、分頁標籤列和三個頁面：

• 健身：健身期間的有效頁面。它可讓使用者選擇其中一個計時器，並且有三個進度環：組合的數量、有效期間及休息期間。
• 計時器：管理現有的計時器，並讓使用者建立新計時器。
• 偏好設定：可讓您切換音效和語音輸出功能，並選取語言和主題。

以下螢幕截圖為應用程式對應用程式留下印象。

處於直向模式的 HIIT 時間「健身」分頁。

在橫向模式下的 HIIT 時間「健身」分頁。

HIIT 時間計時器管理。

應用程式結構

如上所述，應用程式包含一個以格狀排列的導覽列、分頁標籤列和三個頁面。系統會將導覽列和分頁標籤列視為含有 <div> 容器的 iframe，兩者之間有三個網頁 iframe，但只有兩個 iframe 會一直顯示，且取決於分頁列中的目前選取的項目。指向 about:blank 的最終 iframe 會針對動態建立的應用程式內頁面提供該頁面，用於修改現有的計時器或建立新的計時器。這個模式稱為多頁單頁應用程式 (MPSPA)。

這個應用程式由六個 iframe 組成。

元件型 lit-html 標記

每個頁面的結構都是 lit-html Scaffold，會在執行階段動態評估。針對 lit-html 的背景，這是安全、生動、可擴展的 JavaScript 範本程式庫。因此，心理程式設計模型會直接以輸出為導向，因此直接在 HTML 檔案中使用。身為程式設計師，您可以編寫最終輸出內容的範本，並編寫 lit-html 的範本，接著根據您的資料動態填補缺口，並掛斷事件監聽器。應用程式會使用 Shoelace 的 <sl-progress-ring> 等第三方自訂元素，或稱為 <human-duration> 的自行實作自訂元素。由於自訂元素具有宣告式 API (例如進度環的 percentage 屬性)，因此可以與 lit-html 搭配使用，如下方清單所示。

<div>
  <button class="start" @click="${eventHandlers.start}" type="button">
    ${strings.START}
  </button>
  <button class="pause" @click="${eventHandlers.pause}" type="button">
    ${strings.PAUSE}
  </button>
  <button class="reset" @click="${eventHandlers.reset}" type="button">
    ${strings.RESET}
  </button>
</div>

<div class="progress-rings">
  <sl-progress-ring
    class="sets"
    percentage="${Math.floor(data.sets/data.activeTimer.sets*100)}"
  >
    <div class="progress-ring-caption">
      <span>${strings.SETS}</span>
      <span>${data.sets}</span>
    </div>
  </sl-progress-ring>
</div>

網頁中與上方標記相對應的轉譯部分。

程式設計模型

每個頁面都有對應的 Page 類別，可提供事件處理常式的實作並提供每個網頁的資料，藉此將生命填入 lit-html 標記。這個類別也支援生命週期方法，例如 onShow()、onHide()、onLoad() 和 onUnload()。頁面可以存取資料儲存庫，以便共用選擇性的個別頁面狀態和全域狀態。所有字串都集中管理，因此內建國際化。由於所有應用程式都會切換 iframe 的顯示設定，而動態建立的網頁也會變更預留位置 iframe 的 src 屬性，因此瀏覽器基本上可以免費處理轉送。以下範例顯示用於關閉動態建立頁面的程式碼。

import Page from '../page.js';

const page = new Page({
  eventHandlers: {
    back: (e) => {
      e.preventDefault();
      window.top.history.back();
    },
  },
});

導覽會在 iframe 至 iframe 之間進行。

樣式

頁面樣式會在專屬範圍的 CSS 檔案中依頁面顯示。 也就是說，元素通常可以直接使用元素名稱處理，因為其他頁面之間不會發生衝突。全域樣式會新增至每個頁面，因此您不必重複宣告 font-family 或 box-sizing 等中央設定。這也是定義主題和深色模式選項的位置。下方清單列出「偏好設定」頁面的規則，這些規則會在格狀檢視畫面中配置各種表單元素。

main {
  max-width: 600px;
}

form {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
  margin-block-end: 1rem;
}

label {
  text-align: end;
  grid-column: 1 / 2;
}

input,
select {
  grid-column: 2 / 3;
}

每個網頁都具有獨立的世界。系統會直接使用元素名稱設定樣式。

螢幕 Wake Lock

運動期間，螢幕不應關閉。 在支援這項功能的瀏覽器中，HIIT 時間會透過螢幕 Wake Lock 達成這個目的。 以下程式碼片段說明如何完成這項操作。

if ('wakeLock' in navigator) {
  const requestWakeLock = async () => {
    try {
      page.shared.wakeLock = await navigator.wakeLock.request('screen');
      page.shared.wakeLock.addEventListener('release', () => {
        // Nothing.
      });
    } catch (err) {
      console.error(`${err.name}, ${err.message}`);
    }
  };
  // Request a screen wake lock…
  await requestWakeLock();
  // …and re-request it when the page becomes visible.
  document.addEventListener('visibilitychange', async () => {
    if (
      page.shared.wakeLock !== null &&
      document.visibilityState === 'visible'
    ) {
      await requestWakeLock();
    }
  });
}

測試應用程式

您可以在 GitHub 取得 HIIT 時間應用程式。您可以在新視窗中使用示範功能，或直接在下方 iframe 嵌入內容 (模擬行動裝置) 中播放。

成功： 最後一章會透過結論結束這個小型應用程式。

特別銘謝

本文由 Joe Medley、Kayce Basques、Milica Mihajlija、Alan Kent 和 Keith Gu 審查。