如何为Blazor组件实现类似CSS隔离的JS打包机制？

需求背景 #

Blazor组件支持CSS隔离机制：Foo.razor可搭配Foo.razor.css，既实现CSS隔离，又能打包为统一的{ASSEMBLY NAME}.styles.css文件。我希望为组件作用域的JavaScript实现类似机制，同时满足以下要求：

• 不将通用函数放入全局作用域（window）
• 不使用jsComponentInitializers调用（避免破坏组件内聚性）
• 不将JS代码写入.razor文件（防止组件多次实例化时代码重复注入）
• 当前渲染模式为Static server-side rendering（SSR）
• 最终JS需打包为类似{ASSEMBLY NAME}.scripts.js的单文件，且仅加载一次，同时能区分不同组件实例

可行解决方案 #

1. 组件专属JS文件（保持内聚性） #

为每个需要JS逻辑的组件创建同名的.razor.js文件（如Foo.razor对应Foo.razor.js）。Blazor会自动将这类文件识别为组件关联资源，即使组件多次实例化，JS代码也只会被加载一次，不会重复注入页面。

2. 基于实例标识实现作用域隔离 #

和CSS隔离的原理类似，通过给每个组件实例添加唯一标识，在JS中区分不同实例：

• 在Foo.razor中定义实例标识与DOM引用：

<div @ref="ComponentRoot" data-component-id="@ComponentId">
    <!-- 组件内容 -->
</div>

@code {
    private ElementReference ComponentRoot;
    private string ComponentId = Guid.NewGuid().ToString();

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 调用组件专属JS方法，传入实例标识与DOM元素
            await JS.InvokeVoidAsync("FooComponent.init", ComponentId, ComponentRoot);
        }
    }
}

• 在Foo.razor.js中用闭包封装逻辑，存储实例关联信息：

// 闭包封装，避免污染全局作用域
(function() {
    // 存储组件实例的关联数据
    const componentInstances = new Map();

    // 暴露仅当前组件可用的方法（避免全局污染）
    window.FooComponent = {
        init: function(componentId, element) {
            componentInstances.set(componentId, { element });
            // 为当前实例绑定专属事件或逻辑
            element.addEventListener('click', () => handleInstanceClick(componentId));
        }
    };

    // 实例专属逻辑
    function handleInstanceClick(componentId) {
        const instance = componentInstances.get(componentId);
        // 针对当前实例执行操作
        instance.element.style.color = '#2563eb';
    }
})();

3. 配置打包为单文件 #

在项目的.csproj文件中添加配置，将所有.razor.js文件合并打包为{ASSEMBLY NAME}.scripts.js：

<PropertyGroup>
  <!-- 指定静态资源基础路径 -->
  <StaticWebAssetBasePath>_content/YourAssemblyName</StaticWebAssetBasePath>
</PropertyGroup>

<ItemGroup>
  <Content Include="**/*.razor.js">
    <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
    <!-- 配置打包名称与输出文件名 -->
    <BundleName>scripts</BundleName>
    <BundleResourceName>{ASSEMBLY NAME}.scripts.js</BundleResourceName>
  </Content>
</ItemGroup>

4. 静态SSR中加载打包后的JS #

在静态SSR的布局文件（如MainLayout.razor）中，添加对打包后JS文件的引用，确保仅加载一次：

<script src="_content/YourAssemblyName/{ASSEMBLY NAME}.scripts.js"></script>

内容的提问来源于stack exchange，提问作者Ofer Zelig