Java教程

再学Blazor——组件建造者

本文主要是介绍再学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——组件建造者的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!