scalajs是将scala编译成js的编译器，目的在于使用scala的众多类库和强类型特征构建出稳定可扩展的js应用。
build.sbt构建文件如下：
enablePlugins(ScalaJSPlugin)
name := """scalajs"""
version := "1.0"
scalaVersion := "2.12.1"
libraryDependencies += "org.scala-js" %%% "scalajs-dom" % "0.9.1"
libraryDependencies += "be.doeraene" %%% "scalajs-jquery" % "0.9.1"
libraryDependencies += "com.lihaoyi" %%% "scalatags" % "0.6.2"
libraryDependencies += "com.thoughtworks.binding" %%% "dom" % "latest.release"
libraryDependencies += "com.thoughtworks.binding" %%% "binding" % "latest.release"
libraryDependencies += "com.thoughtworks.binding" %%% "futurebinding" % "latest.release"
addCompilerPlugin("org.scalamacros" % "paradise" % "2.1.0" cross CrossVersion.full)
project/plugins.sbt配置如下:
addSbtPlugin("org.scala-js" % "sbt-scalajs" % "0.6.14")
addSbtPlugin("com.github.mpeltonen" % "sbt-idea" % "1.6.0")
本demo额外使用scalatags库作为辅助。
scala部分
package webapp
import org.scalajs.dom.html
import scalatags.JsDom.all._
import scala.scalajs.js.JSApp
import scala.scalajs.js.annotation.JSExport
/**
* Created by nathan on 17/3/20.
*/
object TutorialApp extends JSApp{
def main():Unit ={
}
@JSExport
def test(target:html.Div):Unit={
val name=("蒋航","hangscer")
val d = div(
h1("Hello World!",color:="blue",fontFamily:="Monaco",fontSize:="14px"),
p(s"my name is ${name._1}"),
p(s"also,call me ${name._2}")
).render
target.appendChild(d)
}
}
在sbt中使用fastOptJS命令编译后,html部分引用该js文件即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titlehah</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="../target/scala-2.12/scalajs-fastopt.js"></script>
</head>
<body>
<div id="test_div_id">
</div>
<script type="text/javascript">
webapp.TutorialApp().test(document.getElementById("test_div_id"))
</script>
</body>
</html>
@JSExport注解目的在于在<script></script>标签中，原生js向scalajs中传參。
接下来这个例子是在去除某个list:List[Int]中相同的元素，去重算法。
package clientjs
import scala.scalajs.js.JSApp
import scala.scalajs.js.annotation.JSExport
/**
* Created by nathan on 17/3/20.
*/
object TutorialApp extends JSApp{
def main():Unit={
val list=qsort(List(1,2,1,34,45,4562,2131,34,324,435,34,21312,34,345435,34,242321,1))
println(list)
println(deMulti(list))
}
def qsort(list:List[Int]):List[Int]=list match {
case h::t=>qsort(t.filter(i=>i<h))++List(h)++qsort(t.filter(i=>i>=h))
case Nil=>Nil
}
def deMulti(list: List[Int]):List[Int]=list match {
case Nil=>Nil
case h::Nil=>List(h)
case h::t=>
if(h==t.head)
deMulti(t)
else
List(h)++deMulti(t)
}
}
开启scalatra后，在浏览器console中结果如下:
<script src="./public/javascripts/scalajs/my-scalatra-web-app-fastopt.js" type="text/javascript">
clientjs.TutorialApp().main()
</script>
需要将编译后的js文件引用html中。
演示ajax功能，本demo使用scalatra作为服务器，
//web服务器设置如下
class ScalatraBootstrap extends LifeCycle {
override def init(context: ServletContext) {
context.mount(new HiScalatraServlet,"/")
}
}
class HiScalatraServlet extends ScalatraServlet{
before("/hello"){
format_=("json")
}
//http://127.0.0.1:8080/hello
get("/hello"){
"""{"a":21312,"b":3243242}"""
}
}
//scalajs
package clientjs
import scala.scalajs.js.JSApp
import scala.scalajs.js.annotation.JSExport
/**
* Created by nathan on 17/3/20.
*/
object TutorialApp extends JSApp{
@JSExport
def funAjax():Unit={
import org.scalajs.jquery._
jQuery.get(url = "http://127.0.0.1:8080/hello",success = (data:Any)=>println("****"+data))
}
}
jQuery功能需要在html引用jquery.js文件。
html部分如下:
<script type="text/javascript" src="./public/javascripts/jquery.js"></script>
<script src="./public/javascripts/scalajs/my-scalatra-web-app-fastopt.js" type="text/javascript"></script>
<script type="text/javascript">
//页面一旦加载，立即发起get请求
clientjs.TutorialApp().funAjax()
</script>
结果如下：
