如何修改JSPlumb中现有Endpoint的ID或UUID？

我用以下代码创建JSPlumb端点：

var inEndpointUuid = "Endpoint_Target_" + $(element).attr('id');
var inEndpointOption = {
    isSource: false,
    isTarget: true,
    uuid: inEndpointUuid
};
var inEndpoint = jsPlumbInstance.addEndpoint(element, inEndpointOption);

需求是：当关联元素的ID变更时，同步更新对应Endpoint的UUID，同时修改受影响的连接信息。另外有两个约束：不想在自有模型中引入JSPlumb相关细节，且模型ID属性和JSPlumb的UUID属性绑定。

解决方案 #

• 监听元素ID变更
  用MutationObserver监听元素id属性的变化，一旦ID改变就触发更新逻辑：

  // 初始化监听实例
  const idObserver = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      // 只处理id属性的变更
      if (mutation.attributeName === 'id') {
        const targetElement = mutation.target;
        const oldElementId = mutation.oldValue;
        const newElementId = targetElement.id;
        // 调用更新函数
        syncEndpointAndConnections(targetElement, oldElementId, newElementId);
      }
    });
  });
  
  // 给目标元素开启监听（可批量给需要的元素添加）
  idObserver.observe(element, { attributes: true, attributeOldValue: true });
  

• 同步端点UUID与连接信息
  实现同步函数，找到旧端点、更新UUID，再处理关联的连接：

  function syncEndpointAndConnections(element, oldId, newId) {
    const oldEndpointUuid = `Endpoint_Target_${oldId}`;
    const newEndpointUuid = `Endpoint_Target_${newId}`;
  
    // 根据旧UUID获取端点
    const targetEndpoint = jsPlumbInstance.getEndpoint(oldEndpointUuid);
    if (!targetEndpoint) return;
  
    // 更新端点UUID
    targetEndpoint.setUuid(newEndpointUuid);
  
    // 找到所有以该端点为目标的连接，更新连接的目标UUID
    const relatedConnections = jsPlumbInstance.getConnections({ target: oldEndpointUuid });
    relatedConnections.forEach(conn => {
      conn.targetId = newEndpointUuid;
      // 刷新连接确保JSPlumb内部状态同步
      jsPlumbInstance.repaint(conn);
    });
  }
  

• 解耦自有模型与JSPlumb
  所有JSPlumb相关的逻辑都封装在监听和同步函数里，自有模型只需要负责更新元素的ID即可，不用关心JSPlumb的细节，完全通过元素ID的变化触发同步，保证模型ID和JSPlumb UUID的绑定关系。

内容的提问来源于stack exchange，提问作者Will Comeaux