面试官：你刚说你喜欢研究新技术，那么请说说你对 Blazor 的了解

标签：编程   font   方法   管理   mvc   灵活   运行   http   示例   

阅读本文大概需要 1.5 分钟。

最近在几个微信 .NET 交流群里大家讨论比较频繁的话题就是这几天自己的面试经历。

面试官：“你刚说你喜欢研究新技术，那么你对 Blazor 了解多少？”。

作为一位专注于 .NET 开发的软件工程师，你好意思说你对 Blazor 一点也不解吗？.NET 新技术也就是那么几个，连微软最近在逛推的 Blazor 你都不了解，你好意思说你喜欢研究新技术？

讲真，确实有很多童鞋对 Blazor 还不了解，平时埋头写代码改 Bug，哪有时间去研究 Blazor，再说这种玩意儿公司会不会采用还是个很大疑问呢。是这个理，但如果等你的公司（国内使用了.NET 技术的公司）都开始使用 Blazor 了，Blazor 还能算是新技术吗？出于真正对技术的兴趣和热爱，对于新技术，有人会主动地去了解（不一定要研究得很深），而不是等到需要用的时候再去了解。至少他们会知道新技术有哪些优点，在公司技术选型上就可以给到自己的意见甚至推广新技术的使用，这可能就是他们和普通程序员拉开差距的原因之一。

不管你是真对 Blazor 感兴趣，还是只是为了应付面试，作为 .NET 开发者，你没用过 Blazor，至少应该了解一下吧，哪怕是花个一两分钟看看这篇文章的介绍。

使用 C# 实现 Web 交互式 UI

Blazor 允许你使用 C# 来实现 Web 交互式 UI，而不需要使用 JavaScript。尽管 JavaScript 的生态很强大，但这种弱类型语言在业务逻辑比较复杂的大型 Web 开发上还是存在较大的缺陷。当然，经过几年的发展 JavaScript 的弱类型问题可以通过工程手段来解决，甚至使用 TypeScript 来替代，但在实现可重用组件上还是有诸多的不理想。

Blazor 应用可以使用 C#、HTML 和 CSS 实现可重用 Web UI 组件，客户端和服务器代码都用 C# 编写的，允许你共享代码和库。Blazor 是 ASP.NET Core 的一个新特性，所以可以很好的集成到 ASP.NET Core MVC/Razor Pages 应用中。

下面是一段来自于模板的 Blazor 代码：

@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++;
    }
}

在 WebAssembly 或服务器端运行

Blazor 支持两种运行方式，一是在客户端使用 WebAssembly 运行，二是在服务器端运行直接渲染到浏览器。

Blazor 可以使用 WebAssembly 直接在浏览器中运行客户端 C# 代码，正因为它是运行在 WebAssembly 上的 .NET 程序，所以客户端也可以重用服务器端的代码和库。

即使不使用 WebAssembly，Blazor 也可以在服务器端运行客户端的业务逻辑。客户端 UI 事件使用实时消息框架 SignalR 发送回服务器，一旦执行完成，所需的 UI 更改将发送到客户端渲染到 DOM 中。

目前主流开发单页应用（SPA）使用 Vue 或 React 的很多，但要实现服务器端渲染（SSR），还是挺麻烦的，尽管有现成的像 Next.js 或 Nuxt.js 这样的框架可以使用，但由于它们更新迭代比较快，依赖的 npm 包多而杂，后期维护和升级成本也很高。所以从 SSR 支持这一点来讲，Blazor 应用还是有明显优势的。

基于开放的 Web 标准

通常是为了使用统一的编程语言或使用统一的标准，常见的做法是将一种编程语言编写的代码转换为另一种编程语言，比如将 TypeScript 编写代码转换成 JavaScript 以便在浏览器中运行。而 Blazor 使用的是开放的 Web 标准，不需要额外的插件或代码语言转换。Blazor 可以在所有主流的 Web 浏览器中工作，包括移动端浏览器。

在客户端运行 Blazor 代码和 JavaScript 框架一样是在安全的沙箱中执行的，在基于开放的 Web 标准基础上，Blazor 具有服务器端代码的灵活性，比如直接连接数据库。

和 JavaScript 交互

在 Blazor 应用中，你可以在 C# 代码中调用 JavaScript 代码，也可以在 JavaScript 代码中调用 C# 代码，两者可以很容易实现交互操作。好处是，在使用 C# 编写业务代码时，你依然可以继续使用现有庞大的 JavaScript 库生态系统。当使用服务器端运行代码时，Blazor 会负责在客户端使用 JavaScript 无缝调用 C# 代码。

下面是一个 JavaScrit 调用 C# 的示例^[2]。

先使用 JSInvokable 特性标注一个 C# 方法为允许 JavaScript 调用：

<button type="button" class="btn btn-primary"
        onclick="exampleJsFunctions.returnArrayAsyncJs()">
    Trigger .NET static method ReturnArrayAsync
</button>

@code {
    [JSInvokable]
    public static Task<int[]> ReturnArrayAsync()
    {
        return Task.FromResult(new int[] { 1, 2, 3 });
    }
}

然后在 JavaScript 代码中调用 C# 代码：

window.exampleJsFunctions = {
  ...
  returnArrayAsyncJs: function () {
    DotNet.invokeMethodAsync(‘BlazorSample‘, ‘ReturnArrayAsync‘)
      .then(data => {
        data.push(4);
          console.log(data);
      });
  },
  ...
};

其它

对我来说 Blazor 最吸引的优点是前后端代码的共用以及组件的重用。通过 nuget 管理和引用共用组件和库不仅比 npm 包管理方便，而且体积也小很多。

Blazor 的生态也正逐步发展起来了，虽然还没有听说哪个大公司在用，但 Blazor 的理念是未来趋势，值得你花点时间了解和研究一下。

参考：

[1]. http://dwz.win/EU4
[2]. http://dwz.win/EU3

面试官：你刚说你喜欢研究新技术，那么请说说你对 Blazor 的了解

标签：编程   font   方法   管理   mvc   灵活   运行   http   示例   

原文地址：https://www.cnblogs.com/willick/p/13192854.html