當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

Blazor带我重玩前端(一)

發(fā)布時(shí)間：2023/12/4 HTML 44 豆豆

生活随笔收集整理的這篇文章主要介紹了 Blazor带我重玩前端(一) 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

寫在前面

曾經(jīng)我和前端朋友聊天的時(shí)候，我說(shuō)我希望有一天可以用C#寫前端，不過(guò)當(dāng)時(shí)更多的是美好的想象，這一切正變得真實(shí)……

什么是Blazor

我們知道瀏覽器可以正確解釋并執(zhí)行JavaScript代碼，那么瀏覽器是如何執(zhí)行C#代碼的呢？答案是通過(guò)WebAssembly。通過(guò)WebAssembly，我們可以讓瀏覽器運(yùn)行很多的高級(jí)語(yǔ)言，如 C#、C、C++、GO等，并使他們運(yùn)行在基于內(nèi)存安全的沙箱環(huán)境中。如下圖所示：

作為一個(gè)已經(jīng)五六年沒(méi)有寫過(guò)前端的.NET程序員，遇到Blazor實(shí)在是幸運(yùn)中的幸運(yùn)。它又讓我可以很愉快的寫前端了，而且還是用C#去寫，我也就不用再分出精力去學(xué)習(xí)其他的JS框架了。

通過(guò)使用Blazor，我們可以使用C#語(yǔ)言來(lái)取代JS去開發(fā)交互式Web UI。值得一提的是，Blazor是由Browser和Razor這兩個(gè)單詞合并而成的，意思就是Blazor可以基于客戶端執(zhí)行Razor視圖后將HTML呈現(xiàn)給瀏覽器。所以想要更好的理解Blazor，就要首先更好的了解瀏覽器和Razor。

Blazor有以下幾個(gè)優(yōu)點(diǎn)：

使用C＃來(lái)取代JavaScript創(chuàng)建豐富的交互式UI
基于.NET及其生態(tài)編寫服務(wù)器端和客戶端應(yīng)用程序邏輯
糅合現(xiàn)有HTML和CSS技術(shù)，提供了廣泛的瀏覽器支持，包括移動(dòng)瀏覽器其(注意：Blazor取代的是基于JavaScript的UI交互，而其他部分如HTML、CSS，這些是我們的技術(shù)基礎(chǔ))
與現(xiàn)代托管平臺(tái)（例如Docker）集成。
Blazor是開源的，其源碼位置在GitHub上

另外需要注意的，Blazor和Silverlight不可混為一談，Blazor是基于開放標(biāo)準(zhǔn)而構(gòu)建的，本身不需要任何額外插件。而Silverlight帶有太多自有特性，所以不得不在瀏覽器上安裝插件以更好的支持其運(yùn)行。

什么是WebAssembly

概覽

WebAssembly是一種二進(jìn)制格式的指令集，其設(shè)計(jì)目標(biāo)是能夠在解釋或者將其編譯為本地機(jī)器代碼并執(zhí)行他們的機(jī)器上運(yùn)行，這類似于我們.NET編譯后的IL。

WebAssembly可以作為編譯高級(jí)編程語(yǔ)言的可移植目標(biāo)，通過(guò)節(jié)省大小和加載時(shí)間，充分利用各種平臺(tái)（移動(dòng)平臺(tái)和IOT平臺(tái)）上的通用應(yīng)用功能，使得WebAssembly可以以接近于本機(jī)（接近于本機(jī)的英語(yǔ)單詞是：near-native，在語(yǔ)言學(xué)里意思是精通語(yǔ)言的人，所說(shuō)的話和說(shuō)母語(yǔ)的人沒(méi)有什么區(qū)別）的運(yùn)行速度運(yùn)行。

支持

WebAssembly已經(jīng)獲得了大部分瀏覽器的支持。詳細(xì)內(nèi)容可以移步至Can I Use

手寫一個(gè)例子

接下來(lái)我們看一個(gè)例子，方便起見(jiàn)，我們直接使用在線的WebAssembly編譯工具，地址是：https://mbebenita.github.io/WasmExplorer/。目前，這個(gè)工具只支持C和C++。不過(guò)也沒(méi)有什么關(guān)系，我們寫一個(gè)簡(jiǎn)單的方法用于測(cè)試即可。

首先我們定義了一個(gè)計(jì)算兩個(gè)數(shù)和的方法:

int?Addition(int?a,?int?b) {return?a?+?b;? }

然后點(diǎn)擊COMPILE

在中間的框里會(huì)生成WAT（即WebAssembly文本格式）的代碼，最右邊的是二進(jìn)制了。中間的代碼部分可以幫助我們查看在編譯的過(guò)程中發(fā)生了什么，會(huì)看到生成了一個(gè)名為_Z8Additionii的function，其中8表示這個(gè)方法名的長(zhǎng)度，后面的i表示有多個(gè)參數(shù)，接下來(lái)我們會(huì)去調(diào)用它。

(module(table?0?anyfunc)(memory?$0?1)(export?"memory"?(memory?$0))(export?"_Z8Additionii"?(func?$_Z8Additionii))(func?$_Z8Additionii?(;?0?;)?(param?$0?i32)?(param?$1?i32)?(result?i32)(i32.add(get_local?$1)(get_local?$0))) )

然后點(diǎn)擊Download，下載.WAT文件

接下來(lái)我們?cè)賹懸粋€(gè)HTML網(wǎng)頁(yè)出來(lái)，就用那種最簡(jiǎn)單的HTML代碼，代碼如下：

<HTML> <HEAD><TITLE>WebAssembly?Sample:?Call?C++?Code</TITLE><script?type="text/javascript">let?addition?=?fetch('test.wasm').then(response?=>?response.arrayBuffer()).then(buffer?=>?WebAssembly.compile(buffer)).then(module?=>?{?return?new?WebAssembly.Instance(module)?}).then(instance?=>?{?addition?=?instance.exports._Z8Additionii?});?</script> </HEAD> <BODY?BGCOLOR="FFFFFF"><h1>WebAssembly?Sample:?Call?C++?Code</h1> </BODY> </HTML>

最終的效果圖

通過(guò)以上示例，我們基本上對(duì)Blazor和WebAssembly的部分運(yùn)行機(jī)制有了一個(gè)比較清晰的認(rèn)識(shí)了，接下來(lái)，我們繼續(xù)討論有關(guān)Blazor的內(nèi)容。

參考鏈接：

https://webassembly.org/

https://webassembly.github.io/spec/js-api/index.html

https://caniuse.com/#search=wasm