BlazorUI 组件开发周记 - 1
2023-05-13 在头条上我写了第一篇微头条， BlazorUI 是从这一天正式宣布开始的，也是因为决定了开发 BlazorUI 组件库，我才从一个头条的忠实阅读者，变成了开始尝试来发表自己的一些想法和文章了小小分享创作者。
以后，继续利用这个平台，记录一下我开发 BlazorUI 组件的历程。
独行者的告白
Blazor 很小众，国内基本无人问津。了解 Blazor 是始于 2020 年中，口罩的原因，公司工作不忙。正好团队在思考如何淘汰原 WPF 做的系统，改 Web 版。最开始在选择 React 与 Vue 之间横跳。但，团队一直用 .net。而且 .net5 以后，大家用得很顺畅了，改其他的框架，成本很大。无意间了解到了 Blazor。对其开发模式很认可，跟团队一商量。就尝试了一下，结果没让人失望。于是选用了一套个人开发的组件库，小伙伴们上手做了一个小系统。上线后其他表现都可以，就是组件库太差强人意了。
2021年决定自研组件库，第一版出来后，因为没有太多开发经验，结果不理想。但也凑合做了一些模板。在net6出来时，了解到Blazor有了更好的提升与表现，决定开始做第二版。几个月下来，做了一套够用的组件库，直接用到内部系统开发中，至目前为止，表现都不错。之后也考虑过开源，但是，这是内部使用的一套组件库，组件数量有限，但组件的稳定性很重要，源码很少去升级。开源意义不大。
2023年了解到 net8 即将年内发布，于是，又研究了一下新的 Blazor。发现了更多惊喜。非常看好其未来的表现。加上最近时间也不忙，就有了想开发一套全新的、且开源的组件库的想法了。但知道这是一个艰巨的任务，没敢轻易最后下决心。
最后的决定是在与一位网友老兄的简单沟通中被激发的。
即然下了决心，那就一路不回头了。
明明知道 Blazor 没什么人关注，自己做的东西可能也无人问津。但，这不是重点。
我这次开发新组件的核心目标是：自己基于对 Blazor 的理解，以及能力可能达到的边界。如果不转换为一套组件或某个其他东西的话，似乎有点对不住自己。
既然决定了，那肯定是要做一套最理想的组件出来。信心来源于对之前的组件开发经验以及 Blazor 未来的表现。
埋头干就是了，其他的再说......
理论上，Blazor 可以直接引用 Bootstrap，通过指定 css 及引用 javascript 库，也可以做到想要的 UI 与交互。为什么还要开发一套组件库呢？而不直接套用 Bootstrap 用原生的方式去实现 UI？原因很简单，也只有一个原因，那就是为了：方便简洁、代码清爽。
组件库通过对外观样式及常用交互的封装，可以更方便地达到 UI 效果，并能更好地、灵活地实现交互。而且，组件库可以在原生的组件上，进行二次扩展，以达到更复杂、更好的效果。
由于 net7 中 MAUI的出世，加上 MAUI+Blazor 的组合。Blazor 将来可应用的场景会更多。一套好的组件库，能实现多端的开发与应用，是必须的。而且 Blazor 在 B 端开发上的模式的科学性、先进性，以及更高的开发效率，以及Blazor 可方便使用 net 的庞大资源库进行Web 端开发，也是我开发一套好的 Blazor 组件库来支持 Blazor 发展的一个动力。
基于 Bootstrap 5.3 的外观样式
作为一套可大众化的组件库，精致美观很重要。
组件开发最重的是交互与外观。交互通过代码实现，外观通过 css 样式表实现。大厂或牛人自研的组件都是自己做 css 样式表。比如 Ant Design、ElementUI等。我没那实力与精力。就直接使用 Bootstrap 作为这次开发的 BlazorUI 的组件样式 css 库。Bootstrap 自 5.2 后变化很大。加入了主题暗黑模式。而且细节也做得更精致了，用 Bootstrap 来做 BlazorUI 组的样式库，是最佳的选择。这次花了更多地时间去学习、了解新的 Bootstrap 5.3。
由于这次开发的组件主要面向 B 端开发使用，所以针对 B 端开发注重功能，鼠标操作较多的特点，对原生的 Bootstrap 的组件样式做了些许调整，比如使组件看起来更小，更不占用空间。移除了按钮的边框，输入框的焦点框也改小等等。 个别组件的外观也根据我个人的审美做了些微调。总体感觉下来，这套组件比已有市面上我所看到的 Blazor 组件，外观上看起来，会更精致，更标准化。
虽然采用了 Bootstrap。但只套用了她的样式表，完全不基于Bootstrap的 js 实现。必要的 js 实现， Blazor 自身可以解决。且 Blazo 大部分情况下，不需要 js 也能完成 Bootstrap 中必须要 js 来实现的目标。比如点击按钮打开指定的菜单。Bootstrap 必须通过 js 来实现。Blazor 可以内部实现。
全新的组件底层渲染逻辑封装与实现
作为应用于 B 端的一套组件库，稳定性是第一位。
在研发内部第二版组件时，已经有了一套很成熟的组件封装逻辑与实现方法。而且也解决了高效、稳定、方便地构建组件的问题。由于时间要求，那套代码不简洁。这次开发新的 BlazorUI 组件。基于原代码进行了全新的梳理与重构，而且产生了一些更好的新思路。得益于 net7 与即将发布的 net8 中 Blazor 的提升，新的底层封装代码比原来的简洁了许多，而又达到了更好的渲染效率，更方便的组件构建和更灵活的组件扩展等。
虽然底层封闭逻辑很复杂，但最终体现出来的代码却很简洁。
组件的原始基类 BaseUIComponent 负责实现高效、方便的渲染及样式匹配。核心基类 BaseElement、BaseContainer，BaseCollection 分别处理不同类型的组件应用场景。且提供了 QuickElement、QuickContainer 模式实现高效的渲染。
基于这套封装，很多组件都不需要通过 Razor 文件来编写 UI 逻辑。一个 cs 源文件就可以实现新组件的构建。只有较复杂的 UI 才需要 Razor 来配合完成 UI 逻辑，而且 Razor 中的渲染也打破了传统的实现方式。这应该是全网独一份的实现。
贴出两个示例看看：
Navbar.Razor 导航栏的 UI 渲染实现
Navbar.cs 导航栏的代码实现
我有代码洁癖，在个人能力边界之内，不太容许自己代码有不科学、不合理的地方。尤其对底层封装的代码，甚至为某个可能也许提升不了多少的但又有更好的实现方法，都会纠结着去达到可能的最佳方案。事实上，这样会影响进度。
但底层的核心代码，不讲进度，只要质量！
规范的组件命名与精致的外观
好的组件库必须规范、且精致美观
构建组件时，组件的成员属性名称、事件名称、方法名称都参考了其他组件库，尤其 Microsoft 自家的组件的命名规则。尽量采用通用标准的名称。之前做的第一、二版，因为太匆促，命名不规范。这次宁愿花多点时间，也要保证命名的规范与标准。
BlazorUI 组件库是一套主要面对 B 端应用的组件库。所以我对组件的大小进行了二次调整，使其更适合于 B 端界面的体现。也为了使组件更显精致，也加了些特别的动画与反馈效果。
得益于小时候学过画画，有点美术基础。我对 UI 的外观非常之讲究，也有着较高的追求。
在开发一个组件时，我会尽量对组件的所有 UI 细节进行测试与验证。包括禁用状态、鼠标悬停、点按效果、选中状态等的颜色、边距、间距、大小等。大部分情况下，Bootstrap 都做到了很好的效果，但，基于 Bootstrap，我会根据本人的经验与理解，再进行二次验证与细化。
这是一个非常耗费时间与精力的事。有强迫症和代码洁癖的我，常常会花很多时间去调整细节。
详尽的组件开发文档
开源组件必备之组件开发文档
既然要开源，组件的使用说明与属性介绍必须要有。较之前为内部开发的组件，基本上没有文档，仅几个简单的示例就打发了。作为一个开源组件库，要面向大众。就需要一个较详细的文档来介绍组件的使用与属性。
目前参考 Bootstrap的开发文档，基本搭建了一个未来要实现的文档架构。随着组件开发的进度推进，这个文档也会慢慢详细与丰富起来。
开发组件是一个艰巨的任务，给组件书写说明文档，也是一个很艰巨的任务。但是，也是很必要的。
当前进度及结束语
这是第一次写开发周记。也花费了几个小时来完成这个文档。作为本人开发组件的记录，是以后每周我尽量要去完成书写的一个文档。
这周下来，因为正常工作不多，大部分时间都用在开发组件上了。
目前进度不错。自决定新起 BlazorUI 组件库的开发任务已来，差不多十来天左右。已完成了以下几个重点任务：
- 底层组件渲染逻辑的封装
- 核心组件基类 BaseUIComponent、BaseElement、BaseContainer，BaseCollection等
- 图标组件及 Bootstrap 图标库的封装
- 基于 Bootstrap 5.3 的样式表及部分组件样式的调整
- 组件与 Javascript 的基础交互的封装
- 组件开发文档的架构及页面布局
已完成的组件包括：
- Icon 图标
- Button 按钮
- Spinner 装载指示器
- Card 卡片
- Collapse 折叠容器
- ListGroup/ListGroupItem 列表组
- Navbar 导航栏
- NavMenu 导航菜单
- NavTabs 标签导航栏
- OptionsBar 选项条
由于之前没搞过开源项目。这是第一次！
目前项目还在自己开发中，暂时没上传到开源网站。毕竟自己不熟悉开源项目的发布与管理过程。目前也没太多精力去开源代码。因为还只是个起稿，更多精力是在内部组件的构造中。
当到一定进度时，需要花点精力来研究了解一下如何将项目开源出来。同时，也了解一下开源后的工作是需要做些什么。
目前估计也没什么人关注能看到这个周记。
自已先总结到这。遗落的，下周再补。