如何隔离同一组件的不同实例之间的js变量？

Question

我有一个使用结构 js 和 canvas 的 blazor 组件。

我使用经典的 JS 隔离方式，导入模块，调用导出的 js 函数，等等。

MyComponent.razor

<canvas id="@canvasId">
</canvas>

MyComponent.razor.cs

[Inject] private IJSRuntime _jsRuntime { get; init; }
private IJSObjectReference module;
private string canvasId ;

protected override async Task OnInitializedAsync()
{
    canvasId = $"canvas_MediaLabelEditor_{Guid.NewGuid().ToString()}";
    Reload();
}

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    ...
    string[] args = new string[] { canvasId };
    module = await _jsRuntime.InvokeAsync<IJSObjectReference>("import", "./js/fabricBboxLabel.js");
    await module.InvokeVoidAsync("loadCanvas", args);
}

protected async Task DoAmazingThings()
{
    string[] args = new string[] { ..., ..., ... };
    await module.InvokeVoidAsync("doAmazingThings", args);
}

我使用一个数组来保存 canvas 上淹没的当前对象。 然后我可以移动并调整它们的大小以最终调用保存 function ，它将所有对象返回到 c# 代码。

./js/fabricBboxLabel.js

var canvas;
var data; //array
export function loadCanvas(id){
    canvas = new fabric.Canvas(id);
}
export function doAmazingThings(a,b,c){
    array.push( ... )
    ...
    canvas.renderAll();
}

当我有多个此组件的实例时会出现问题。 所有实例似乎都在访问相同的 canvas 和数据变量。

一个实用的解决方案是定义一个 canvas 阵列或 map，但这不是隔离。 我怎样才能隔离这些变量？

---

复制

创建一个带有按钮的组件

隔离测试.razor

<button @onclick="@(async () => await OnClick())">
</button>

隔离测试.razor.cs

[Inject] private IJSRuntime _jsRuntime { get; init; }
private IJSObjectReference module;
   
protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        module = await _jsRuntime.InvokeAsync<IJSObjectReference>("import", "./js/isolationtest.js");
    }
}
public async Task OnClick()
{
   object[] args = new object[] { 5 };
   await module.InvokeVoidAsync("sumar", args);
}

隔离测试.js

var sum=0;

export function sumar(inte) {
    console.log("before sum="+sum)
    sum=sum+inte;
    console.log("after sum="+sum)
}
alert(sum);

索引.razor

<IsolationTest></IsolationTest>
<IsolationTest></IsolationTest>
<IsolationTest></IsolationTest>

output：（随机点击时）

before sum=0
after sum=5

before sum=5
after  sum=10

before sum=10
after sum=15

before sum=15
after sum=20

before sum=20
after sum=25

before sum=25
after sum=30

Answer 1

我建议在你的 js 中使用 Sum 数组：

var sum=[];

export function sumar(id,inte) {
    console.log("before sum="+sum[id])
    sum=sum[id]+inte;
    console.log("after sum="+sum[id])
}
alert(sum[id]);

...

[Parameter] public string Id { get;set;}
public async Task OnClick()
{
   object[] args = new object[] { 5 };
   await module.InvokeVoidAsync("sumar",this.Id,args);
}

...

<IsolationTest Id="theFirst"></IsolationTest>
<IsolationTest Id="theSecond"></IsolationTest>
<IsolationTest Id="theThird"></IsolationTest>