再学Blazor——扩展方法

上篇提到 Blazor 组件的高级写法,是采用扩展方法对 HTML 元素和组件进行扩展,以便于书写组件结构和代码阅读。本篇主要介绍扩展方法实现的思路。

  • 什么是扩展方法
  • 要扩展哪个类
  • 扩展方法的实现

1. 什么是扩展方法

若要对一个 C# 类型添加新方法,一是修改源码,二是派生类,三是扩展方法。前两者不是万能的,第一种我们不一定有源码,第二种类型不一定能继承,只有第三种是万能的方法,在项目中新建一个扩展类型即可对任何类型进行扩展。

一个扩展方法需要有如下条件:

  • 添加扩展类,类必须声明 static 修饰符
  • 添加方法,方法必须声明 static 修饰符
  • 方法第一个参数必须是扩展类型,且要有 this 关键字
csharp 复制代码
//扩展类型
static class Extension
{
    static void SayHello (this string name)
    {
        Console.WriteLine($"Hello, I'm {name}.");
    }
}

//测试
var name = "Known";
name.SayHello();

//输出
Hello, I'm Known.

2. 要扩展哪个类

上篇提到组件的高级写法,需要覆写组件的 BuildRenderTree 方法,这个方法有唯一类型参数 RenderTreeBuilder,对,就是这个类型,我们从它开始扩展一切 HTML 基本元素及自定义组件。

下面看看 RenderTreeBuilder 有哪些原生方法。

  • OpenElement ,打开一个元素,呈现 <div> 等开始标签
  • CloseElement ,关闭一个元素,呈现 </div> 等关闭标签
  • OpenComponent ,打开一个组件,呈现 <MyComponent>
  • CloseComponent ,关闭一个组件,呈现 </MyComponent>
  • AddAttribute,添加元素和组件的属性,有8个重载方法
  • AddMultipleAttributes,一次性添加多个属性,参数为字典类型
  • AddContent,添加标签内部的内容,有6个重载方法
  • AddMarkupContent,添加原始 HTML 字符内容
  • AddElementReferenceCapture,添加元素对象参考,通过它可获取元素对象的实例
  • AddComponentReferenceCapture,添加组件对象参考,通过它可获取组件对象的实例

掌握以上这些方法的使用后,我们就可以开发扩展我们需要的元素和组件。

3. 扩展方法的实现

由于 HTML 元素标签及其属性众多,为了方便且全面适配所有属性,增加一个属性建造者类型 AttributeBuilder 来管理元素属性。建造者类型如下:

csharp 复制代码
public class AttributeBuilder
{
    private readonly RenderTreeBuilder builder;

    public AttributeBuilder(RenderTreeBuilder builder)
    {
        this.builder = builder;
    }

    public AttributeBuilder Add(string name, object value)
    {
        if (value != null)
            builder.AddAttribute(1, name, value);
        return this;
    }

    public AttributeBuilder Id(string id) => Add("id", id);
    public AttributeBuilder Name(string name) => Add("name", name);
    ...
}

添加一个 HTML 元素扩展类,用于扩展 HTML 元素,代码示例如下:

csharp 复制代码
public static class HtmlExtension
{
    //通用元素扩展方法
    public static void Element(this RenderTreeBuilder builder, string name, Action<AttributeBuilder> child = null)
    {
        builder.OpenElement(0, name);
        var attr = new AttributeBuilder(builder);
        child?.Invoke(attr);
        builder.CloseElement();
    }
    //div标签
    public static void Div(this RenderTreeBuilder builder, Action<AttributeBuilder> child) => builder.Element("div", child);
    ...
}

下面写一个元素扩展方法的示例,并将呈现的 HTML 结构与 C# 代码进行比对,直观感受一下高级写法的妙处。

csharp 复制代码
protected override void BuildRenderTree(RenderTreeBuilder builder)
{
    builder.Div(attr =>                     //<div id="myPanel" class="panel">
    {                                       //
        attr.Id("myPanel").Class("panel");  //
        builder.Div(attr =>                 //    <div class="header">
        {                                   //
            attr.Class("header");           //
            //这里构造 Panel 头部内容        //
        });                                 //    </div>
        builder.Div(attr =>                 //    <div class="body">
        {                                   //
            attr.Class("body");             //
            //这里构造 Panel 身体内容        //
        });                                 //    </div>
    });                                     //</div>
}

再次优化一下扩展方法的示例,下面代码看起来是不是更整齐了一些。

csharp 复制代码
protected override void BuildRenderTree(RenderTreeBuilder builder)
{
    builder.Div("myPanel", "panel", attr => //<div id="myPanel" class="panel">
    {                                       //
        builder.Div("header", attr =>       //    <div class="header">
        {                                   //
            //这里构造 Panel 头部内容        //
        });                                 //    </div>
        builder.Div("body", attr =>         //    <div class="body">
        {                                   //
            //这里构造 Panel 身体内容        //
        });                                 //    </div>
    });                                     //</div>
}
相关推荐
lecepin1 小时前
AI Coding 资讯 2025-09-17
前端·javascript·面试
IT_陈寒1 小时前
React 18实战:7个被低估的Hooks技巧让你的开发效率提升50%
前端·人工智能·后端
树上有只程序猿1 小时前
终于有人把数据库讲明白了
前端
猩兵哥哥1 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
司宸1 小时前
Prompt设计实战指南:三大模板与进阶技巧
前端
RoyLin2 小时前
TypeScript设计模式:抽象工厂模式
前端·后端·typescript
华仔啊2 小时前
Vue3+CSS 实现的 3D 卡片动画,让你的网页瞬间高大上
前端·css
江城开朗的豌豆2 小时前
解密React虚拟DOM:我的高效渲染秘诀 🚀
前端·javascript·react.js
vivo互联网技术2 小时前
拥抱新一代 Web 3D 引擎,Three.js 项目快速升级 Galacean 指南
前端·three.js