本頁面由 Cloud Translation API 翻譯而成。

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

Thomas Steiner

應用程式網域

展示精簡的應用程式程式設計方式我在某個網路應用程式中應用，我需要一個小但卻足夠完整想法。高強度間歇訓練 (HIIT) 是心血管運動策略，可交替進行短時間的高強度有氧運動，且恢復期較少。許多高強度間歇訓練會使用高強度間歇訓練 (HIIT) 計時器，這堂 30 分鐘的線上課程來自 The Body Coach TV 的 YouTube 頻道。

HIIT 時間範例應用程式

針對這章，我建立了一個 HIIT 計時器應用程式的基本範例「HIIT 時間」可讓使用者定義及管理各種計時器一律由高強度和低強度的間隔組成然後選取其中一部進行訓練課程這是回應式應用程式，內含導覽列、分頁標籤列和三個頁面：

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

以下螢幕截圖展示了應用程式。

HIIT 時間範例應用程式為直向模式。 — HIIT 時間「鍛煉」分頁進入直向模式。

HIIT 時間範例應用程式為橫向模式。 — HIIT 時間「鍛煉」分頁，以橫向模式顯示。

應用程式結構

如上所述，應用程式是由導覽列、分頁標籤列和三個頁面 (以格狀排列) 組成。導覽列和 Tabbar 變成 iframe，彼此之間有 <div> 容器，以及另外三個 iframe 每個頁面都會顯示，而且取決於標籤列中的當前選項。最終指向 about:blank 的 iframe 會針對動態建立的應用程式內頁面放送，這是修改現有頁面的必要項目或建立新計時器我稱之為「多頁應用程式」(MPSPA)，

Chrome 開發人員工具的 Chrome 開發人員工具檢視畫面，顯示應用程式包含六個 iframe：一個用於導覽列、一個分頁列，以及三個分組的 iframe，並針對動態頁面加上最終預留位置 iframe。 — 這個應用程式由六個 iframe 組成。

元件式 lit-html 標記

每個網頁的結構都可視為 lit-html Scaffold 模型會在執行階段動態評估若是 lit-html 的背景，它是高效率、表達力且可延伸的 JavaScript 範本程式庫，適用於 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 到 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;
}

敬上

HIIT 時間應用程式偏好設定頁面，以格狀版面配置顯示表單。 — 每一頁都是獨一無二的。樣式會直接套用元素名稱。

螢幕 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