我想使用Protovis创建可视化,但是使用CoffeeScript而不是JavaScript编写(部分用于(x)->x
函数表示法,但也包括其他原因)
这可能吗?我会使用什么<script>
标签,是否有必要的脚本标签的特殊顺序?
感谢。
编辑:如果可能的话,我想避免手动编译步骤。
答案 0 :(得分:7)
稍微澄清一下问题:Protovis代码是使用特殊标记编写的,
<script type="text/javascript+protovis">
包含Protovis库之后。但是,此代码必须与HTML内联。浏览器无法识别text/javascript+protovis
类型,因此它只是忽略标记; Protovis找到它并读入标记包含的文本,而不尝试加载由src
链接的任何文件。
为什么Protovis会这样做?因为它通过代码运行基于正则表达式的解析器,将JavaScript 1.8代码转换为JavaScript 1.6代码;这样,您可以使用尖端的JavaScript功能,您的代码仍将在旧版浏览器中运行。很酷。
虽然您当然可以编写CoffeeScript代码,编译它,然后将其粘贴,这将构成一个非常繁琐的构建过程。好消息是,你不可能(不可能?)你将从使用JS 1.6功能之外的任何东西的CoffeeScript编译器中获取代码;大多数这些功能都以某种形式出现在CoffeeScript本身中。例如,数组理解,以及匿名函数的缩写语法。这意味着你可以只使用
<script type="text/javascript" src="myProtovisCode.js"></script>
用于已编译的CoffeeScript代码(或带有text/coffeescript
库的coffee-script.js
,用于开发)。
真正的诀窍是将Protovis示例及其不熟悉的JS 1.8语法转换为CoffeeScript。例如,
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))
使用缩写的JS 1.8匿名函数语法,其中function(x) x * x
是function(x) { return x * x; }
的简写。当然,这很容易转换为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))
如需进一步参考,请查看Mozilla文档中的New in JavaScript 1.8(Firefox是目前唯一本身支持JS 1.8的浏览器)。
答案 1 :(得分:2)
最好只在CoffeeScript中编写用于开发目的,然后编译成普通的JS以包含在<script>
中。
使用-c
标志进行编译:
coffee -c someFile.coffee
输出将在同一目录中为someFile.js
。
答案 2 :(得分:1)
好的我已经玩过这个了,我实际上可以使用带有Coffeescript的Protovis,使用<script type="text/coffeescript">
标签,该标签可以选择性地具有src="x.coffee"
属性。无需外部编译。显然,这需要浏览器在每次加载页面时将Coffeescript编译为Javascript,但是对于快速可视化任务,它对我有用。