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_初体验的更多相关文章

  1. .NET平台开源项目速览(15)文档数据库RavenDB-介绍与初体验

    不知不觉,“.NET平台开源项目速览“系列文章已经15篇了,每一篇都非常受欢迎,可能技术水平不高,但足够入门了.虽然工作很忙,但还是会抽空把自己知道的,已经平时遇到的好的开源项目分享出来.今天就给大家 ...

  2. Xamarin+Prism开发详解四：简单Mac OS 虚拟机安装方法与Visual Studio for Mac 初体验

    Mac OS 虚拟机安装方法 最近把自己的电脑升级了一下SSD固态硬盘,总算是有容量安装Mac 虚拟机了!经过心碎的安装探索,尝试了国内外的各种安装方法,最后在youtube上找到了一个好方法. 简单 ...

  3. Spring之初体验

                                     Spring之初体验 Spring是一个轻量级的Java Web开发框架,以IoC(Inverse of Control 控制反转)和 ...

  4. Xamarin.iOS开发初体验

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKwAAAA+CAIAAAA5/WfHAAAJrklEQVR4nO2c/VdTRxrH+wfdU84pW0

  5. 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...

  6. 【Knockout.js 学习体验之旅】（1）ko初体验

    前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...

  7. 在同一个硬盘上安装多个 Linux 发行版及 Fedora 21 、Fedora 22 初体验

    在同一个硬盘上安装多个 Linux 发行版 以前对多个 Linux 发行版的折腾主要是在虚拟机上完成.我的桌面电脑性能比较强大,玩玩虚拟机没啥问题,但是笔记本电脑就不行了.要在我的笔记本电脑上折腾多个 ...

  8. 百度EChart3初体验

    由于项目需要在首页搞一个订单数量的走势图,经过多方查找,体验,感觉ECharts不错,封装的很细,我们只需要看自己需要那种类型的图表,搞定好自己的json数据就OK.至于说如何体现出来,官网的教程很详 ...

  9. Python导出Excel为Lua/Json/Xml实例教程（二）：xlrd初体验

    Python导出Excel为Lua/Json/Xml实例教程(二):xlrd初体验 相关链接: Python导出Excel为Lua/Json/Xml实例教程(一):初识Python Python导出E ...

随机推荐

  1. openvpn部署之快速入门实战+一键部署openvpn脚本

    个人原创禁止转载 软件环境: Centos6.9 x64 openvpn-2.4.3-1.el6.x86_64.rpm easy-rsa-2.2.2-1.el6.noarch.rpm    #推荐使用 ...

  2. let and const

    let 和 const 命令 let 命令 基本用法 ES6 新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. { let a = 10; v ...

  3. RAC(ReactiveCocoa)使用方法(一)

    RAC(ReactiveCocoa)使用方法(一) RAC(ReactiveCocoa)使用方法(二) 什么是RAC? 最近回顾了一下ReactiveCocoa的方法,也看了一些人的文章,现写篇文章总 ...

  4. JavaEE中的MVC（一）Dao层彻底封装

    最近Android工作实在难找,考虑是不是该转行做Java了,今天开始,花几天的事件,研究一下JavaEE各层优化. 首先是Dao层 增删改方法封装 使用PreparedStatement执行一条Sq ...

  5. 【JDK1.8】JDK1.8集合源码阅读——TreeMap（二）

    一.前言 在前一篇博客中,我们对TreeMap的继承关系进行了分析,在这一篇里,我们将分析TreeMap的数据结构,深入理解它的排序能力是如何实现的.这一节要有一定的数据结构基础,在阅读下面的之前,推 ...

  6. 4.2 例题: 统计字符数 poj2247

    问题描述 判断一个由 a-z 这 26 个字符组成的字符串中哪个字符出现的次数最多 输入:第 1 行是测试数据的组数 n,每组测试数据占 1 行,是一个由 a-z 这 26 个字符组 成的字符串,每组 ...

  7. .Net Core 2.0 EntityFrameworkCore CodeFirst入门教程

    最近难得有时间闲下来,研究了一下.net core 2.0,总的来说,目前除了一些第三方的库不支持外,基本上可以满足我们的项目需求了! 我们就以一个网站开发为例,搭建一个简单的三层架构,先熟悉一下.n ...

  8. WebVR认识

    什么是WebVR WebVR是一种开放标准,可以在浏览器中体验VR,目标是让每个人都能轻松进入虚拟现实体验.

  9. Promise原理与实现探究的一种思路

    写在前面 这个文章,展现的是一个实现Promise的思路,以及如何发现和处理问题的情境. 从现有的Promise分析 如果我们想要自己实现一个简单的Promise,那现有规范规定的Promise肯定是 ...

  10. 使用PowerApps快速构建基于主题的轻业务应用 —— 进阶篇

    作者:陈希章 发表于 2017年12月14日 在上一篇 使用PowerApps快速构建基于主题的轻业务应用 -- 入门篇 中,我用了三个实际的例子演示了如何快速开始使用PowerApps构建轻业务应用 ...