如何使用Scala.js創建JavaScript函數？

我創建使用ScalaJS項目：如何使用Scala.js創建JavaScript函數？

http://www.scala-js.org/doc/tutorial.html

在http://www.scala-js.org/doc/faq.html閱讀的文檔，它似乎並不認爲創建和調用JavaScript功能描述？

如何創建JavaScript函數並調用它？

我將手動頭元素添加維生素D3的index.html：

<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的正確方法嗎？

來源

2014-12-07 blue-sky

在Scala.js中，scala.FunctionN s可以隱式轉換爲js.FunctionN，因此基本上不需要執行任何操作：只需將lambda傳遞給JavaScript調用即可。在「Scala.js中的安裝UI」下有一個這樣的示例in Step 5 of the the tutorial。對於你的代碼，它看起來像這樣：

jQuery(dom.document).ready {() => 
    val svgContainer = ... 
}

你可以在calling JavaScript guide找到更多的信息。

更新：

這裏是你的整個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()) 
    } 
}

正如你可以看到：

對於具有靜態類型Scala.js庫（如DOM和jQuery），最好使用這些靜態類型。以靜態類型的方式使用ready()，dom.document和dom.alert。
當你沒有靜態類型，你可以使用js.Dynamic來操縱動態類型方式的JavaScript值，使用正常的語法（而不是字符串）
您與def定義功能。不管你是否將它們編譯爲JavaScript函數都不重要：只需編寫Scala代碼而不用考慮它，編譯器就可以完成它的工作。

來源

2014-12-07 13:58:34 sjrd

請參閱問題更新，我不確定如何將svgContainer參數傳遞給函數並調用相同的函數？ – 2014-12-07 14:38:58

@ blue-sky我已經更新了我的答案。 – sjrd 2014-12-07 14:56:41

如何使用Scala.js創建JavaScript函數？

回答

相關問題