共用方式為

常見的用戶端 Web 技術

小提示

此內容摘自電子書《使用 ASP.NET Core 和 Azure 架構現代化 Web 應用程式》，可在 .NET Docs 上取得，或下載免費 PDF 以便離線閱讀。

下載 PDF

ASP.NET Core 與 Azure 架構現代 Web 應用程式的電子書封面縮圖。

“網站應該從內外看起來不錯。 - 保羅·庫克森

ASP.NET Core 應用程式是 Web 應用程式，通常依賴 HTML、CSS 和 JavaScript 等用戶端 Web 技術。 藉由將頁面的內容與版面配置和樣式（CSS）和其行為（透過 JavaScript）區隔，複雜的 Web 應用程式可以利用考慮分離原則。 當這些考慮不交織時，可以更輕鬆地變更應用程序的結構、設計或行為。

雖然 HTML 和 CSS 相對穩定，但 JavaScript 隨著開發者使用的應用框架和工具正以驚人的速度進化。 本章探討 Web 開發人員使用 JavaScript 的幾種方式，並提供 Angular 和 React 用戶端連結庫的高階概觀。

備註

Blazor 提供 JavaScript 架構的替代方案，可用來建置豐富的互動式用戶端用戶介面。

HTML

HTML 是用來建立網頁和 Web 應用程式的標準標記語言。 其元素會形成頁面的建置組塊，代表格式化的文字、影像、表單輸入和其他結構。 當瀏覽器向 URL 提出要求時，無論是擷取頁面還是應用程式，傳回的第一件事就是 HTML 檔。 此 HTML 檔可能會以 CSS 形式參考或包含其外觀和版面配置的其他資訊，或 JavaScript 格式的行為。

CSS

CSS （級聯樣式表） 可用來控制 HTML 元素的外觀和版面配置。 CSS 樣式可以直接套用至 HTML 元素、分別在相同頁面上定義，或定義於個別檔案中，並由頁面參考。 樣式會根據它們如何用來選擇特定的 HTML 元素而層疊。 例如，樣式可能會套用至整個文件，但會被套用至特定元素的樣式取代。 同樣地，套用至元素之 CSS 類別的樣式會覆寫元素特定樣式，而該樣式則會被針對該元素特定實例的樣式（透過其 ID）所覆寫。 圖 6-1

CSS 特定性規則

圖 6-1。 CSS 特定性規則，依序排列。

最好將樣式保留在自己的個別樣式表單檔案中，並使用以選取為基礎的串聯在應用程式中實作一致且可重複使用的樣式。 應避免在 HTML 中放置樣式規則，並將樣式套用至特定個別元素（而不是整個元素類別，或已套用特定 CSS 類別的專案）應該是例外狀況，而不是規則。

CSS 預處理器

CSS 樣式表單不支援條件式邏輯、變數和其他程式設計語言功能。 因此，大型樣式表單通常包含相當多的重複，因為相同的色彩、字型或其他設定會套用至許多不同 HTML 元素和 CSS 類別的變化。 CSS 預處理器可藉由新增變數和邏輯的支持，協助您的樣式表單遵循 DRY 準則 。

最受歡迎的 CSS 預處理器是 Sass 和 LESS。 兩者皆擴充 CSS 並且與其保持向後相容，這表示一般的 CSS 檔案是有效的 Sass 或 LESS 檔案。 Sass 是以 Ruby 為基礎，而 LESS 是以 JavaScript 為基礎，而且通常會在本機開發程式中執行。 兩者都提供命令行工具，並且 Visual Studio 中具有內建支援，可以通過 Gulp 或 Grunt 任務來執行命令。

JavaScript

JavaScript 是一種動態解譯的程式設計語言，已在 ECMAScript 語言規格中標準化。 它是 Web 的程式設計語言。 如同 CSS，JavaScript 可以定義為 HTML 元素內的屬性、頁面內的腳本區塊，或在不同的檔案中。 就像 CSS 一樣，建議您將 JavaScript 組織成個別的檔案，盡可能將其與個別網頁或應用程式檢視上找到的 HTML 分開。

在 Web 應用程式中使用 JavaScript 時，您通常需要執行一些工作：

  • 選擇 HTML 元素並取得和/或更新其值。

  • 查詢 Web API 以取得數據。

  • 將命令傳送至 Web API（並使用其結果回應回呼）。

  • 執行驗證。

您可以單獨使用 JavaScript 執行所有這些工作，但有許多連結庫可供更輕鬆地執行這些工作。 其中一個最早且最成功的函式庫是 jQuery，這持續是簡化網頁上這些工作的受歡迎選擇。 對於單頁應用程式 （SPA），jQuery 不提供 Angular 和 React 提供的許多所需功能。

使用 jQuery 的舊版 Web 應用程式

雖然 JavaScript 架構標準很古，但 jQuery 仍然是一個常用的連結庫，可用來處理 HTML/CSS，以及建置對 Web API 進行 AJAX 呼叫的應用程式。 不過，jQuery 會在瀏覽器檔物件模型 （DOM） 層級運作，而且預設只會提供命令式模型，而不是宣告式模型。

假如文本框的值超過10，頁面上的元素應被設為可見。 在 jQuery 中，這項功能通常是藉由撰寫事件處理程式與程式代碼來實作，該程式代碼會檢查文本框的值，並根據該值設定目標元素的可見性。 此過程是命令式、程式代碼型的方法。 另一個架構可能會改用資料綁定，將元素的可見性宣告式地綁定至文本框的值。 此方法不需要撰寫任何程式碼，而只需要裝飾附有資料繫結屬性的元素。 隨著客戶端行為變得更複雜，數據系結方法通常會產生較簡單的解決方案，且程式代碼和條件式複雜度較低。

jQuery 與 SPA 架構

因素 jQuery 角
抽象化 DOM 是的 是的
AJAX 支援 是的 是的
宣告式數據系結 否 是的
MVC 樣式路由 否 是的
範本化 否 是的
Deep-Link 路由 否 是的

大部分 jQuery 本身欠缺的功能，可以透過添加其他程式庫來補足。 不過，Angular 之類的 SPA 架構會以更整合的方式提供這些功能，因為從一開始就設計了所有這些功能。 此外，jQuery 是命令式連結庫，這表示您需要呼叫 jQuery 函式，才能使用 jQuery 執行任何動作。 SPA 架構所提供的大部分工作和功能都可以以宣告方式完成，而不需要撰寫實際的程序代碼。

數據系結是這項功能的絕佳範例。 在 jQuery 中，通常只需要一行程式代碼，即可取得 DOM 元素的值或設定元素的值。 不過，您隨時都必須撰寫此程序代碼，才能變更元素的值，有時這會發生在頁面上的多個函式中。 另一個常見的範例是元素可見性。 在 jQuery 中，您可能會有許多不同的位置可以撰寫程式代碼來控制特定元素是否可見。 在上述每個情況下，使用數據系結時，不需要撰寫任何程序代碼。 您只需將正被討論的元素的值或可見性綁定到頁面上的 ViewModel，該 ViewModel 的變更就會自動反映在綁定的元素中。

Angular SPA

Angular 仍然是世界上最受歡迎的 JavaScript 架構之一。 自 Angular 2 以來，小組會從頭開始重建架構（使用 TypeScript），並將原始 AngularJS 名稱重新命名為 Angular。 重新設計的 Angular 已經有好幾年歷史，但依然是建構單頁應用程式的強大框架。

Angular 應用程式是從元件建置而來。 元件會將 HTML 範本與特殊物件結合，並控制頁面的一部分。 Angular 檔中的簡單元件如下所示：

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<h1>Hello {{name}}</h1>`
})

export class AppComponent { name = 'Angular'; }

元件是使用 @Component 裝飾函式來定義，此函式會採用有關元件的元數據。 選取器屬性會識別要顯示此元件之頁面上項目的標識碼。 範本屬性是一個簡單的 HTML 範本，包含與元件名稱屬性相符的佔位符，該屬性定義在最後一行。

透過使用元件和範本，而不是 DOM 元素，Angular 應用程式可以在更高的抽象層級運作，而且整體程式代碼比只使用 JavaScript 撰寫的應用程式（也稱為“vanilla JS”）或 jQuery 撰寫的應用程式少。 Angular 也會對組織用戶端腳本檔案的方式施加一些順序。 根據慣例，Angular 應用程式會使用通用資料夾結構，以及位於應用程式資料夾中的模組和元件腳本檔案。 與建置、部署及測試應用程式相關的 Angular 腳本通常位於較高層級的資料夾。

您可以使用 CLI 來開發 Angular 應用程式。 在本機環境開始 Angular 開發（假設您已安裝 git 和 npm），包括從 GitHub 複製（或克隆）一個儲存庫，然後執行指令 npm install 和 npm start。 除此之外，Angular 會隨附自己的 CLI，其可建立專案、新增檔案，以及協助測試、組合和部署工作。 此 CLI 友好性讓 Angular 與 ASP.NET Core 特別相容，其也提供絕佳的 CLI 支援。

Microsoft已開發參考應用程式 eShopOnContainers，其中包含 Angular SPA 實作。 此應用程式包含 Angular 模組，可管理在線商店的購物籃、從其目錄載入和顯示項目，以及處理訂單建立。 您可以從 GitHub 檢視和下載範例應用程式。

反應

不同於 Angular，它提供完整的模型View-Controller 模式實作，React 只會關注檢視。 它不是架構，只是連結庫，因此若要建置 SPA，您必須利用其他連結庫。 有一些連結庫的設計目的是要與 React 搭配使用，以產生豐富的單一頁面應用程式。

React最重要的功能之一是使用虛擬 DOM。 虛擬 DOM 提供 React 有幾個優點，包括效能（虛擬 DOM 可以優化實際 DOM 需要更新的部分）和可測試性（不需要瀏覽器來測試 React 與其虛擬 DOM 的互動）。

React 在與 HTML 結合運作的方式上也很特別。 React 不像在程式代碼和標記之間嚴格分隔（JavaScript 可能會出現在 HTML 屬性中），而是直接在其 JavaScript 程式碼中加入 HTML 作為 JSX。 JSX 是類似 HTML 的語法，可編譯為純 JavaScript。 例如：

<ul>
{ authors.map(author =>
    <li key={author.id}>{author.name}</li>
)}
</ul>

如果您已經知道 JavaScript，學習 React 應該很容易。 相比 Angular 或其他熱門框架，相關的學習曲線或特殊語法要少得多。

因為 React 不是完整的架構，因此您通常會想要其他連結庫處理路由、Web API 呼叫和相依性管理等事項。 好處是，您可以為每個連結庫挑選最佳的連結庫，但缺點是，您需要做出所有這些決策，並在完成時確認所有所選的連結庫都能正常運作。 如果您想要一個好的起點，可以使用像 React Slingshot 這樣的入門套件，預先封裝一組相容的函式庫與 React。

Vue

從用戶入門指南中，「Vue 是建置使用者介面的漸進式架構。 與其他整合型架構不同，Vue 從頭開始設計成可累加採用。 核心程式庫僅專注於視圖層，而且容易上手並能與其他程式庫或現有專案整合。 另一方面，當搭配新式工具和支援函式庫使用時，Vue 完全能夠驅動複雜的 Single-Page 應用程式。

開始使用 Vue 只需要在 HTML 檔案中包含其文稿：

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

新增架構之後，您就可以使用 Vue 的直接範本化語法，以宣告方式將數據轉譯至 DOM：

<div id="app">
  {{ message }}
</div>

然後新增下列文稿：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

這足以在頁面上呈現 "Hello Vue!" 。 不過請注意，Vue 不只是將訊息轉譯為 div 一次。 它支援數據綁定和動態更新，因此，如果 message 的值變更，<div> 中的值會立即更新以反映該變更。

當然，這僅僅是 Vue 能力的表面。 在過去的幾年裡，它得到了很大的受歡迎程度，並擁有一個龐大的社區。 還有一份龐大且不斷擴展的支援元件和函式庫清單，它們可與 Vue 搭配使用以擴展其功能。 如果您想要將客戶端行為新增至 Web 應用程式，或考慮建置完整的 SPA，Vue 值得調查。

Blazor WebAssembly

與其他 JavaScript 架構不同，是單頁應用程式 （SPA） 架構， Blazor WebAssembly 用於使用 .NET 建置互動式用戶端 Web 應用程式。 Blazor WebAssembly 使用開放式 Web 標準，而不需要外掛程式或將程式代碼重新編譯成其他語言。 Blazor WebAssembly 適用於所有新式網頁瀏覽器，包括行動瀏覽器。

WebAssembly 可以在網頁瀏覽器中執行 .NET 程式代碼（縮寫 wasm）。 WebAssembly 是一種精簡的位元組程式碼格式，針對快速下載和最快執行速度而最佳化。 WebAssembly 是開放式的 Web 標準，且在網頁瀏覽器中不受外掛程式支援。

WebAssembly 程式代碼可以透過 JavaScript 存取瀏覽器的完整功能，稱為 JavaScript 互作性，通常縮短為 JavaScript Interop 或 JS Interop。 在瀏覽器中透過 WebAssembly 執行的 .NET 程式碼會在瀏覽器的 JavaScript 沙箱執行，且受沙箱所提供對用戶端電腦之惡意動作的保護。

如需詳細資訊，請參閱 ASP.NET Core Blazor簡介。

選擇 SPA 架構

考慮哪一個選項最適合支援 SPA 時，請記住下列考慮：

  • 您的小組是否熟悉架構及其相依性（在某些情況下包括 TypeScript？

  • 框架的主觀性有多高，您是否同意其預設的運作方式？

  • 它 （或隨附連結庫） 是否包含應用程式所需的所有功能？

  • 記錄得很好嗎？

  • 其社群有多活躍？ 正在用它建置新專案嗎？

  • 其核心小組有多活躍？ 問題是否已解決，且新版本會定期出貨？

架構以飛快的速度持續演變。 使用上述考量來協助降低選擇框架的風險，避免您日後因過度依賴該框架而感到後悔。 如果您特別害怕風險，請考慮採用提供商業支援和/或由大型企業開發的架構。

參考 – 用戶端 Web 技術

上一頁下一步