Kotlin 全栈开发之 前端 JavaScrip

Kotlin 全栈开发之 前端 JavaScript: Getting Started with Kotlin and JavaScript with Gradle

完整工程源代码:

https://github.com/Jason-Chen-2017/kotlin-js-gradle-demo

image.png

HelloWorld.kt

package demo

import kotlin.browser.document
import kotlin.js.Date


fun say() {
    println("Hello,World")
}

fun getDate(n: Int): Date {
    var d = Date()
    var ntime = d.getTime() + n * 24 * 3600 * 1000 // ms
    return Date(ntime)
}

fun renderTable() {
    val e = document.getElementById("title")
    e?.innerHTML = """
        <h1>Kotlin VS. JavaScript</h1>
    """.trimIndent()
}


fun main(args: Array<String>) {
    say()
    getDate(2)
    renderTable()
}

build.gradle

group 'com.easy.kotlin'
version '1.0-SNAPSHOT'

buildscript {
    ext.kotlin_version = '1.2.61'

    repositories {
        mavenCentral()
    }
    dependencies {
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }

}

apply plugin: 'kotlin2js'

repositories {
    mavenCentral()
}

dependencies {
    compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version"
    testCompile "org.jetbrains.kotlin:kotlin-test-js:$kotlin_version"
}

build.doLast {
    configurations.compile.each { File file ->
        copy {
            includeEmptyDirs = false

            from zipTree(file.absolutePath)
            into "${projectDir}/src/main/resources/static"
            include { fileTreeElement ->
                def path = fileTreeElement.path
                println(path)
                path == "kotlin.js"
            }

        }
    }
}

compileKotlin2Js {
    kotlinOptions.outputFile = "${projectDir}/src/main/resources/static/app.js"
    kotlinOptions.moduleKind = "plain"
    kotlinOptions.sourceMap = true
    kotlinOptions.verbose = true
    kotlinOptions.metaInfo = true
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>kotlinjs-demo</title>
</head>
<body>
<div id="title"></div>

<script type="text/javascript" src="../static/kotlin.js"></script>
<script type="text/javascript" src="../static/app.js"></script>
<script type="text/javascript" >
    var K = app
    K.demo.say()
    var d = K.demo.getDate_za3lpa$(3)
    console.log(d)
</script>

</body>
</html>

生成的app.js 如下:

if (typeof kotlin === 'undefined') {
  throw new Error("Error loading module 'app'. Its dependency 'kotlin' was not found. Please, check whether 'kotlin' is loaded prior to 'app'.");
}
var app = function (_, Kotlin) {
  'use strict';
  var println = Kotlin.kotlin.io.println_s8jyv4$;
  var trimIndent = Kotlin.kotlin.text.trimIndent_pdl1vz$;
  function say() {
    println('Hello,World');
  }
  function getDate(n) {
    var d = new Date();
    var ntime = d.getTime() + (((n * 24 | 0) * 3600 | 0) * 1000 | 0);
    return new Date(ntime);
  }
  function renderTable() {
    var e = document.getElementById('title');
    e != null ? (e.innerHTML = trimIndent('\n        <h1>Kotlin VS. JavaScript<\/h1>\n    ')) : null;
  }
  function main(args) {
    say();
    getDate(2);
    renderTable();
  }
  var package$demo = _.demo || (_.demo = {});
  package$demo.say = say;
  package$demo.getDate_za3lpa$ = getDate;
  package$demo.renderTable = renderTable;
  package$demo.main_kand9s$ = main;
  main([]);
  Kotlin.defineModule('app', _);
  return _;
}(typeof app === 'undefined' ? {} : app, kotlin);

//# sourceMappingURL=app.js.map

页面效果:

image.png

构建执行:gradle build

image.png

参考文档:

1.《Kotlin 极简教程》(陈光剑)第39页。

  1. Getting Started with Kotlin and JavaScript with Gradle

新书上架:《Spring Boot 开发实战》

— 基于 Kotlin + Gradle + Spring Boot 2.0 的企业级服务端开发实战

京东下单链接

https://item.jd.com/31178320122.html

天猫下单链接

https://detail.tmall.com/item.htm?id=574928877711

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Jed的技术阶梯

利用Sqoop实现HDFS的数据与MySQL数据的互导

注意: 查询语句必须包含where条件,即使不需要where条件,也需要写上"where $CONDITIONS"来表示没有select语句没有where条件

1272
来自专栏蛋未明的专栏

Build a JavaScript Compressor tool using NodeJS, ExpressJS, Jade, UglifyJS tutorial Read more: http

1242
来自专栏不想当开发的产品不是好测试

Rest-assured 写日志到 log4j

背景: 采用Rest-assured,日志采用log4j,发现Rest-assured本身只支持打印日志到控制台,但期望打印到文件中以便排查问题 请求打印的语句...

2598
来自专栏芋道源码1024

面试问烂的 Spring MVC 过程

来源:https://www.jianshu.com/p/e18fd44964eb

1933
来自专栏余林丰

SpringMVC——DispatcherServlet的IoC容器(Web应用的IoC容器的子容器)创建过程

在上一篇《Spring——Web应用中的IoC容器创建(WebApplicationContext根应用上下文的创建过程)》中说到了Web应用中的IoC容器创建...

2535
来自专栏蘑菇先生的技术笔记

多线程中的锁系统(四)-谈谈自旋锁

3017
来自专栏一个会写诗的程序员的博客

6.3 Spring Boot集成mongodb开发小结

本章我们通过SpringBoot集成mongodb,Java,Kotlin开发一个极简社区文章博客系统。

2103
来自专栏along的开发之旅

Mac os 下打开java内存分析工具 mat

版权声明:欢迎传播,请标明出处。 https://blog.csdn.net/u201011221/article/details/8305...

8073
来自专栏小灰灰

RabbitMQ基础教程之Spring&JavaConfig使用篇

2467
来自专栏个人分享

Spark代码调优(一)

import org.apache.spark.sql.{DataFrame, Row, SQLContext}

2461

扫码关注云+社区

领取腾讯云代金券