Blazor Workshop项目：构建可复用组件库的技术实践

原创于 2025-06-11 09:04:01 发布 · 300 阅读

3 ·

CC 4.0 BY-SA版权

Blazor Workshop项目：构建可复用组件库的技术实践

blazor-workshop Blazor workshop 项目地址: https://gitcode.com/gh_mirrors/bl/blazor-workshop

引言

在现代Web开发中，组件化开发已成为主流范式。本文将深入探讨如何在一个披萨店应用项目中构建可复用的Blazor组件库，涵盖从基础组件到高级模板化组件的完整开发流程。

地图组件的实现原理

核心架构

地图组件是项目中一个典型的技术集成案例，它巧妙地将JavaScript库与Blazor组件相结合：

@inject IJSRuntime JSRuntime

<div id="@elementId" style="height: 100%; width: 100%;"></div>

@code {
    string elementId = $"map-{Guid.NewGuid().ToString("D")}";
    
    [Parameter] double Zoom { get; set; }
    [Parameter, EditorRequired] public List<Marker> Markers { get; set; } = new();

    protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        await JSRuntime.InvokeVoidAsync(
            "deliveryMap.showOrUpdate",
            elementId,
            Markers);
    }
}

关键技术点

JavaScript互操作：通过IJSRuntime服务调用Leaflet.js地图库
生命周期管理：在OnAfterRenderAsync中确保DOM就绪后再初始化地图
参数传递：使用[Parameter]属性实现父子组件数据绑定
唯一标识：使用GUID生成唯一DOM元素ID避免冲突

JavaScript互操作最佳实践

扩展方法封装

项目中展示了如何优雅地封装JavaScript调用：

public static class JSRuntimeExtensions
{
    public static ValueTask<bool> Confirm(this IJSRuntime jsRuntime, string message)
    {
        return jsRuntime.InvokeAsync<bool>("confirm", message);
    }
}

使用场景

async Task RemovePizza(Pizza configuredPizza)
{
    if (await JSRuntime.Confirm($"Remove {configuredPizza.Special?.Name} pizza from the order?"))
    {
        OrderState.RemoveConfiguredPizza(configuredPizza);
    }
}

这种模式具有以下优势：

类型安全的调用方式
清晰的异步编程模型
可复用的工具方法

模板化组件设计

基础模板组件

项目中实现的对话框模板组件展示了Blazor的核心抽象能力：

@if (Show)
{
    <div class="dialog-container">
        <div class="dialog">
            @ChildContent
        </div>
    </div>
}

@code {
    [Parameter, EditorRequired] public RenderFragment? ChildContent { get; set; }
    [Parameter] public bool Show { get; set; }
}

高级模板组件

更复杂的列表模板组件引入了泛型参数：

@typeparam TItem

@code {
    [Parameter] public Func<Task<IEnumerable<TItem>>> Loader { get; set; }
    [Parameter] public RenderFragment Loading { get; set; }
    [Parameter] public RenderFragment Empty { get; set; }
    [Parameter] public RenderFragment<TItem> Item { get; set; }
}

这种设计实现了：

完全分离数据获取与UI呈现
支持多种渲染状态（加载中、空列表、正常列表）
类型安全的项目渲染

组件库项目结构

关键配置

组件库项目的核心配置包括：

<Project Sdk="Microsoft.NET.Sdk.Razor">
  <PropertyGroup>
    <TargetFramework>net8.0</TargetFramework>
    <Nullable>enable</Nullable>
  </PropertyGroup>
  
  <ItemGroup>
    <SupportedPlatform Include="browser" />
  </ItemGroup>
</Project>

静态资源处理

组件库中的wwwroot目录会自动打包：

CSS/JS文件通过_content/[库名]/[路径]引用
资源与组件代码一起版本化

实际应用示例

地图组件集成

<div class="track-order-map">
    <Map Zoom="13" Markers="orderWithStatus.MapMarkers" />
</div>

模板对话框使用

<TemplatedDialog Show="OrderState.ShowingConfigureDialog">
    <ConfigurePizzaDialog 
        Pizza="OrderState.ConfiguringPizza" 
        OnCancel="OrderState.CancelConfigurePizzaDialog" 
        OnConfirm="OrderState.ConfirmConfigurePizzaDialog" />
</TemplatedDialog>