其他分享
首页 > 其他分享> > jsplumb使用

jsplumb使用

作者:互联网

jsplumb使用

遇到的问题

在使用jsplumb插件创建流程图连接时,遇到了一个Uncaught RangeError: Maximum call stack size exceeded错误。

具体代码如下:

image

image

在设置overlays的值时,以变量的形式传递了一个配置项,由于该变量是个数据,所以传递的是引用。

jsplumb插件在连线之前,会先构造源节点和目标节点的相关数据,详细过程这里不介绍,展示两处引起错误的关键代码:

image

image

在jsplumb插件源码的第4782行和第4849行,这两处会向节点配置数据的overlays项中推入创建连接时传入的overlays配置。因为overlays配置传递的是引用,所以造成了页面上所有的节点共用了一个overlays配置,当页面中的连线次数达到一定程度后,overlays配置中的数据量是非常惊人的,如下如所示:

image

解决方法

解决方法很简单,错误是所有节点共用一个overlays造成的,只需要在创建连接时将overlays: flowConfig.Overlays的形式改为overlays: [...]即可。即每次创建连接时都生成一个新的数组。

在javascript中,或者说在编程语言中,引用是个比较特殊的机制,是一把双刃剑。使用引用时,要考虑到一些边界情况,安全地使用。

标签:插件,配置,jsplumb,引用,使用,overlays,节点
来源: https://www.cnblogs.com/lee3/p/14870924.html