¿Práctica recomendada para pasar variables del lado del servidor a javascript?

Question

He intentado 2 maneras en que ambas funcionan, pero ninguna de las dos se siente muy limpia.

La primera es tener algunos javascript en línea que acepta la variable de la plantilla de vista como:

var x = {{ myServersideVariable }}; 

(En mi caso estoy usando Jinja2 pero lo mismo se aplicaría a las plantillas de Django, la maquinilla de afeitar en. NET MVC3, Twig en PHP o cualquier número de motores de plantillas de visualización).

Obviamente, la parte inmunda acerca de esto es que hay javascript en la página html en lugar de en un archivo separado.

La otra opción que he usado es tener un campo oculto lleno del lado del servidor y luego consumido en el extremo de Javascript. Eso se siente un poco más limpio, pero no del todo, y también es un poco engorroso escribirlo.

¿Existe una solución mejor o son esas mis únicas opciones?

P.S.
Conozco JSON y, de hecho, a veces tengo que recurrir a la primera solución si necesito pasar algo que no sea primitivo. Así que puntos extra para una solución que admite pasar objetos JSON sin tener javascript en la página.

Answer 1

Utilice JSON para pasar variables del servidor al cliente, ya que es un formato muy popular y compatible. PHP, Python, Java y, lo que es más importante, JavaScript lo maneja muy bien. No tiene que preocuparse por el carácter que escapa, etc.

// PHP Example 

$vars = array(
    'a' => 'def', 
    'c' => 'xyz', 
    'e' => array(1, 34, 766, 844) 
); 

... 

var variablesFromServer = <?php echo json_encode($vars) ?>; 
// or using Twig 
var variablesFromServer = {{ vars|json_encode }}; 

alert(variablesFromServer.e[2]); // output: 766 

Parece muy similar en otros idiomas.

Siempre se puede usar un único punto de entrada (variable variablesFromServer) para pasar toda la información que se debe pasar del servidor al cliente. Eso haría su código limpio y fácil de mantener.

uso final - desde la perspectiva del cliente - también es muy fácil:

<script src="..."></script> 
<script src="..."></script> 
<script src="..."></script> 
<script> 
    var variablesFromServer = ...; 

    MyProject.setConfiguration(variablesFromServer.config); 
    MyProject.setRuntimeVariables(variablesFromServer.runtime); 
    MyProject.run(); 
</script> 

Answer 2

Una solución que se me acaba de ocurrir es de archivos javascript generados por el servidor. Me gusta desde una perspectiva de código limpio y separación de preocupaciones, pero puede matar cualquier tipo de almacenamiento en caché del navegador, por lo que dependerá de la importancia del rendimiento.

Answer 3

Sólo hay dos maneras correctas de insertar datos del servidor en javascript.

Expone los datos como un servicio. Puede tener un servicio REST o lo que quiera y consultarlo con ajax para extraer datos de él.

La otra opción es inyectar los datos en el HTML. Desea usar JavaScript para mejorar progresivamente su página. Entonces, los datos ya deben existir en el HTML, y su JavaScript lo extraerá del HTML.

Ahora, si opta por una aplicación pesada de JavaScript que no puede admitirse sin JavaScript, quiere que sus datos sean un servicio REST.

No desea inyectarlo en un campo oculto serializado porque su marcado html no tiene la semántica de los datos. No desea inyectarlo directamente en una declaración var x = ... porque luego compila su JavaScript sobre la marcha. Esto rompe la separación de preocupaciones.

Answer 4

Si los datos que desea hacer accesibles al JavaScript del lado del cliente se conocen en el momento en que se solicita/genera la página HTML y no cambiarán hasta la próxima vez que se solicite la página, entonces no usaría AJAX porque obviamente que da como resultado una solicitud adicional: una para obtener la página principal, y luego otra inmediatamente en carga para realizar la llamada AJAX para los datos. Eso reducirá el rendimiento y complicará inútilmente tanto el código del cliente como el del servidor.

No hay nada de malo en crear una o más entradas ocultas con los datos y acceder desde su código JavaScript. Dependiendo de los valores que quiera aprobar, puede ser más fácil inyectar los valores directamente en las variables JS en una sección <script> en su página, similar al ejemplo que proporciona, y personalmente me resulta más fácil de leer que las entradas ocultas porque la sección <script> será importante en la parte superior de la página en lugar de tener entradas ocultas en algún lugar entre el HTML, y hace que sea obvio que los valores están destinados a ser consumidos por su código en el lado del cliente y no simplemente enviados con otros datos del formulario. Pero de cualquier manera no es "sucio".

Si necesita obtener los datos del lado del servidor en su JavaScript como respuesta a algo que el usuario hizo en la página después de que se cargó (haciendo clic en un botón o algo), o si desea sondear el servidor a intervalos regulares para verificar si los valores han cambiado, luego desea usar AJAX.

EDITAR: tenga en cuenta que aunque puede generar dinámicamente archivos de script JS en el servidor y mantener sus valores dinámicos fuera de la página HTML a veces esto no funciona muy bien porque ciertos navegadores pueden confundirse y seguir usando un versión en caché de JS. He tenido que pasar esto con versiones anteriores de IE.