什么是 Razor，它和 Blazor 有什么关系？

Posted 2022-03-24 jirigala

Blazor 则开了一点历史的倒车：它把服务端渲染的那套四不像的东西又拉出来了，就是 Razor。

1. 第一步依然是相同的，Blazor 依然会把这种四不像脚本语言先转译成一个 C#的类
2. 第二步是不同的

1. Blazor WebAssembly 会将这个 C#类进一步转译成 WebAssembly 代码跑在浏览器上
2. Blazor Server 虽然会在服务端像 ASP .NET 一样直接跑类中的方法，但最终返回给客户端的并不是渲染好的全新的 html+CSS 文档，而是发送更新 UI 的指令

而 Blazor 使用的这套，将视觉和交互逻辑融合起来的四不像脚本语言，就叫 Razor。我们上面也说了，Razor 其实是在服务端渲染时代就存在的一个东西，这个东西其实就俩使命：

1. 把 HTML&CSS 和 C#嵌合在一起，使用上更像是在 HTML&CSS 中嵌 C#，而不像现在的前端框架，在 JS/TS 中嵌 HTML 标签
2. 它最终会被转译成一个类。换句话说，Razor 虽然写着像是标记语言，像是在 HTML&CSS 中嵌了一些 C#代码，但实际上它是一个 C#类

Razor 脚本的历史其实很长，ASP .NET 时代它就是 UI 描述语言，那时候大家用​​*.cshtml​​来做脚本文件的后缀，也很好理解嘛，把 html 和 CSharp 结合在一起，叫​​*.cshtml​​是非常河鲤的。最近，特别是在 Blazor 框架下，大概是微软的人觉得用​​*.cshtml​​太土了，所以又启用了一个新的文件后缀，就叫​​*.razor​​，其实就是喵叫了个咪，没有什么本质区别。

最重要的要谨记以下两点：

1. Razor 是一门四不像语言，在 HTML 中掺 C#
2. Razor 文件虽然看起来像是 HTML，但其实是个 C#的类

特别是第二点，不清晰的认识到第二点，就很难理解 Razor 语法中很多奇怪的地方

2. Razor 是怎么被转译成 C#类的？

上面我们介绍了什么是 Razor，按常理来说，我们接下来应该介绍 Razor 怎么写，即 Razor 的语法。但我觉得有必要，在讲解 Razor 的语法之前，探究一下 Razor 文件是怎么被转译成一个 C#类 的这个过程。

虽然从框架的使用者的视角来说，并没有必要去了解、理解框架的工作方式，只需要掌握使用方法就行了。但 Razor 太拧巴了，就像上面说的，这是一门四不像的标记语言，如果不了解、理解​​它背后的工作原理​​，那么 Razor 中很多奇怪的语法、用法，使用者就无法理解。并且当代码出错时，就完全没有调试纠错的思路。

而更要命的是，，使用默认的.Net Core 项目模板创建出来的 BlazorWASM 和 BlazorServer 项目，​​如果你回过头去看上一篇文章​​我们介绍的项目中的目录与文件明细，会发现很多不明所以的内容（特别是对之前完全不了解.Net 框架的人来说）。所以这里还得先给大家介绍，如何一步步的纯手动的创建一个 Blazor 项目。

所以这个小节有两个主要任务：

1. ​​介绍如何以最原始的方式创建一个最简单的​​ BlazorWASM 项目。
2. ​​再介绍如何从命令行编译这个项目​​，以及编译的过程中都发生了什么，以及最终这个项目是怎么 run 起来的。

在上面两部分内容介绍完毕后，​​我们会再简短的​​介绍一下如何创建一个类似的 BlazorServer 项目