午夜黄色一级片,伊人激情网,亚洲精品第一页

五分鐘了解微軟 Blazor 技術

admin

2023年6月2日 17:46 本文熱度 687

2019年4月中旬微軟推出了 Blazor，當時的我感覺 Blazor 簡直是個劃時代的東西，竟然能讓 C# 運行到瀏覽器中。想著以后可能沒有 C/S 架構什么事兒了，可以卸載掉所有的 App，電腦上有個瀏覽器就夠了。近來終于有了能夠系統了解 Blazor 的時間，下面把我了解到信息寫下來分享給你，希望能對你有所幫助。

Blazor 可以使用強類型語言 C# 來替換 Javascript 實現邏輯，可以前后端復用邏輯，也可以使用 nuget 1 中的包。它的其中一部分是基于 WebAssembly 實現的，所以不依賴任何的插件，讓我們來快速了解一下 Blazor 是如何讓 C# 運行在瀏覽器中的吧。

Blazor 涉及技術

Blazor 2 是 apt.net core 生態的組成部分，所涉及到的技術也大部分和 .net 相關。

視圖層，使用 Razor 3 技術進行前端的編排渲染。Razor是一種標記語法，是 asp.net core 的默認視圖語法，最顯著的特點是強類型（C#、VB等）的代碼可以和 HTML 寫在一個文件中，當然也可以分開。在 razor 文件中，@符號后面的都是強類型語言，可以是一行中的一部分，也可以是一整行，還可以是一個段落。在 asp.net core 中的大致做法是把 VB、C# 等強類型語言嵌入到網頁，當網頁被請求的時候，在服務器端執行嵌入的代碼，動態生成頁面。

以 Blazor WebAssembly 開發方式運行時，依賴 WebAssembly 4 技術，可以做成靜態頁面不依賴任何后端服務器。

以 Blazor Server 方式開發運行時，依賴 SignalR 5 技術，并且需要后端服務器端配合。

Blazor 簡介

Blazor 是一個使用 .NET 生成的交互式客戶端 Web UI 的框架。和前端同學所熟知的 Vue、React、Angular 有巨大差異。

其最大的特色是使用 C# 代碼（理論上可以是 .NET 生態的任何語言）代替 Javascript 來實現邏輯。

有兩種不同開發模式

Blazor WebAssembly， C# 代碼運行在瀏覽器中。
Blazor Server，C# 代碼在服務器端執行，使用 SignalR 同步到瀏覽器進行更新。

Blazor WebAssembly

讓我們先簡單了解一下 WebAssembly （Wasm）4。

WebAssembly 是一種基于堆棧虛擬機的二進制指令格式。
WebAssembly 是一種類匯編語言。
WebAssembly 性能高、可以和Javascript協作。
WebAssembly 是W3C的一部分，現代化的瀏覽器都已經支持。

那么現在讓我們來思考一個問題，如何讓 C# 代碼，在瀏覽器中運行？

首先簡單回憶一下 C# 代碼是如何運行起來的。如下圖所示，我們首先要把 C# 源碼進行編譯成 dll 文件，然后由 .net runtime 進行加載執行。

那如何讓 C# 在瀏覽器中運行起來呢？看起來只缺少一個在瀏覽器中運行的 .net runtime。所以要用 Javascript 來寫一個 .net runtime 嗎？不要著急，dotnet 社區有更好的方案。

在 dotnet/runtime 6 源碼的 Directory.Build.props 7 文件中，我們可以看到，是有以 wasm 為編譯目標的，也就是基于 WebAssembly 實現的 .net runtime 。現在我們已經知道 C# 代碼可以運行在瀏覽器中了， Blazor 的生存土壤也就有了。（當然，事實情況是 mono 社區最先實現 WebAssembly 版本的 .net runtime。后來才合并到 dotnet core runtime 中）

接下來看一下如何創建 Blazor 工程。有兩種方式，1、使用命令行，2、使用IDE，如 Visual Studio 。

命令行工具，僅供不想安裝 Visual Studio 這類巨型工具，還想嘗鮮的同學使用。可搭配任何編輯器，比如 Visual Studio Code。以下是具體步驟：

首先，需要下載 dotnet core 8。這里順便給出 dotnet core 刪除工具 dotnet-core-uninstall 9 。
使用命令 donet new -l 可以看到所有支持的模板。
在空白目錄中使用命令 dotnet new blazorwasm 來創建 Blazor WebAssembly 的模板工程。
執行命令 dotnet run 啟動網站，可以在瀏覽器中訪問了。
使用 Visual Studio 創建就更為簡單，選擇對應的模板即可。

終于到了能上代碼的時間了！

先來看兩個關鍵文件，C# 的入口文件 Program.cs 和 HTML 的入口文件 index.html 。

// Program.cs 文件
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.DependencyInjection;
using System;using System.Net.Http;
using System.Threading.Tasks;
namespace BlazorWebAssembly{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.createDefault(args);
            builder.RootComponents.Add<App>("#app");
            // 上一行我們可以理解為，在 ID 是 app 的元素中渲染展示 Blazor WebAssembly，所以讓網頁的某一部分使用 Blazor 技術渲染也是可行的。
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); 
            await builder.Build().RunAsync();
        }
    }
}

<!-- index.html 文件 -->
<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>BlazorWebAssembly</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="BlazorWebAssembly.styles.css" rel="stylesheet" />
 </head>
 <body>
    <div id="app">Loading...</div>
    <div id="blazor-error-ui">
        An unhandled error has occurred.        
        <a href="" class="reload">Reload</a>
        <a class="dismiss">X</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
    <!-- 
    blazor.webassembly.js 文件的作用有兩個。
    1、下載 .net runtime, 依賴的類庫以及項目編譯后的文件。
    2、從 blazor.boot.json 中找到 C# 程序入口，并初始化運行。
    -->
 </body>
</html>

在編譯之后的文件中，我們可以看到一些后綴名是 br 的文件，是因為 Blazor 默認使用了壓縮率更高的 brotli 10 進行壓縮，我覺得在這里應該推薦一下，brotli 比 gzip 更能節省空間。

Blazor WebAssembly 方式開發的簡單架構，如上圖所示，.net 代碼的執行和 DOM 元素的渲染重繪都是在瀏覽器中進行的。

缺點：首次打開網站時需要加載大量依賴文件（ .net runtime 以及依賴的各種類庫）；需要瀏覽器支持 WebAssembly 。在 caniuse 中可以查看到各瀏覽器對 WebAssembly 的支持情況 11 。

C# 和 Javascript 的交互操作

有兩種不同的交互方式，1、從 C# 調用 Javascript 的代碼 12，2、從 Javascript 調用 C# 的代碼 13。

首先，從 C# 調用 Javascript 的代碼

先寫一個 Javascript 的全局函數，準備給 C# 使用。

function buildObjctString(name, age) 
{
    const obj = { name, age }
    return JSON.stringify(obj)
}

在 C# 中就可以這么調用

@inject IJSRuntime JS 
private async Task CSharpCallJS()
{
    var methodName = "buildObjctString";
    var name = "zpfe group";
    var age = 18;
    var data = await JS.InvokeAsync<string>(methodName, name, age);
}

然后，從 Javascript 調用 C# 的代碼

// 這里的 C# 代碼也是拿全局函數來示例，在函數頭上加了注解。[JSInvokable]
public static Task<string> GetTime(string param)
{
    return Task.fromResult($"{param}，后面的來自C# {DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")}");
}

在 Javascript 中的調用方式是

// 如果 C# 函數有參數，不傳遞會報錯
const result = await DotNet.invokeMethodAsync("BlazorWebAssembly", "GetTime", "這個是 js 傳入的參數");
alert(result)

這里只是最簡單的例子，更詳盡的還請從參考鏈接 1213中查看。

調試

使用 Visual Studio 調試將會很容易，和普通的 C# 調試方式一樣，只在需要調試的代碼最前面用鼠標點出調試的斷點，按下 F5 就可以調試了。Javascript 代碼也可以使用相同的方式進行調試。

Blazor Server

個人認為 Blazor Server 是為了彌補 Blazor WebAssembly 的不足而創造出來的。Blazor Server 開發方式將會強依賴 SignalR 5 。這里先簡單介紹一下 SignalR ，它也源自 ASPNET Core 社區，是基于 RPC 協議的一種實現。簡單來說，就是可以在瀏覽器中使用 Javascript 代碼通過 SignalR 來調用服務器上開發的函數，也可以在服務器上使用 SignalR 來調用瀏覽器中的 Javascript 函數。這種方式能夠避免網站首次打開時需要加載大量依賴文件的問題，也能夠彌補瀏覽器對WebAssembly的支持問題，甚至能夠在 IE 中運行。但是這種方式開發的網站 UI 更新、事件處理等都需要通過 SignalR 調用服務器進行處理，需要和服務器頻繁交互數據，對服務器算力要求頗高。以我的理解這種方式只適合用戶量不大的網站。

使用命令創建的方式是 dotnet new blazorserver 。

使用 Visual Studio 創建就不講了。