以后，继续利用这个平台，记录一下我开发 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 选项条由于之前没搞过开源项目。这是第一次！
目前项目还在自己开发中，暂时没上传到开源网站。毕竟自己不熟悉开源项目的发布与管理过程。目前也没太多精力去开源代码。因为还只是个起稿，更多精力是在内部组件的构造中。
当到一定进度时，需要花点精力来研究了解一下如何将项目开源出来。同时，也了解一下开源后的工作是需要做些什么。
目前估计也没什么人关注能看到这个周记。自已先总结到这。遗落的，下周再补。
