JointJS自定义组件NameSpace的问题

前言

搬运Rappid官方demo的时候，频繁出现undefined的问题，查看了下，与自定义组件有关。

问题位置

在joint.shapes.app.js文件中，主要实现的是自定义组件并添加到shapes的功能。

    joint.shapes.standard.Ellipse.define('app.CircularModel', ...);

如上代码的功能：基于standard命名空间下的Ellipse组件，自定义CircularModel组件，并在shapes下创建app命名控件，将自定义控件的构造函数添加进去。实现后的结果应该如下：

app:{CircularModel: ƒ}
basic:{Generic: ƒ, Rect: ƒ, TextView: ƒ, Text: ƒ, Circle: ƒ, …}
chess:{KingWhite: ƒ, KingBlack: ƒ, QueenWhite: ƒ, QueenBlack: ƒ, RookWhite: ƒ, …}
devs:{Model: ƒ, Atomic: ƒ, Coupled: ƒ, Link: ƒ}
erd:{Entity: ƒ, WeakEntity: ƒ, Relationship: ƒ, IdentifyingRelationship: ƒ, Attribute: ƒ, …}
fsa:{State: ƒ, StartState: ƒ, EndState: ƒ, Arrow: ƒ}
logic:{Gate: ƒ, IO: ƒ, Input: ƒ, Output: ƒ, Gate11: ƒ, …}
org:{Member: ƒ, Arrow: ƒ}
pn:{Place: ƒ, PlaceView: ƒ, Transition: ƒ, Link: ƒ}
standard:{Rectangle: ƒ, Circle: ƒ, Ellipse: ƒ, Path: ƒ, Polygon: ƒ, …}
uml:{Class: ƒ, ClassView: ƒ, Abstract: ƒ, AbstractView: ƒ, Interface: ƒ, …}
__proto__:Object

基于Vue的思想，在component中import或者require插件jointjs，并不能将自定组件的构造函数添加到shapes中。

  mounted: function () {
    var joint=require('jointjs')
    joint.shapes.standard.Ellipse.define('app.CircularModel', ...)
}

导致后面引用joint.shapes.app的时候出现undefined的问题，但是官方提供的demo中就不存在这样的问题。

解决方案

尝试几种解决方案：

1.失败，var joint=require('./js/rappid')，猜测和库包有关系，开源的jointjs不行，那就试试收费的rappid.js，毕竟官方demo中也是这么用的；

2.失败，依赖保持一致，官方demo中的package.json中的依赖如下：

    "backbone": "1.4.0",
    "canvg-rappid": "1.0.3",
    "dagre": "0.8.4",
    "graphlib": "2.1.7",
    "jointjs": "3.2.0",
    "jquery": "3.5.1",
    "lodash": "4.17.14",
    "ws": "6.1.0"
  },
  "devDependencies": {
    "@types/backbone": "1.4.1",
    "@types/graphlib": "2.1.5",
    "@types/jquery": "3.3.30",
    "@types/lodash": "4.14.135"
  }

3.不明，说是jointjs 3的原因，手动创建命名空间并添加进去，这是在网上搜出来的解决方案，和我想要的差距太大了，所以不予尝试。

4.成功，与全局变量有关，在main.js中引入jointjs或者rappid，创建全局变量，问题就迎刃而解了，其实参考官方在<head>中引入script中引入的机制，倒也是合情合理，具体原因，不明。

window.joint = require('jointjs')

吐槽

官网提供的getStarted太敷衍了。

最后编辑于：2020.11.28 14:06:37