javascript - examples - Posible escribir código Protovis en CoffeeScript?

github d3

Question

Me gustaría crear visualizaciones usando Protovis, pero escribiendo en CoffeeScript en lugar de JavaScript (en parte para la notación de función (x)->x pero también otras razones)

es posible? ¿Qué etiqueta <script> usaría y hay algún orden especial de etiquetas de script que sea necesario?

Gracias.

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

Answer 1

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

Compila usando el indicador -c :

coffee -c someFile.coffee

El resultado será someFile.js en el mismo directorio.

Answer 2

OK He jugado un poco con esto y de hecho puedo usar Protovis con Coffeescript, usando una etiqueta <script type="text/coffeescript"> , que opcionalmente puede tener 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.

Answer 3

Para aclarar un poco la pregunta: el código Protovis está escrito usando una etiqueta especial,

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

después de que se haya incluido la biblioteca Protovis. Sin embargo, este código debe estar en línea con el 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 compilació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 puedes simplemente usar

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

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

El verdadero truco es 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 abreviada de la función anónima de JS 1.8, donde la function(x) x * x es la abreviatura de la function(x) { return x * x; } 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 obtener más información, consulte Nuevo en JavaScript 1.8 en los documentos de Mozilla (Firefox es el único navegador que actualmente admite JS 1.8 en este momento).