jsplumb使用
作者:互联网
jsplumb使用
遇到的问题
在使用jsplumb插件创建流程图连接时,遇到了一个Uncaught RangeError: Maximum call stack size exceeded错误。
具体代码如下:
在设置overlays的值时,以变量的形式传递了一个配置项,由于该变量是个数据,所以传递的是引用。
jsplumb插件在连线之前,会先构造源节点和目标节点的相关数据,详细过程这里不介绍,展示两处引起错误的关键代码:
在jsplumb插件源码的第4782行和第4849行,这两处会向节点配置数据的overlays项中推入创建连接时传入的overlays配置。因为overlays配置传递的是引用,所以造成了页面上所有的节点共用了一个overlays配置,当页面中的连线次数达到一定程度后,overlays配置中的数据量是非常惊人的,如下如所示:
解决方法
解决方法很简单,错误是所有节点共用一个overlays造成的,只需要在创建连接时将overlays: flowConfig.Overlays
的形式改为overlays: [...]
即可。即每次创建连接时都生成一个新的数组。
在javascript中,或者说在编程语言中,引用是个比较特殊的机制,是一把双刃剑。使用引用时,要考虑到一些边界情况,安全地使用。
标签:插件,配置,jsplumb,引用,使用,overlays,节点 来源: https://www.cnblogs.com/lee3/p/14870924.html