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_初体验的更多相关文章
- .NET平台开源项目速览(15)文档数据库RavenDB-介绍与初体验
不知不觉,“.NET平台开源项目速览“系列文章已经15篇了,每一篇都非常受欢迎,可能技术水平不高,但足够入门了.虽然工作很忙,但还是会抽空把自己知道的,已经平时遇到的好的开源项目分享出来.今天就给大家 ...
- Xamarin+Prism开发详解四：简单Mac OS 虚拟机安装方法与Visual Studio for Mac 初体验
Mac OS 虚拟机安装方法 最近把自己的电脑升级了一下SSD固态硬盘,总算是有容量安装Mac 虚拟机了!经过心碎的安装探索,尝试了国内外的各种安装方法,最后在youtube上找到了一个好方法. 简单 ...
- Spring之初体验
Spring之初体验 Spring是一个轻量级的Java Web开发框架,以IoC(Inverse of Control 控制反转)和 ...
- Xamarin.iOS开发初体验
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKwAAAA+CAIAAAA5/WfHAAAJrklEQVR4nO2c/VdTRxrH+wfdU84pW0
- 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...
- 【Knockout.js 学习体验之旅】（1）ko初体验
前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...
- 在同一个硬盘上安装多个 Linux 发行版及 Fedora 21 、Fedora 22 初体验
在同一个硬盘上安装多个 Linux 发行版 以前对多个 Linux 发行版的折腾主要是在虚拟机上完成.我的桌面电脑性能比较强大,玩玩虚拟机没啥问题,但是笔记本电脑就不行了.要在我的笔记本电脑上折腾多个 ...
- 百度EChart3初体验
由于项目需要在首页搞一个订单数量的走势图,经过多方查找,体验,感觉ECharts不错,封装的很细,我们只需要看自己需要那种类型的图表,搞定好自己的json数据就OK.至于说如何体现出来,官网的教程很详 ...
- Python导出Excel为Lua/Json/Xml实例教程（二）：xlrd初体验
Python导出Excel为Lua/Json/Xml实例教程(二):xlrd初体验 相关链接: Python导出Excel为Lua/Json/Xml实例教程(一):初识Python Python导出E ...
随机推荐
- PHP 使用redis实现秒杀
PHP 使用redis实现秒杀 使用redis队列,因为pop操作是原子的,即使有很多用户同时到达,也是依次执行,推荐使用(mysql事务在高并发下性能下降很厉害,文件锁的方式也是) 先将商品库存如队 ...
- sublime text 3 ctrl+b浏览器启动html
sublime text 2 和3 都可以快速设置浏览器启动,本人在这里介绍如何不下插件启动浏览器.第一步:打开Tool-->build system ---> new build sy ...
- javassist：字节码编辑器工具
简介: javassist是一款可以在运行时生成字节码的工具,可以通过它来构造一个新的class对象.method对象,这个class是运行时生成的.可以通过简短的几行代码就可以生成一个新的class ...
- Coursera课程 Programming Languages, Part A 总结
Coursera CSE341: Programming Languages 感谢华盛顿大学 Dan Grossman 老师 以及 Coursera . 碎言碎语 这只是 Programming La ...
- NOIP2017普及组解题报告
刚参加完NOIP2017普及,只考了210,于是心生不爽,写下了这篇解题报告...(逃 第一次写博,望dalao们多多指导啊(膜 第一题score,学完helloworld的人也应该都会吧,之前好多人 ...
- 【NOI2015】程序自动分析
https://www.luogu.org/problem/show?pid=1955 并查集+离散化. 先执行所有x=y问题,即合并x和y. 再依次执行所有x!=y问题,即查询x和y是否处于同一集合 ...
- 数据模型与查询语言 ------《Designing Data-Intensive Applications》读书笔记2
数据模型是开发软件的最重要的部分,因为它们对应用程序有着深远的影响:不仅是软件的编写方式,而且也影响我们如何解决的问题的方式.第二篇读书笔记,我们聊一聊数据模型的设计. 1.数据模型的分层 作为一个开 ...
- JAVA基础再回首（二十五）——Lock锁的使用、死锁问题、多线程生产者和消费者、线程池、匿名内部类使用多线程、定时器、面试题
JAVA基础再回首(二十五)--Lock锁的使用.死锁问题.多线程生产者和消费者.线程池.匿名内部类使用多线程.定时器.面试题 版权声明:转载必须注明本文转自程序猿杜鹏程的博客:http://blog ...
- 微信公众号开发系列-获取微信OpenID
在微信开发时候在做消息接口交互的时候须要使用带微信加密ID(OpenId),下面讲讲述2中类型方式获取微信OpenID.接收事件推送方式和网页授权获取用户基本信息方式获取. 1.通过接收被动消息方式获 ...
- UVA - 11396 Claw Decomposition（二分图染色）
题目大意:给你一张无向图,每一个点的度数都是3. 你的任务是推断是否能把它分解成若干个爪(每条边仅仅能属于一个爪) 解题思路:二分图染色裸题.能够得出:爪的中心点和旁边的三个点的颜色是不一样的 #in ...