一.嘮嘮WebAssembly的發展歷程

　　目前有很多支援WebAssembly的專案，但發展最快的是Blazor，這是一個構建單頁面的.NET技術，目前已經從Preview版本升級到了beta版本，微軟計劃在2020年5月釋出Blazor的第一個版本。

　　Blazor是什麼？它是一項將C＃和.NET都放入瀏覽器的Microsoft技術。它使用WebAssembly來工作，WebAssembly是一種高效能的管道，可以將程式碼預編譯為緊湊的二進位制格式。最重要的是，每個主流瀏覽器（包括移動版本）都支援WebAssembly。

　　十年前，JavaScript統治世界還不是很明顯。Flash和Silverlight也正在執行。這二個都需要使用瀏覽器外掛來完成工作，並且都以不同的使用者介面方法替換了HTML。這種方法使他們在功能方面遙遙領先於JavaScript，但隨著移動網際網路的出現，他們就慢慢過時。

　　但隨後從最初的Javascript再到微軟的JScript和CEnvi的ScriptEase三足鼎立，再到最後的統一標準，當時微軟憑藉Windows系統捆綁Internet Explorer的先天優勢擊潰Netscape後，兩大巨頭就此進入了長達數年的靜默期，JavaScript就是在這樣的情況下被構想出來的，當時的瀏覽器之王，Netscape Navigator創始人Marc Andreessen認為Netscape需要一種“glue language”來支援HTML，讓Web設計師和兼職程式設計師可以很容易地使用它來組裝諸如影象和外掛之類的元件，且程式碼是可以直接寫在網頁標記中。除此之外微軟的步步緊逼也迫使Andreessen不得不聘請Brendan Eich，及早將Scheme程式語言嵌入到Netscape Navigator中。1995年，JavaScript以Mocha為名開發，並於9月在Netscape Navigator 2.0的測試版中首次釋出，當時被稱為LiveScript，12月，在Netscape Navigator 2.0 beta 3中部署時被重新命名為JavaScript 。雖然Netscape Navigator在Chrome、Internet Explorer和Firefox等多款瀏覽器的圍追堵截中最終落敗，但是JavaScript卻推動了網頁的發展，並一直被沿用至今。

　　這是一個諷刺。在JavaScript征服世界的同時，播下了一顆很小的種子，這可能會在將來的某個時候暗示JavaScript的終結。那顆種子是名為asm.js的實驗技術。

　　這是Mozilla的開發人員在2013年完成的一個古怪的實驗。他們正在尋找在瀏覽器中執行高效能程式碼的方法。但是與外掛不同，asm.js並未嘗試在瀏覽器旁邊執行。相反，它的目的是直接通過Javascript的虛擬化。

　　從本質上講，asm.js是簡潔，優化的JavaScript語法。它比普通的JavaScript執行得更快，因為它避免了該語言的慢動態部分。但是認識到它的網路瀏覽器也可以應用其他優化，從而大大提高效能。換句話說，asm.js遵循黃金法則- 不要破壞網路

　　有人問為什麼asm.js好在哪裡，簡單而言，它的效能比JavaScript高几百倍，當然是在沒有谷歌的V8引擎之下，因為JavaScript是若型別語言，它需要猜測你的資料型別來進行編譯，這樣的情況下，在我看來它肯定需要遍歷完一個方法，然後再進行運算，與其這樣我為什麼不打個標識呢？當然在不破壞JavaScript的情況下，arm.js選擇了一個騷氣的想法，如果你想你的資料型別是int，那麼宣告一個值就變成了變數名|0，就這樣它的目的就達到了。

　　儘管asm.js實驗產生了一些令人眼花撩亂的演示，但工作的開發人員基本上忽略了它。對他們來說，這只是超越現代的一個有趣方面。但這隨著WebAssembly的建立而改變。

　　WebAssembly既是asm.js的後繼產品，又是一項截然不同的技術。這是一種緊湊的二進位制程式碼格式。像asm.js一樣，WebAssembly程式碼也被輸入到JavaScript執行環境中。它具有相同的沙箱和相同的執行時環境。與asm.js一樣，WebAssembly的編譯方式也可以提高效率。但是現在，這些效率比有以前更加明顯，並且瀏覽器可以完全跳過JavaScript解析階段。對於普通的邏輯，WebAssembly遠比常規JavaScript快，幾乎與本機編譯的程式碼一樣快。

 　　WebAssembly於2015年首次出現。如今，桌面和移動裝置上的四大瀏覽器（Chrome，Edge，Safari和Firefox）已完全支援它。儘管可以通過將WebAssembly程式碼轉換為asm.js來實現向後相容，但Internet Explorer不支援它。就讓IE涼透吧！但需要注意的是WebAssembly無法迴避JavaScript，因為它已鎖定在JavaScript執行時環境中。實際上，WebAssembly需要與至少一些普通的JavaScript程式碼一起執行，因為它不能直接訪問頁面。這意味著如果不通過JavaScript層，就無法操縱DOM或接收事件。

 　　聽我說起來，這是一個限制，但聰明的微軟開發者已經找到了走私的方法，在瀏覽器中下載一個微型.NET執行時，作為已編譯的WASM檔案。此執行時處理JavaScript互操作，並提供基本服務，它能給我們提供GC或者其它用法。Blazor不是唯一一個由WebAssembly支援的實驗。考慮一下Pyodide，它旨在將Python放入瀏覽器中，並帶有用於資料分析的高階數學工具包。據我所知這應該使用emscripten的編譯器。

 　　人們常說，何時Javascript能夠替代伺服器端語言，又有人說什麼時候可以代替桌面級應用程式，所以WebAssembly並不是用來代替JavaScript的。而是為了解決現代問題，如果它做到了，那就真的做到了！所以作為一個程式設計師，你應該對WebAssembly引起足夠的重視，未來快速載入Web應用程式的需求肯定會增加。

 　　就現在我們的.NET Core提供了兩種Blazor模板，包括Blazor Server 以及 Blazor WebAssembly。

• Blazor Server使用熟悉的.NET環境在Web伺服器上執行程式碼。訣竅是瀏覽器和伺服器之間的通訊方式。當用戶與頁面進行互動時，JavaScript程式碼將回調到發生實際頁面生命週期的伺服器。（要建立此連線，該頁面使用名為SignalR的Microsoft API ）執行伺服器端程式碼後，Blazor Server呈現該頁面並將更改傳送回Web頁面，該Web頁面將相應地進行更新。
• Blazor WebAssembly使用由WebAssembly提供支援的微型.NET執行時在瀏覽器中執行程式碼。您的客戶端程式碼可以訪問許多熟悉的.NET庫，並且您使用C＃語言編寫它，您仍然可以像在JavaScript頁面中一樣在Web伺服器上呼叫API。
  

　　Blazor Server是一種具有一些有趣用例的技術，但是由於不斷的通訊，您顯然會犧牲一些效能-甚至不用問離線功能。Blazor WebAssembly是受到最多宣傳的一種，也是我們在本文中探討的一種。

　　關於Blazor，程式設計師最常見的誤解是將其C＃程式碼編譯為WebAssembly，然後傳送到瀏覽器，然後執行。這種方法並非不可能-Blazor的建立者暗示他們將來可能會嘗試這種技術。但是如今Blazor的工作方式並不是如此。

　　換句話說，如今的Blazor是當您訪問使用Blazor的網頁時，該頁面將從下載按比例縮小的.NET執行時開始。然後它將下載您的應用程式以及您的應用程式使用的任何其他.NET庫，所有這些都在其本機IL中。最後，Blazor執行時執行IL。

二.配置您的開發環境

 　　由於Blazor是一個預釋出的早期Beta產品。基礎結構的關鍵部分正在發生變化，您將無法獲得與其他型別的Microsoft專案相同級別的工具支援。我嘗試在Visual Studio 2019中進行編碼，需要注意的是您需要勾選.NET FrameWork 4.8 以及 .NET Core 3.0 + ，這樣您才具有Web Assembly的專案。完成設定後，您可以輕鬆建立Blazor專案。只需啟動Visual Studio，建立一個新專案，然後選擇“ Blazor App”專案即可。Visual Studio會詢問您是否需要Blazor Server應用程式或Blazor WebAssembly應用程式.

 三.Blazor的資料繫結與元件傳值

　　由於關於Blazor的.NET Core 又一殺器! Web Blazor框架橫空出世!一篇我編寫的文章，未能提及更深入的內容，那麼現在我將要介紹一下高階的Blazor用法，到最後還會有一個糖果，園友力作的Blazor UI！多麼激動人心的時刻，那麼趕快開始吧.

3.1 Child Component

　　在Blazor的Child Component中可以使用[Parameter] 關鍵字，來進行傳值的定義，我們可以這麼來做，現在只是提一下這個概念，下面會仔細說下元件之間如何進行跨元件繫結值。

<div>
    <p>標題：@title</p>
</div>
@code{
    [Parameter]
    public string title { get; set; }
}

隨後在呼叫時，Visual Studio IDE 就可以直接向您的視覺進行提示輸入相關屬性。

<Demorazor title="Hello 部落格園的兄弟們！"></Demorazor>

執行效果如下：

3.2 single Bind and Two-way binding

single bind就不用說了，新建專案自帶的模板Counter示例那就是如此。

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

此處 @currentCount 值根據點選按鈕的數量遞增Click me。<p>標記元素中的值會自動重新整理，無需任何元件重新整理。

two-way binding 我們可以自定義我們的事件 一共分為二中繫結方式 包括@bind 和 @Bind-Value，值得一提的是還可以通過使用event引數指定@bind-value屬性, 使用其他事件來繫結屬性或欄位。例如第四個文字框就是繫結changeString採用oninput事件的屬性，以到達在文字框的值更改時激發，經過我的測試如果你的繫結事件是Javascript中不存在的，那麼也無妨，不會報出系統級別的異常，我想如果是從IL轉換到WebAssembly中，就會直接過濾掉，但是Visual Studio 2019 沒有給我們提示，也讓我們編譯通過，即使是當前的最高16.0.4 預覽版也是如此，這個是令我詫異的。

<p>
    <span>在這裡可以使用bind-value 或者 bind 當然這裡確保您不使用其它事件！</span>
    <input @bind-value="changeString" />
    <p>這是我輸入的內容: @changeString</p>
</p>
<p>
    <span>oninput</span>
    <input @bind-value="changeString" @bind-value:event="oninput" />
</p>

@code {
    string changeString = "";
}  

執行效果如下：

 3.3 Component bindings

 　　想要跨元件進行繫結屬性值，可以使用,@bind-{property}可在其中跨元件繫結屬性值，我們試著嘗試，首先我們建立一個子控制元件，這個blazor就叫Baby，有一個身份證Id的屬性和出生地址。

　　 EventCallback的用法非常廣泛，它可以跨元件共享方法和屬性，如不寫下面的兩個屬性，則就會報錯。

@page "/baby"
<h2>Child Compoent</h2>
<p>出生的Baby IdentityCard:@Baby_IdentityCrad_Id</p>
<h3>在{@Baby_new_Address} 生的</h3>
@code {
    [Parameter]
    public string Baby_IdentityCrad_Id{ get; set; }

    /// <summary>
    /// 這個屬性也是牛的雅皮~~~ hhh
    /// </summary>
    [Parameter]
    public string Baby_new_Address{ get; set; }
    
    [Parameter]
    public EventCallback<string> Baby_IdentityCrad_IdChanged { get; set; }

    [Parameter]
    public EventCallback<string> Baby_new_AddressChanged { get; set; }
}

 　　有什麼樣的兒子就會有什麼樣的爸爸？ 現在我們創建出父親，那就直接叫做一個Father.razor吧~

@page "/father"
<h3>Father</h3>

<Baby @bind-Baby_IdentityCrad_Id="@id_Card"
      @bind-Baby_new_Address="@address">
</Baby>
<button class="btn btn-primary" @onclick="@ChangeTheYear">new baby()</button>
@code {
    public string id_Card { get; set; }
    public string address { get; set; }
    private void ChangeTheYear()
    {
        id_Card = Guid.NewGuid().ToString();
        address = "老張";
    }
}

執行效果如下：

 如果要在子元件中定義事件，則可以MouseEventArgs來接受裝置上的事件，然後再進行附加事件。

[Parameter]
public EventCallback<MouseEventArgs> OnClick { get; set; }

四.級聯傳值

 　　在某些情況下, 使用元件引數將資料從祖先元件流式傳輸到附屬元件是不方便的, 尤其是在有多個元件層時。 級聯值和引數通過提供一種方便的方法, 使上級元件為其所有子代元件提供值。 級聯值和引數還提供了一種方法來協調元件。我們試著去構建一個例子，首先建立一個最頂層的元件。

@page "/myDome"
<p><span>姓名：</span><input @bind="@pName" /></p>
<p><span>年齡：</span><input @bind-value="@pAge" @bind-value:event="oninput"/></p>
<CascadingValue Value="@pName" Name="ProfileName">
    <CascadingValue Value="@pAge" Name="ProfileAge">
        <ParentComponent />
    </CascadingValue>
</CascadingValue>
@code {
    private string pName { get; set; } = "張三";
    private int pAge { get; set; } = 35;
}

ParentComponent.razor：

<div style="background-color:darkgray;width:200px;">
    <p>Parent Component</p>
    <div style="padding:10px;">
        <p> 年齡 :@Age</p>
        <ChildComponent />
    </div>
</div>
@code{
    [CascadingParameter(Name = "ProfileAge")]
    int Age { get; set; }
}

ChildComponent.razor：

<div style="background-color:beige;width:200px;">
    <p>Child Component</p>
    <p>名稱 : @Name.ToString()</p>
</div>

@code{
    [CascadingParameter(Name = "ProfileName")]
    string Name { get; set; }
}

 執行效果如下：

 可以發現，一級直接將二級和三級的元件進行了資料穿透，不過需要注意的是CascadingValue的Name一定要和CascadingParameter的Name相同，否則將會執行錯誤。

五.路由

 　　從古至今，任何大型的開發框架，都是具有路由的，否則可能將會無法工作，其實Blazor的啟動頁也就使用了路由，這是毋庸置疑的。當你的元件帶有 @page 指令時，將為生成的類指定 RouteAttribute 指定路由模板的。 在執行時，路由器將使用 RouteAttribute 查詢元件類，並呈現哪個元件包含與請求的 URL 匹配的路由模板。

@page "/luyou"
@page "/luyou/{text}"

<h1>Blazor is @Text!</h1>

@code {
    [Parameter]
    public string Text { get; set; }

    protected override void OnInitialized()
    {
        Text = Text ?? "fantastic";
    }
}

執行效果如下：

在上面的示例中應用了兩個 @page 指令。 第一個允許導航到沒有引數的元件。 第二個 @page 指令採用 {text} 路由引數，並將該值分配給 Text 屬性。

關於Blazor的基礎入門咱們這篇就說到這裡，相信你一定覺得Blazor了不起！它是一個現代的開源框架。它也由一家擁有悠久歷史的公司擁有，該公司放棄了昨天的閃亮新技術。因此，大多數開發人員都應該謹慎對待Blazor。只要JavaScript能夠執行Blazor可以做的所有事情，而沒有下載大小，效能和新工具堆疊帶來的額外挑戰，大多數開發人員將一如既往。

這並不意味著Blazor不能在所有這些領域都佔有一席之地。它甚至可能成為.NET Web應用程式開發中的主導力量。但是如果我今天必須下注，這就是我要依靠的東西。WebAssembly是未來。但就目前而言，Blazor只是一種有趣的可能性。

六.彩蛋

就現在！我的好朋友宇辰正在開發一款名為Blazui的UI元件。它為什麼叫Blazui？

Blazor + Element UI = Blazui，Element UI 的blazor版本，無JS，無TS，用 .Net 寫前端的 UI 框架，非 Silverlight，非 WebForm，開箱即用！！

Blazui 演示地址：http://blazui.com:9000。QQ群：74522853，碼雲地址：https://gitee.com/wzxinchen/blazui

參考Blazor使用的前提條件：

1. 安裝 .Net Core 3.0
2. 安裝 VS2019
3. 安裝所有 VS2019 Blazor Extension

現在Blazor正在逐漸變好，讓我們即刻出發！.NET Core 不只是開源！