[](https://res.cloudinary.com/practicaldev/image/fetch/s--BJ42L3EA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https:// dev-to-uploads.s3.amazonaws.com/uploads/articles/io93zlwis42svb4qsmkc.gif)

演示|GitHub

使用 Blazor Webassembly 创建图表编辑器的实验(Blazor Webassembly SVG Drag And Drop、Blazor WebAssembly: Connecting Lines in SVG)表明 Blazor 不适合密集的 DOM 操作。

提前知道会有下沉:WebAssembly 无法直接访问 DOM,WebAssembly 使用 JavaScript 互操作来改变 DOM。延迟如此之高,以至于在添加第三个形状后,移动设备上的拖拽速度变慢了。

拒绝框架(针对此任务)

怀疑 Blazor 的虚拟 DOM 错误地跟踪更改(可能 Blazor 试图更新比需要更多的 DOM 对象)是没有道理的。事件限制和其他 Microsoft 建议(ASP.NET Core Blazor 性能最佳实践)没有帮助。

仅更新一个属性有很多细微差别:

• 个虚拟 DOM,树,子树,

• 个“循环”的变化(一个地方的变化导致另一个地方的变化,那里的变化导致第一个地方的变化),

• 将参数传递给组件并跟踪其更改、订阅/取消订阅的细微差别。

一个简单的 JavaScript 任务使用 Blazor 变得太复杂了。该框架只会妨碍这里。过度复杂不仅表现在 Blazor 中,还表现在其他框架中。如果您还没有看过它,请查看Svelte“Rich Harris — 重新思考反应性”的创建者的谈话。在视频中,有一个 React 应用程序刹车的示例:当进入文本字段时,DOM 会在运行中重建。在这里,当鼠标移动(拖动形状)时,DOM 会即时重建。

Vanilla-JavaScript 原型在 1000 个形状时没有表现出放缓的迹象。

在使用 Angular 多年之后,用原生 JavaScript 做一些事情似乎是一种回归。好吧:手动读取 HTML 属性并挂起处理程序。但是如何在没有组件、没有 IoC、没有模板的情况下进行开发?最重要的是——没有“反应性”?然而,撤军。过得够快。事实证明,有超越框架边界的生命,并且在某些方面更完整。

拒绝 TypeScript(TypeScript 编译器的)

类型检查、智能感知和其他工具——这就是 TypeScript 受到喜爱的原因。 TypeScript 有接口、文字,甚至是泛型。 TypeScript 是如此令人上瘾,以至于很容易忘记 TypeScript 只是描述 JavaScript 类型的一种方式。是的,它在typescriptlang.org的主页上说:“TypeScript 是具有类型语法的 JavaScript”。

JSDoc 提供所有相同的功能(类型检查、智能感知等)。

使用 JSDoc 进行“打字”的示例:

/**
 * @param {SVGGraphicsElement} svgEl
 * @param {number} transform
 * @param {SVGSVGElement=} svg pass if svgEl not yet in DOM
 * @returns {SVGTransform}
 */
 function ensureTransform(svgEl, transform, svg) {
    ...
    return ...;
}

进入全屏模式 退出全屏模式

你甚至可以在 TypeScript 中描述类型并在 js 文件中使用它们:

// ts-file
interface IDiagram {
    on(evtType: DiagramEventType,
        listener: EventListenerOrEventListenerObject): this;
    shapeAdd(param: PresenterShapeAppendParam): IDiagramShape;
    shapeDel(shape: IDiagramShape): void;
    shapeConnect(param: DiagramShapeConnectParam): void;
}
// js-file - Diagram implements IDiagram
/** @implements {IDiagram} */
export class Diagram {
    …
}

进入全屏模式 退出全屏模式

在这种情况下,“查找所有引用”和“重命名”以及“检查对象是否实现了接口”都将起作用(至少在 Visual Studio Code 中,一切都是开箱即用的)。

不使用 TypeScript 编译器的优点:

• JS代码正是你写的,

• 加速开发——无需等待编译,

• 不需要地图文件,更容易调试。

JSDoc 不如 TypeScript 简洁,语法不寻常,IDE 支持更差。

事实证明,混合方法很方便:

TypeScript 中 ts 文件中的* 个类型描述

• 用 JSDoc 编写的 JavaScript 中的真实代码。

dgrmajs

结果是一个 vanilla-JavaScript 库。

DgrmJS是一个用于创建 SVG 图表的 JavaScript 库。

该库的主要目标是在 BPM(业务流程管理)系统中设置工作流。

• 适用于桌面和移动设备

• 没有依赖关系

• 小号

以声明方式创建了* 个形状

大意

• 允许开发人员使用标准 SVG 对象和功能以声明方式创建将在图表中使用的形状。要创建形状,开发人员应该向标准 SVG 标记添加特殊的数据属性。因此,任何 svg 图像都可以用作图表中的形状。

• DgrmJS 调度事件,例如“选择形状”或“形状连接到另一个形状”。开发人员可以使用这些事件来实现自己的逻辑,例如,对工作流进行 JSON 描述。

“圆形”形状模板的声明性描述示例:

<g data-templ="circle">
    <circle ... />
    <text data-key="text"></text>

    <!--
        out connector
        data-connect-point - point into shape where connector line starts
        data-connect-dir - direction of connector line
    -->
    <circle
        data-connect="out"
        data-connect-point="60,0"
        data-connect-dir="right" ...>
    </circle>

    <!--
        in connector
    -->
    <circle
        data-connect="in"
        data-connect-point="-60,0"
        data-connect-dir="left" ...>
    </circle>
</g>

进入全屏模式 退出全屏模式

下图显示了使用“圆形”模板创建的两个形状(两个圆形)。通过单击图 — 显示输出连接器,您可以从中拉出连接线。将连接线的末端悬停在图窗上时,将显示输入连接器。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--fDuO_3YI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/uploads/articles/owe8pgjkksgyt7b1f6qg.gif)

将形状添加到图表的代码:

import { svgDiagramCreate } from './diagram/svg-presenter/svg-diagram-factory.js';
const diagram =
    svgDiagramCreate(document.getElementById('diagram'));
diagram.shapeAdd({
    templateKey: 'circle',
    position: { x: 120, y: 120 }
});

进入全屏模式 退出全屏模式

GitHub上的更多示例。

结论

这篇文章并不要求放弃框架或 TypeScript。因此,长期坚持相同的范式、方法、框架可能会“盲目”,缩小视野。通常我们甚至不会做出选择——尝试为 Blazor WebAssembly 或 Svelte 开发人员寻找职位空缺,您只能在 React 和 Angular(还有 Vue)之间进行选择。

有机会做实验很好。从“反应式方法”泡沫中脱颖而出是很有趣的。

关于dgrm.net的其他文章

• JavaScript 图表编辑器,从 PNG 图像(开源)呈现图表

• 用于 SVG 的 JavaScript 文本编辑器