Blazor带我重玩前端(一)
寫(xiě)在前面
曾經(jīng)我和前端朋友聊天的時(shí)候，我說(shuō)我希望有一天可以用C#寫(xiě)前端，不過(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)有寫(xiě)過(guò)前端的.NET程序員，遇到Blazor實(shí)在是幸運(yùn)中的幸運(yùn)。它又讓我可以很愉快的寫(xiě)前端了，而且還是用C#去寫(xiě)，我也就不用再分出精力去學(xué)習(xí)其他的JS框架了。
通過(guò)使用Blazor，我們可以使用C#語(yǔ)言來(lái)取代JS去開(kāi)發(fā)交互式Web UI。值得一提的是，Blazor是由Browser和Razor這兩個(gè)單詞合并而成的，意思就是Blazor可以基于客戶(hù)端執(zhí)行Razor視圖后將HTML呈現(xiàn)給瀏覽器。所以想要更好的理解Blazor，就要首先更好的了解瀏覽器和Razor。
Blazor有以下幾個(gè)優(yōu)點(diǎn)：
使用C＃來(lái)取代JavaScript創(chuàng)建豐富的交互式UI
基于.NET及其生態(tài)編寫(xiě)服務(wù)器端和客戶(hù)端應(yīng)用程序邏輯
糅合現(xiàn)有HTML和CSS技術(shù)，提供了廣泛的瀏覽器支持，包括移動(dòng)瀏覽器其(注意：Blazor取代的是基于JavaScript的UI交互，而其他部分如HTML、CSS，這些是我們的技術(shù)基礎(chǔ))
與現(xiàn)代托管平臺(tái)（例如Docker）集成。
Blazor是開(kāi)源的，其源碼位置在GitHub上
另外需要注意的，Blazor和Silverlight不可混為一談，Blazor是基于開(kāi)放標(biāo)準(zhǔn)而構(gòu)建的，本身不需要任何額外插件。而Silverlight帶有太多自有特性，所以不得不在瀏覽器上安裝插件以更好的支持其運(yùn)行。
?什么是WebAssembly
概覽
WebAssembly是一種二進(jìn)制格式的指令集，其設(shè)計(jì)目標(biāo)是能夠在解釋或者將其編譯為本地機(jī)器代碼并執(zhí)行他們的機(jī)器上運(yùn)行，這類(lèi)似于我們.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
手寫(xiě)一個(gè)例子
接下來(lái)我們看一個(gè)例子，方便起見(jiàn)，我們直接使用在線的WebAssembly編譯工具，地址是：https://mbebenita.github.io/WasmExplorer/。目前，這個(gè)工具只支持C和C++。不過(guò)也沒(méi)有什么關(guān)系，我們寫(xiě)一個(gè)簡(jiǎn)單的方法用于測(cè)試即可。
首先我們定義了一個(gè)計(jì)算兩個(gè)數(shù)和的方法:
然后點(diǎn)擊COMPILE
在中間的框里會(huì)生成WAT（即WebAssembly文本格式）的代碼，最右邊的是二進(jìn)制了。中間的代碼部分可以幫助我們查看在編譯的過(guò)程中發(fā)生了什么，會(huì)看到生成了一個(gè)名為_(kāi)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è)賹?xiě)一個(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
https://webassembly.github.io/spec/js-api/index.html
總結(jié)
以上是生活随笔為你收集整理的Blazor带我重玩前端(一)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Redis凭啥这么快？只能做缓存？架构师
- 下一篇： [Mvp.Blazor] 动态路由与钩子