5

me gustaría crear visualizaciones utilizando Protovis, pero escribir en CoffeeScript en lugar de JavaScript (en parte por la notación (x)->x función, sino también otras razones)Posible escribir el código Protovis en CoffeeScript?

Es esto posible? ¿Qué etiqueta de <script> usaría y hay algún orden especial de etiquetas de secuencia de comandos que sean necesarias?

Gracias.

Editar: Me gustaría evitar un paso de compilación manual si es posible.

Respuesta

7

Para aclarar un poco la pregunta: Código Protovis está escrito utilizando una etiqueta especial,

<script type="text/javascript+protovis"> 

después de la biblioteca Protovis se ha incluido. Sin embargo, este código debe con texto HTML. El navegador no reconoce el tipo text/javascript+protovis, por lo que simplemente ignora la etiqueta; Protovis lo encuentra y lo lee en el texto que contiene la etiqueta, sin intentar cargar ningún archivo vinculado por src.

¿Por qué Protovis hace esto? Porque ejecuta un analizador basado en expresiones regulares a través del código para convertir código JavaScript 1.8 a código JavaScript 1.6; De esta manera, puede usar características de JavaScript de vanguardia, y su código aún se ejecutará en navegadores más antiguos. Muy genial.

Si bien podría escribir código CoffeeScript, compilarlo y luego pegarlo, eso generaría un proceso de construcción muy tedioso. La buena noticia es que es poco probable (¿imposible?) Que obtenga el código del compilador CoffeeScript que utiliza algo más que las características de JS 1.6; la mayoría de esas características están cocidas, de alguna forma, en CoffeeScript. Por ejemplo, comprensiones de matriz y una sintaxis abreviada para funciones anónimas. Eso significa que usted puede sólo tiene que utilizar

<script type="text/javascript" src="myProtovisCode.js"></script> 

para su código compilado CoffeeScript (o text/coffeescript con la biblioteca coffee-script.js, para el desarrollo).

El verdadero truco está en traducir los ejemplos de Protovis, con su desconocida sintaxis JS 1.8, a CoffeeScript. Por ejemplo,

cell.add(pv.Dot) 
    .def("x", function(k0, k1) pv.Scale.linear(flowers, function(d) d[k0]).range(0, s)) 
    .def("y", function(k0, k1) pv.Scale.linear(flowers, function(d) d[k1]).range(0, s)) 

utiliza la sintaxis función anónima abreviado JS 1.8, donde function(x) x * x es la abreviatura de function(x) { return x * x; }.Por supuesto, esto se traduce fácilmente a CoffeeScript:

cell.add(pv.Dot) 
    .def("x", (k0, k1) -> pv.Scale.linear(flowers, (d) -> d[k0]).range(0, s)) 
    .def("y", (k0, k1) -> pv.Scale.linear(flowers, (d) -> d[k1]).range(0, s)) 

Para mayor referencia, echa un vistazo a New in JavaScript 1.8 encima en documentos de Mozilla (Firefox es el único navegador que soporta de forma nativa JS 1.8 en la actualidad).

2

Es mejor escribir en CoffeeScript solo para fines de desarrollo, y luego compilar en JS simple para incluir en <script>.

Compilar usando la bandera -c:

coffee -c someFile.coffee 

La salida será someFile.js en el mismo directorio.

+0

Pregunta editada: me gustaría evitar un paso de compilación manual, si es posible ... – nicolaskruchten

+0

Puede usar Sinatra o algo similar para representar la página y convertir coffeescript a javascript sobre la marcha. –

1

Aceptar He jugado con esta un poco y, de hecho, puedo usar Protovis con CoffeeScript, usando una etiqueta <script type="text/coffeescript">, que puede tener opcionalmente un atributo src="x.coffee". No se requiere compilación externa. Claramente, esto requiere que el navegador compile el Coffeescript a Javascript cada vez que se carga la página, pero para las tareas de visualización rápida me funciona.

+0

Ver mi respuesta publicada simultáneamente para una explicación más detallada. Tenga en cuenta que los scripts 'text/coffeescript' se ejecutan después de todos los demás scripts, independientemente de dónde coloque las etiquetas, porque se cargan mediante Ajax desde' coffee-script.js'. –

Cuestiones relacionadas