blu*_*sky 1 javascript scala d3.js scala.js
我使用以下方法创建了一个ScalaJS项目:
http://www.scala-js.org/doc/tutorial.html
阅读http://www.scala-js.org/doc/faq.html上的文档,似乎没有描述创建和调用JavaScript函数？
如何创建JavaScript函数并调用它？
我将手动将d3添加到index.html的head元素:
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
但是如何使用ScalaJS创建以下代码？
$(document).ready(function () {
var svgContainer = d3.select("body").append("svg")
.attr("width", 1200)
.attr("height", 1200)
.attr("text-align", "center");
testFunction(svgContainer);
});
<script>
function testFunction(svgContainer) {
alert(svgContainer)
}
</script>
整个index.html:
<!DOCTYPE html>
<html>
<head>
<title>Example Scala.js application</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<h1>Example Scala.js application - full-optimized version</h1>
<p>After having compiled and full-optimized properly the code for the application
(using `sbt fullOptJS`), you should see "It works" herebelow.
See README.md for detailed explanations.</p>
<div id="playground">
</div>
<script type="text/javascript" src="./target/scala-2.10/my-project-fastopt.js"></script>
<script type="text/javascript" src="./target/scala-2.10/my-project-launcher.js"></script>
</body>
</html>
更新:
object ScalaJSExample extends js.JSApp {
def main(): Unit = {
jQuery(dom.document).ready { () => {
val svgContainer = "d3.select(\"body\").append(\"svg\").attr(\"width\", 1200).attr(\"height\", 1200).attr(\"text-align\", \"center\")";
val function = "callFunction(svgContainer)";
}
}
}
def callFunction(svgContainer): Unit = {
}
}
在callFunction应该输入svgContainer时,是否callFunction会在使用时创建为JavaScript函数fastOptJS？
在jQuery(dom.document).ready {,这就是创造的正确方法svgContainer和testFunction？
在Scala.js中,scala.FunctionNs可以隐式转换为js.FunctionNs和back,所以你基本上不需要做任何事情:只需将lambda传递给JavaScript调用.本教程的第5步中有一个示例,位于"Scala.js中的设置UI"下.对于您的代码,它看起来像这样:
jQuery(dom.document).ready { () =>
val svgContainer = ...
}
您可以在调用JavaScript指南中找到有关此内容的更多信息.
更新:
以下是整个JavaScript代码段的翻译:
import scala.scalajs.js
import org.scalajs.dom // see https://github.com/scala-js/scala-js-dom
import org.scalajs.jquery.jQuery // see https://github.com/scala-js/scala-js-jquery
object ScalaJSExample extends js.JSApp {
val d3 = js.Dynamic.global.d3 // assuming you don't have static types for d3, here
def main(): Unit = {
jQuery(dom.document).ready { () =>
val svgContainer =
d3.select("body").append("svg")
.attr("width", 1200)
.attr("height", 1200)
.attr("text-align", "center")
testFunction(svgContainer)
}
}
def testFunction(svgContainer: js.Dynamic): Unit = {
dom.alert(svgContainer.toString())
}
}
如你看到的:
ready(),dom.document并dom.alert以静态类型的方式.js.Dynamic正常语法(不是字符串)以动态类型方式操作JavaScript值def.你是否编译为JavaScript函数对你来说无关紧要:只需编写你的Scala代码而不考虑它,编译器就能完成它的工作.| 归档时间： |
|
| 查看次数： |
2244 次 |
| 最近记录： |