StarportCarrier 星港搬运器

• 用于创建星港的全局飞行器；

StarportCraft 星港飞行器

• 用于将星港从老位置移动到新位置它的位置大小和StarportProxy组件相同；
• 获取portMap中的存储的Starport的上下文信息；

Starport 星港

• 用于创建星港容器，每个星港容器都有一个唯一的标识；
• 通过获取插槽组件，创建星港代理组件，同时将插槽组件添加到全局状态portMap中；

StarportProxy 星港代理

• 用于创建星港元素；
• 记录StarportProxy的dom信息，到portMap中；
• 用来存放StarportCraft的Teleport移动的元素；
• 跳转路由后，获取指定port的Starport,获取当前的StarportProxy的dom信息；

createInternalState

• 根据星港唯一标识获取星港实例/创建星港实例/删除星港实例；

createStarportInstance

• 创建星港实例，所有状态参数；

动画流程

1. 创建StarportCarrier,初始化时portMap为空,所以不会创建StarportCraft;

2. 跳转人默认路由,创建Starport,Starport内部创建StarportProxy,StarportProxy内部会创建StarportInstance并存入portMap,并且安装之后将StarportProxy的根元素 dom 对象赋值给StarportInstance属性el,因为StarportCarrier渲染函数中使用了portMap,所以当portMap更新后,会重新渲染,创建StarportCraft,其中会拿到安装的StarportProxy的 dom 对象实例，所以可以获取 dom 的尺寸位置,就会将StarportCraft组件移动到StarportProxy位置,StarportCraft中创建的Teleport会将插槽组件,移动到对应的StarportProxy中创建的目标DOM中:

   • 初始化星港starport生成对应的飞行器StarportCraft这时有了飞行器的初始化样式也就是对应的星港的样式；

3. 跳转页面时:

   • RouterView中切目标换路由,创建其中的Starport:
     • 获取Starportproxy的位置尺寸信息;
     • 首先将飞行器display:block，因为飞行器落地后，会display:none飞行器；
     • 飞行器将星港元素添加到Teleport组件插槽中，切换StarportCraft飞行器的样式到目标星港样式；
     • 到目的地后display:none飞行器，将Teleport中的插槽内容星港放到目标位置；