Kotlin 全栈开发之 前端 JavaScrip
时间:2022-06-10
本文章向大家介绍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页。
新书上架:《Spring Boot 开发实战》
— 基于 Kotlin + Gradle + Spring Boot 2.0 的企业级服务端开发实战
京东下单链接
https://item.jd.com/31178320122.html
天猫下单链接
https://detail.tmall.com/item.htm?id=574928877711
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 深入Golang调度器之GMP模型
- 深入Golang之sync.Pool详解
- 一次对电视盒子的漏洞分析
- MQ选型之RabbitMQ
- httprouter与 fasthttp 的性能对比
- Nmap 脚本研究
- Nmap NSE 库分析 >>> http
- Nmap NSE 库分析 >>> httpspider
- Nmap NSE 库分析 >>> url
- Go语言中的byte和rune区别、对比
- Nmap NSE 缺陷
- Golang服务器热重启、热升级、热更新(safe and graceful hot-restart/reload http server)详解
- Nmap NSE 库分析 >>> shortport
- Linux 后门系列之 python3 反弹shell & 隐藏后门
- nc 反弹shell | Linux 后门系列