scalajs_初体验

Posted 蒋航的博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scalajs_初体验相关的知识,希望对你有一定的参考价值。

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>

结果如下:
技术分享图片







以上是关于scalajs_初体验的主要内容,如果未能解决你的问题,请参考以下文章

Hibernate_01_初体验

python2.7 爬虫初体验爬取新浪国内新闻_20161130

Gitlab初体验

Django初体验

实验一 Python开发环境使用和编程初体验

Python+Django(Python Web项目初体验)