今天是鐵人賽最後一天了,想分享的主題也差不多了,就來個總集篇做個收場吧!
從最基本的
認識 Blazor WebAssembly
認識 Blazor WebAssembly 是什麼,並建立範本專案。
認識 Razor 語法
Blazor 元件的本體 Razor,如果不會也就不用往下閱讀了。
魔術道具 - Razor 介紹
魔術道具 - Razor 指示詞
魔術道具 - Razor 指示詞屬性
元件的基本知識
生命週期
認識生命週期,在元件的各種狀態後做些額外的事情。
路由相關
SPA 最基本的需求,路由。
表單相關
網頁最基本的需求,表單。
表單魔術
表單魔術 - 驗證技巧
表單魔術 - 內建元件道具
表單魔術 - 資料繫結與事件處理技巧
傳值三兄弟
目前 blazor 的傳值方式只有下面三種,了解以應付各種狀況。
魔術技巧 - 父子溝通問題
魔術技巧 - 傳值技巧
狀態管理魔術
自訂元件須知
了解如何自訂元件,自訂完元件後如何提供給別人使用。
魔術技巧 - 客製化輸入元件
魔術技巧 - 樣板化元件
魔術技巧 - 取得元件參考
魔術技巧 - 版型配置
元件類別庫魔術
服務的基本知識
認識框架提供的預測服務,以及使用方式。
相依性注入魔術
魔術技巧 - HTTP 要求與回應
魔術技巧 - 與 JavaScript 共舞
組態魔術
環境魔術
進階技巧
了解如何透過自訂服務來達成目的。
其他
以上就是這次鐵人賽,我想跟大家分享的 Blazor WebAssembly 的內容了,希望可以幫助到想了解 Blazor WebAssembly 的人,有個基本的認識。當然更希望可以幫助到閱讀者能夠快速上手,畢竟這框架目前的討論還很少,但我相信他有一天可以成為主流的框架之一。
感謝大家的閱讀,我們有緣再見。
參考資料
大內魔術 Blazor - 誰說前端一定要寫JS 系列
安可
表演哪有不安可的,最後我想把一些小東西講完,但這就不是這系列文 Blazor WebAssembly 版本的範疇了,比較屬於未來視,但是是比較近的未來,可能會隨著 .NET 5
一起發行,讓我們一起來看看 .NET 5
的 Blazor WebAssembly 可能會多了哪些新東西吧!
- CSS isolation for Blazor components
在介紹魔術技巧 - 版型配置時有提到,未來可以有 xxx.razor.css
,這件事情將會實現,到時就可以抽離 css 區塊,讓每一個檔案更乾淨的負責一件事情。
- Lazy loading in Blazor WebAssembly
延遲載入也可以實現了,延遲載入對大型專案來說,是關係到框架選擇的生死啊,如果沒有延遲載入,那 Blazor 在框架競爭中就很容易被淘汰,但不用再擔心了。
- New InputRadio Blazor component
在表單魔術 - 內建元件道具提到目前還未上線的 InputRadio
與 InputRadioGroup
也要正式支援了。
- Set UI focus in Blazor apps
在魔術技巧 - 取得元件參考提到,如果想要 focus 到 html 元素上時,需要自行透過 JSRuntime
協助,但現在 @ref
取得的元素(ElementReference
)就能使用 FocusAsync
來 focus 目標了。
- Influencing the HTML head in Blazor apps
提供 Title
、Link
與 Meta
元件來設定 Html 的 Head,使 Head 的內容可以依照當前元件決定。
這本來 Docs 就有提及,我也打算含在前面的內容說明,但官方突然將這部分的內容移除了,所以就在這邊簡單帶過吧。
- Protected browser storage
提供了 ProtectedLocalStorage
與 ProtectedSessionStorage
服務,只需要安裝 Microsoft.AspNetCore.Components.Web.Extensions
套件並 AddProtectedBrowserStorage()
來註冊,我們就不需要在自行建立服務來處理這檔事了,真是可喜可賀啊!
以上就是參考資料有關 Blazor 的部分,相信現在做的東西,未來就會慢慢的化成經驗,官方會提供更方便的方法來讓後人更好上手!
再次感謝大家的閱讀,我們有緣再見,下台一鞠躬!