2012-03-14 24 views
19

como dice el título, si quito una etiqueta de secuencia de comandos desde el DOM usando:¿jQuery .remove() borra el javascript cargado cuando se usa para eliminar una etiqueta de script?

$('#scriptid').remove(); 

¿Tiene el Javascript en sí permanecen en la memoria o se trata de limpiar?

O ... ¿no entiendo por completo la forma en que los navegadores tratan javascript? Lo cual es bastante posible.

Para aquellos interesados ​​en mi razón de hacer ver a continuación:

estoy moviendo algunas interacciones de JavaScript comunes de archivos de script estático en generadas dinámicamente los de PHP. Que se cargan a pedido cuando un usuario los requiere.

La razón para hacer esto es mover la lógica del servidor y ejecutar un pequeño script, devuelto desde el servidor, al lado del cliente. En lugar de tener una secuencia de comandos grande que contiene una gran cantidad de lógica, lado del cliente.

Este es un enfoque similar a lo que hace facebook ...

Facebook talks frontend javascript

Si echamos un diálogo sencillo, por ejemplo. En lugar de generar el html en javascript, adjuntarlo al dom, y luego usar el widget de diálogo de jqueryUI para cargarlo, ahora estoy haciendo lo siguiente.

  • petición Ajax se hace a dialog.php
  • Server genera HTML y JavaScript que es específica para este cuadro de diálogo a continuación, los codifica como JSON
  • JSON se devuelve al cliente.
  • El código HTML se agrega al <body> y una vez que se muestra, el javascript también se agrega al DOM.

El javascript se ejecuta automáticamente al insertarlo y se abre el diálogo dinámico.

Hacer esto ha reducido drásticamente la cantidad de javasript en mi página, sin embargo, me preocupa la limpieza del javascript insertado.

Obviamente una vez que el cuadro de diálogo se ha cerrado se elimina de la DOM utilizando jQuery:

$('#dialog').remove();

El javascript se añade con un ID y también eliminar esto desde el DOM a través del mismo método.

Sin embargo, como se mencionó anteriormente, ¿con jQuery's .remove() en realidad se borra el javascript de la memoria o simplemente se elimina el elemento <script> del DOM?

Si es así, ¿hay alguna forma de solucionar esto?

+0

Si usted está preocupado por la cantidad de JS para crear un cuadro de diálogo , podrías mirar a EJS. Esto le permitirá crear plantillas HTML desde JS. – westo

+0

Gracias westo, yo uso JsRender para plantillas del lado del cliente. sin embargo, el enfoque que he mencionado anteriormente no es solo para diálogos, es para muchas otras interacciones donde las plantillas no son adecuadas. Tal vez el ejemplo de diálogo no fue bueno. – gordyr

Respuesta

19

No. Una vez que se carga una secuencia de comandos, los objetos y funciones que define se guardan en la memoria. La eliminación de un elemento de script no elimina los objetos que define. Esto está en contraste con los archivos CSS, donde eliminar el elemento elimina los estilos que define. Eso se debe a que los nuevos estilos pueden volver a fluir fácilmente. ¿Te imaginas lo difícil que sería averiguar qué etiqueta de script creó y cómo eliminarla?

EDITAR: Sin embargo, si tiene un archivo que define myFunction, entonces agrega otra secuencia de comandos que redefine myFunction a otra cosa, se mantendrá el nuevo valor. Puede eliminar la etiqueta script anterior si desea mantener limpio el DOM, pero eso es todo lo que elimina.

EDIT2 EDIT2: La única manera real de "limpiar" las funciones que puedo pensar es tener un archivo JS que básicamente llame a delete window.myFunction para cada objeto posible y función que puedan definir sus otros archivos de comandos. Por razones obvias, esta es una muy mala idea.

+0

De hecho, lamentablemente imaginé que este sería el caso. ¿Puedes pensar en alguna solución para esto? o, para el caso anterior, ¿sería mejor incrementar la identificación de los diálogos y tener el javascript dinámico mirror ese elemento id? ¿Asegurando así que no haya posibles referencias duplicadas? ¿O sientes que todo este enfoque necesita un replanteamiento? – gordyr

+0

Gracias Kolink - Acabo de ver su edición. Solo para aclarar, si fuera a usar el widget $ ('# dialog'). Dialog() de jQueryUI por segunda vez en el recién creado elemento #dialog, con JavaScript obviamente diferente ... ¿Simplemente reemplazaría el antiguo? Si es así, esto es perfecto. – gordyr

+0

¿Cuál es el motivo obvio de eliminar es una mala idea? Además, ¿no se ocuparía el recolector de basura de los objetos que no tienen nada que hacer referencia a ellos? Parece que habría que explotar al recolector de basura. –

4

Si sus scripts ya se han ejecutado, eliminar los elementos DOM no los eliminará. Vaya a cualquier página con JavaScript, abra su consola javascript preferida y escriba $ ("script"). Remove(). Todo sigue funcionando.

Y esto demuestra respuesta @Kolink:

http://jsfiddle.net/X2mk8/2/

HTML:

<div id="output"></div> 

<script id="yourDynamicGeneratedScript"> 
    function test(n) { 
    $output = $("#output") 
    $output.append("test " + n + "<br/>") 
    } 
    test(1); 
</script> 

Javascript:

$("script").remove(); 
// or $("#yourDynamicGeneratedScript").remove(); 

test(2); 
test(3); 
test(4); 

function test(n) { 
    $output = $("#output") 
    $output.append("REDEFINED! " + n + "<br/>") 
} 

test(5); 
test(6); 
test(7); 
+0

Gracias tomasmuller. El ejemplo es muy apreciado. :) – gordyr

+0

Y dependiendo del caso, tal vez otro enfoque sea construir su sistema como una aplicación de una sola página, usando Backbone.js, por ejemplo. Mira [esta muy buena publicación explicando la arquitectura detrás de Trello] (http://blog.fogcreek.com/the-trello-tech-stack/). – tomasmuller

Cuestiones relacionadas