Sabes que asignar una propiedad a un elemento es muy útil y eficiente durante la construcción. básicamente, un elemento es un objeto que se puede asignar a cualquier cosa:
let el = document.createElement('div'); el.a = 1; el.b = []; class C{} el.c = new C()
y al probar esto realmente funciona bien, se obtienen resultados sólidos;
console.log(el.a); // 1
Busco una manera de observar en detalle y manipular estas acciones.
por ejemplo, quiero obtener un objeto de todos los valores asignados:
// something like el.assigned // {a: 1, b: [], ...}
y un método para eliminar todo (solo el complemento javascript asignado, no el predeterminado, como style
, parentNode
, etc.)
JsPlumb es una biblioteca de conectividad de elementos DOM archivada por SVG, la última versión 5.2.2 en Github, sin embargo, aún no es una versión del navegador. versión actualmente estable en CDN JS
dos API que vale la pena mencionar:
instance.connect
: crea y devuelve un objeto de instancia, mientras tanto, presenta el resultado SVG a Dom.jsPlumb.deleteConnection
, tome un objeto de conexión como parámetro y realice la eliminación. Pero, parece que lib usa el elemento para almacenar en caché en connect, y deleteConnection no separará todas las referencias por completo, y el código se volverá problemático. que después de la eliminación, ya no podemos conectarnos. En las pruebas, con la ayuda de @esqew, se atestigua que se asignó una variable _jsPlumbConnections
a elementos props, que la lib considera como algo que aún existe.
// when you tries to connect again, the lib seems verifying through the assigned props and run into bug TypeError: null is not an object (evaluating 'x.endpoints[0]') jsPlumb.min.js
this.plumb.bind('click', function(conn){ connect.connections.splice(connect.connections.indexOf(conn.cn), 1); jsPlumb.deleteConnection(conn); console.log(Object.keys(conn.cn.source)); attr_element({id: null, class: null}, conn.cn.source.backup); attr_element({id: null, class: null}, conn.cn.target.backup); connect.render(); }); // ["_jsPlumbConnections"] (1)
Sería bueno si abriera un problema en Github de jsPlumb para esto. No se menciona cuál es el problema específico, pero si hay un error, nos gustaría saberlo.
(editar)
es este problema?
https://github.com/jsplumb/jsplumb/issues/1077
no hay ningún error con jsPlumb aquí. No está llamando a delete desde la instancia propietaria de la conexión.
Probablemente no sea una buena idea (como estipulan los comentarios en el OP), pero probablemente pueda hacerlo usando el operador de propagación en un elemento creado con document.createElement
, que devuelve solo las claves que ha agregado en este manera:
var element = document.createElement('div'); element.a = 'foo'; element.b = 'bar'; element.c = 4; console.log({...element});
Luego puede eliminarlos todos iterando usando Object.keys()
:
var element = document.createElement('div'); element.a = 'foo'; element.b = 'bar'; element.c = 4; console.log({...element}); Object.keys(element).forEach(key => delete element[key]); console.log({...element});