jsPlumb

定义

jsPlumb是一个JavaScript库，用于让开发者在网页中以可视化方式连接页面元素，在元素之间绘制带端点的连线^[1]。它最早的版本发布于2009年，当时为兼容IE6采用VML技术绘制连线，后来的版本改用SVG，可运行在IE9及以上的浏览器中；1.7.10是最后一个支持IE8的版本^[1]。

该库分为两个版本：在GitHub上开源的Community Edition以MIT或GPLv2双许可方式发布，另有商业授权的Toolkit Edition，它在社区版之上封装了数据绑定层、布局与界面组件^[1][2]。

原理

jsPlumb的核心抽象是连接（Connection）对象，它由端点（Endpoint）、连接器（Connector）、锚点（Anchor）与覆盖层（Overlay）共同构成：锚点定义端点在元素上的逻辑位置，端点是一条连接线在元素上的可见起点或终点，连接器是实际绘制的线段，覆盖层则用于在连接器上附加标签、箭头等装饰元素^[3]。一条连接由两个端点、一个连接器和零个或多个覆盖层组成，每个端点各自关联一个锚点；库的公开接口主要暴露连接与端点，其余对象的创建与配置在内部完成^[3]。

在使用时，连接器、端点、锚点和覆盖层都以「定义」的形式传入，可以是一个名称字符串，也可以是名称加构造参数数组，还可以再附一组公共参数供多次调用复用^[3]。例如调用connect方法时提供源元素与目标元素即可建立连接；也可以通过addEndpoint为元素单独添加端点，或用makeSource、makeTarget把整个元素标记为连接的起点或终点^[4]。

连接器的默认实现有4种：直线、贝塞尔曲线、流程图（flowchart）和状态机（state machine）^[5]。其中流程图连接器由一系列水平或垂直的线段组成，其stub参数控制从端点出发的初始线段长度，默认30像素，cornerRadius参数可使拐角变为圆弧，它还支持起点与终点位于同一元素的回环连接^[5]。在5.x版本中，默认连接器改为直线，贝塞尔、状态机和流程图连接器需要单独导入^[6]。

发展历程

jsPlumb最初以jQuery插件的形态出现，提供把界面元素彼此「连接」起来的能力，效果类似雅虎管道（Yahoo Pipes），早期在现代浏览器中使用Canvas绘制，在旧浏览器中借助Google的ExplorerCanvas脚本，压缩后脚本体积约10.5K^[7]。项目早期托管在Google Code，从1.3.4版本起同时出现在GitHub上，代码在两个仓库之间同步^[8]。相关版权声明显示，该项目的开发可追溯至2010年前后，作者为Simon Porritt^[9]。

此后项目维护2.x与4.x两条分支：2.x系列延续2009年首版以来的JavaScript代码，4.x系列则是用TypeScript重写，2.15.3成为2.x分支的最后一个版本，之后该分支进入维护状态^[1]。从1.7.10升级到2.0.0的主要原因是移除了VML渲染器，不再支持IE6与IE8^[1]。

5.x版本同样是TypeScript重写，并以模块化为重点，将原本单一的库拆分为util、core、connector-bezier、connector-flowchart、browser-ui、browser-ui-lists等多个独立发布的npm包，其中browser-ui相当于2.x中的jsPlumb本体，负责把连接渲染为DOM中的SVG元素^[6]。这一版本不再遵循严格的语义化版本编号，官方不推荐在依赖声明中使用通配符^[1]。

应用

该库适用于需要把节点以连线关联起来的界面，例如流程图的绘制与映射关系图，可动态增删节点与连接、支持拖拽、提供直线与曲线等多种连线样式，并能监听点击、拖拽、连接等事件^[10]。常见的使用场景包括工作流程图绘制、项目管理工具、数据流程可视化与界面原型设计^[11][12]。

工具包版本在社区版之上补充了数据模型与界面能力，包括基于客户端模板的数据绑定、以有向图为核心的数据结构、可保存状态的平移缩放组件、缩略图组件，以及层次、弹簧、环形、气球、绝对定位等多种自动布局，并针对Angular、React、Vue等前端框架提供集成^[13]。节点可以使用任意HTML或SVG内容渲染，库会自动响应节点的实际尺寸，这一特点使它不仅可用于绘图，也可用于构建以连线为核心交互的应用^[14]。

局限

该库采用每条边和每个顶点各用一个独立元素的渲染方式，由此带来的代价主要是性能问题：官方说明中承认，在数据量很大的场景下这一方式存在劣势，通常当顶点数量达到数百个时性能才会成为明显顾虑，因此对超大图表的支持有限^[14]。

由于连接线依赖元素之间的相对位置，页面层叠顺序需要特别处理，官方文档提示z-index的设置有额外的注意事项^[1]。版本升级也存在迁移成本：从2.x到5.x，empty、deleteEveryEndpoint、getWidth、getHeight、updateClasses、setClass、droppable等方法被移除，默认连接器由贝塞尔改为直线，默认参数名由首字母大写改为驼峰式，且实例必须显式提供容器元素，不再从首个端点的offsetParent推断^[15]。此外，5.x把连接器拆分为独立包，未单独导入时无法使用贝塞尔、状态机与流程图连接器^[6]。

参见

• SVG —— jsPlumb在较新版本中用来绘制连接线与端点的矢量图形技术。

• TypeScript —— 该库4.x与5.x版本重写所采用的语言。

• JavaScript —— jsPlumb所基于的编程语言。

• 有向图 —— 工具包版本用来组织节点与连线数据的核心数据结构。

• 流程图 —— 该库最常见的应用形态之一。

• npm —— 该库各模块的分发渠道。