再学Blazor——组件建造者
2023/11/26 1:32:53
本文主要是介绍再学Blazor——组件建造者,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
使用 RenderTreeBuilder 创建组件是 Blazor 的一种高级方案。前几篇文中有这样创建组件的示例 builder.Component<MyComponent>().Build();
,本文主要介绍该高级方案的具体实现,我们采用测试驱动开发(TDD)方法,大致思路如下:
- 从测试示例入手
- 扩展一个RenderTreeBuilder类的泛型扩展方法,泛型类型为组件类型
- 创建组件建造者类(ComponentBuilder)提供方法来构建组件
- 通过组件的属性选择器来设置组件参数
- 构建时能返回组件的对象实例
1. 示例
首页我们从一个我们预想的高级方案示例入手,然后逐渐分析并实现我们预想的方案。下面是预想的示例代码:
class MyComponent : ComponentBase { private MyTest test; //MyTest组件的对象实例 //覆写构建呈现树方法 protected override void BuildRenderTree(RenderTreeBuilder builder) { builder.Component<MyTest>() .Set(c => c.Title, "Hello") //设置MyTest组件Title参数 .Build(value => test = value); //建造组件并给MyTest实例赋值 } }
2. 扩展方法
下面实现builder.Component<MyTest>()
这行代码,这是RenderTreeBuilder
的一个扩展方法,该方法返回组件建造者类(ComponentBuilder)。
public static class Extension { //泛型T是Blazor组件类型 public static ComponentBuilder<T> Component<T>(this RenderTreeBuilder builder) where T : notnull, IComponent { //返回一个组件建造者类对象,将builder传递给建造者 //其内部方法需要通过builder来构建组件 return new ComponentBuilder<T>(builder); } }
3. 建造者类
接下来实现组件建造者类(ComponentBuilder),该类是手动构建组件的核心代码,提供设置组件参数以及构建方法。
public class ComponentBuilder<T> where T : IComponent { //手动构建呈现器 private readonly RenderTreeBuilder builder; //组件参数字典,设置组件参数时,先存入字典,在构建时批量添加 internal readonly Dictionary<string, object> Parameters = new(StringComparer.Ordinal); //构造函数 internal ComponentBuilder(RenderTreeBuilder builder) { this.builder = builder; } //添加组件参数方法,name为组件参数名称,value为组件参数值 //提供Add方法可以添加非组件定义的属性,例如html属性 public ComponentBuilder<T> Add(string name, object value) { Parameters[name] = value; //将参数存入字典 return this; //返回this对象,可以流式操作 } //设置组件参数方法,selector为组件参数属性选择器表达式,value为组件参数值 //使用选择器有如下优点: // - 当组件属性名称更改时,可自动替换 // - 通过表达式 c => c. 可以直接调出组件定义的属性,方便阅读 // - 可通过TValue直接限定属性的类型,开发时即可编译检查 public ComponentBuilder<T> Set<TValue>(Expression<Func<T, TValue>> selector, TValue value) { var property = TypeHelper.Property(selector); //通过属性选择器表达式获取组件参数属性 return Add(property.Name, value); //添加组件参数 } //组件构建方法,action为返回组件对象实例的委托,默认为空不返回实例 public void Build(Action<T> action = null) { builder.OpenComponent<T>(0); //开始附加组件 if (Parameters.Count > 0) builder.AddMultipleAttributes(1, Parameters); //批量添加组件参数 if (action != null) builder.AddComponentReferenceCapture(2, value => action.Invoke((T)value)); //返回组件对象实例 builder.CloseComponent(); //结束附加组件 } }
4. 属性选择器
为什么要用属性选择器,组件建造者类中已经提到,下面介绍如何通过属性选择器表达式来获取组件类型的属性对象。
public class TypeHelper { //通过属性选择器表达式来获取指定类型的属性 public static PropertyInfo Property<T, TValue>(Expression<Func<T, TValue>> selector) { if (selector is null) throw new ArgumentNullException(nameof(selector)); if (selector.Body is not MemberExpression expression || expression.Member is not PropertyInfo propInfoCandidate) throw new ArgumentException($"The parameter selector '{selector}' does not resolve to a public property on the type '{typeof(T)}'.", nameof(selector)); var type = typeof(T); var propertyInfo = propInfoCandidate.DeclaringType != type ? type.GetProperty(propInfoCandidate.Name, propInfoCandidate.PropertyType) : propInfoCandidate; if (propertyInfo is null) throw new ArgumentException($"The parameter selector '{selector}' does not resolve to a public property on the type '{typeof(T)}'.", nameof(selector)); return propertyInfo; } }
5. 总结
以上就是组件建造者的完整实现过程,代码不长,但这些功能足以完成手动构建Blazor组件的需求。
这篇关于再学Blazor——组件建造者的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-19永别了,微服务架构!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?