第十三章 使用Kotlin開(kāi)發(fā)JavaScript代碼
一切皆是映射。
我們知道铐殃，JavaScript是動(dòng)態(tài)類(lèi)型的語(yǔ)言海洼，這意味著它不會(huì)在編譯期檢查類(lèi)型。而相對(duì)來(lái)說(shuō)富腊，Kotlin和Java都是靜態(tài)類(lèi)型的坏逢。
Kotlin1.1版本加入了對(duì)JavaScript的支持，也就是說(shuō)我們可以Kotlin進(jìn)行網(wǎng)頁(yè)開(kāi)發(fā)，并且Kotlin也支持與JavaScript的相互操作是整。目前的實(shí)現(xiàn)是 ECMAScript 5.1肖揣。
但是，Kotlin對(duì)于JavaScript的支持浮入，更多的只是將Kotlin等價(jià)轉(zhuǎn)換成JavaScript以達(dá)到支持的功能龙优，然后做一些函數(shù)的封裝工作。kotlinc-js編譯器做的工作大致是：詞法分析事秀、語(yǔ)法分析彤断、語(yǔ)義分析、轉(zhuǎn)成JS代碼易迹，然后通過(guò)JavaScript引擎執(zhí)行宰衙。
我們可以用Kotlin 代碼來(lái)創(chuàng)建面向客戶(hù)端 JavaScript ，與 DOM 元素交互等睹欲。Kotlin 提供了相應(yīng)API與DOM（Document Object Model供炼，文檔對(duì)象模型）交互，創(chuàng)建和更新 DOM 元素句伶。
另外劲蜻，Kotlin 也可以與現(xiàn)有的第三方庫(kù)和框架（如 JQuery 或 ReactJS）一起使用。Kotlin 還兼容 CommonJS考余、AMD 和 UMD先嬉，直接與不同的模塊系統(tǒng)交互。
Kotlin 之JavaScript HelloWorld楚堤！
下面我們介紹一下使用Kotlin進(jìn)行JavaScript代碼的開(kāi)發(fā)疫蔓。
首先，新建Kotlin（JavaScript）工程：
你將得到一個(gè)如下 的工程：
.
├── build
│ └── kotlin-build
│ └── caches
│ └── version.txt
├── build.gradle
├── settings.gradle
└── src
├── main
│ ├── java
│ ├── kotlin
│ └── resources
└── test
├── java
├── kotlin
└── resources
12 directories, 3 files
其中身冬，build.gradle配置文件內(nèi)容如下
group 'com.easy.kotlin'
version '1.0-SNAPSHOT'
buildscript {
ext.kotlin_version = '1.1.1'
repositories {
mavenCentral()
}
dependencies {
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
}
}
apply plugin: 'java'
apply plugin: 'kotlin2js'
sourceCompatibility = 1.8
repositories {
mavenCentral()
}
dependencies {
compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version"
testCompile group: 'junit', name: 'junit', version: '4.12'
}
我們可以看出兩個(gè)核心的配置：
- apply plugin: 'kotlin2js'
- kotlin-stdlib-js
kotlin2js會(huì)把我們寫(xiě)好的Kotlin代碼編譯轉(zhuǎn)換成js代碼衅胀。關(guān)于轉(zhuǎn)換的規(guī)則和輸出文件目錄配置如下：
build.doLast {
configurations.compile.each { File file ->
copy {
includeEmptyDirs = false
from zipTree(file.absolutePath)
into "${projectDir}/web"
include { fileTreeElement ->
def path = fileTreeElement.path
path.endsWith(".js") && (path.startsWith("META-INF/resources/") || !path.startsWith("META-INF/"))
}
}
}
}
compileKotlin2Js {
kotlinOptions.outputFile = "${projectDir}/web/output.js"
kotlinOptions.moduleKind = "amd" // AMD規(guī)范
kotlinOptions.sourceMap = true
}
其中，kotlinOptions.moduleKind = "amd", moduleKind支持的選項(xiàng)有
plain (default)
amd
commonjs
umd
關(guān)于moduleKind更多介紹酥筝，可以參考[6].
新建KotlinJS.kt滚躯，編寫(xiě)代碼如下
package com.easy.kotlin
import org.w3c.dom.Element
import kotlin.browser.document
import kotlin.js.Date
/**
* Created by jack on 2017/5/29.
*/
fun main(args: Array<String>) {
val msg = "Hello World!"
println(msg)
js("console.log(msg)")
js("alert(msg)")
js("alert('KotlinJS:'+new Date())")
js("sayTime()")
val emailElement = getEmail()
println(emailElement?.getAttribute("value"))
}
fun getEmail(): Element? {
return document.getElementById("email")
}
fun sayTime() {
println(Date())
}
fun max(a: Int, b: Int): Int {
return if (a > b) a else b
}
fun min(a: Int, b: Int): Int {
return if (a < b) a else b
}
fun substring(src: String, start: Int, end: Int): String {
return src.substring(start, end)
}
fun trim(src: String): String {
return src.trim()
}
執(zhí)行g(shù)radle build，我們將得到一個(gè)構(gòu)建后的工程嘿歌，目錄如下：
.
├── build
│ └── kotlin-build
│ └── caches
│ └── version.txt
├── build.gradle
├── htmls
│ ├── kotlinjs.html
│ ├── main.js
│ └── require.js
├── settings.gradle
├── src
│ ├── main
│ │ ├── java
│ │ ├── kotlin
│ │ │ └── com
│ │ │ └── easy
│ │ │ └── kotlin
│ │ │ └── KotlinJS.kt
│ │ └── resources
│ └── test
│ ├── java
│ ├── kotlin
│ └── resources
└── web
├── kotlin.js
├── kotlin.meta.js
├── output
│ └── com
│ └── easy
│ └── kotlin
│ └── kotlin.kjsm
├── output.js
└── output.meta.js
21 directories, 12 files
可以看出掸掏，當(dāng)Kotlin編譯器進(jìn)行編譯轉(zhuǎn)換成了JavaScript，主要輸出了兩個(gè)文件:
kotlin.js: Kotlin支持JavaScript運(yùn)行時(shí)的標(biāo)準(zhǔn)庫(kù)宙帝。它在應(yīng)用程序之間都是一樣的丧凤，可想而知，這是為了讓Kotlin支持JavaScript而做的封裝庫(kù)步脓。
output.js： Kotlin代碼轉(zhuǎn)成JavaScript的等價(jià)代碼愿待。其中浩螺，output.js就是我們的KotlinJS.kt轉(zhuǎn)換之后的js代碼。這個(gè)代碼如下：
define('output', ['exports', 'kotlin'], function (_, Kotlin) {
'use strict';
var println = Kotlin.kotlin.io.println_s8jyv4$;
function main(args) {
var msg = 'Hello World!';
println(msg);
console.log(msg);
alert(msg);
alert('KotlinJS:' + new Date());
sayTime();
var emailElement = getEmail();
println(emailElement != null ? emailElement.getAttribute('value') : null);
}
function getEmail() {
return document.getElementById('email');
}
function sayTime() {
println(new Date());
}
function max(a, b) {
return a > b ? a : b;
}
function min(a, b) {
return a < b ? a : b;
}
function substring(src, start, end) {
return src.substring(start, end);
}
function trim(src) {
var tmp$;
return Kotlin.kotlin.text.trim_gw00vp$(Kotlin.isCharSequence(tmp$ = src) ? tmp$ : Kotlin.throwCCE()).toString();
}
var package$com = _.com || (_.com = {});
var package$easy = package$com.easy || (package$com.easy = {});
var package$kotlin = package$easy.kotlin || (package$easy.kotlin = {});
package$kotlin.main_kand9s$ = main;
package$kotlin.getEmail = getEmail;
package$kotlin.sayTime = sayTime;
package$kotlin.max_vux9f0$ = max;
package$kotlin.min_vux9f0$ = min;
package$kotlin.substring_3m52m6$ = substring;
package$kotlin.trim_61zpoe$ = trim;
Kotlin.defineModule('output', _);
main([]);
return _;
});
//@ sourceMappingURL=output.js.map
output.js的前置依賴(lài)是kotlin.js仍侥。
我們使用requirejs來(lái)管理js模塊要出。kotlinjs.html代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>KotlinJS</title>
<!-- data-main attribute tells require.js to load
scripts/main.js after require.js loads. -->
<script data-main="main" src="require.js"></script>
</head>
<body>
Email: <input type="text" name="email" id="email" value="universsky@163.com"/>
</body>
</html>
其中，main.js代碼如下：
requirejs.config({
paths: {
kotlin: '../web/kotlin',
output: '../web/output'
}
});
requirejs(["kotlin","output"], function (Kotlin,output) {
console.log(JSON.stringify(output))
});
直接瀏覽器打開(kāi)kotlinjs.html农渊，我們可以在console看到輸出：
Hello World!
Tue May 30 2017 01:17:48 GMT+0800 (CST)
universsky@163.com
{"com":{"easy":{"kotlin":{}}}}
Kotlin-JS編譯器轉(zhuǎn)換過(guò)程
在Kotlin-JavaScript模式中厨幻，Kotlinc(編譯器)只是進(jìn)行了轉(zhuǎn)換JS的操作，然后與標(biāo)準(zhǔn)庫(kù)kotlin.js腿时、項(xiàng)目中JS文件一起再通過(guò)JavaScript引擎執(zhí)行。
Kotlin編譯器會(huì)將原生的Kotlin代碼轉(zhuǎn)換成相應(yīng)的JavaScript代碼饭宾，并且對(duì)于原先Kotlin中定義的函數(shù)名和變量都不會(huì)改變批糟，這樣我們可以在JavaScript中調(diào)用經(jīng)過(guò)Kotlin編譯器轉(zhuǎn)換后的JavaScript代碼。
但是在Kotlin-JS編譯器轉(zhuǎn)換的這個(gè)過(guò)程看铆，由于Kotlin類(lèi)型系統(tǒng)與JavaScript類(lèi)型系統(tǒng)無(wú)法完全一一對(duì)應(yīng)上徽鼎，所以在轉(zhuǎn)換過(guò)程中，也會(huì)有些問(wèn)題弹惦。
JavaScript中有以下幾種數(shù)據(jù)類(lèi)型：
number
boolean
string
object
array
undefined
null
而Kotlin中否淤，有以下類(lèi)型：
Int
Byte
Short
Long
Double
Float
Boolean
Char
String
Any
Array
List
Set
Map
…
顯然，Kotlin擁有更復(fù)雜的數(shù)據(jù)類(lèi)型棠隐。Kotlin編譯器如何將Kotlin類(lèi)型映射到JavaScript類(lèi)型呢石抡？如下：
Kotlin中Int/Byte/Short/Float/Double 映射JavaScript的number
Kotlin中String映射JavaScript中string
Kotlin中Any映射Javas中Object
Kotlin中Array映射JavaScript中Array
Kotlin中Long不映射JavaScript中任何類(lèi)型
Kotlin集合（List/Set/Map等）不映射JavaScript中類(lèi)型類(lèi)型
比如說(shuō)，轉(zhuǎn)換Kotlin的Long類(lèi)型助泽，由于JavaScript中沒(méi)有64位整數(shù)啰扛，導(dǎo)致Kotlin中的Long類(lèi)型沒(méi)有映射到任何JavaScript對(duì)象，在實(shí)際轉(zhuǎn)換過(guò)程中嗡贺，是用Int類(lèi)型來(lái)處理的隐解。
同理，Kotlin中的集合也沒(méi)有映射到JavaScript任何特定的類(lèi)型诫睬。Kotlin為了不對(duì)語(yǔ)言做任何的改變煞茫，僅僅是將Long和集合當(dāng)成了一個(gè)模擬。
Kotlin能夠同時(shí)支持Java和JavaScript摄凡，愿景是美好的续徽。但是就目前來(lái)說(shuō)，Kotlin對(duì)于JavaScript的支持架谎，不如Java那么絲般潤(rùn)滑炸宵。局限性和互操作上都顯得有點(diǎn)“羞澀”。對(duì)于反射等功能谷扣，目前也尚不支持土全。KotlinJS未來(lái)有較大發(fā)展提升空間捎琐。
小結(jié)
本章示例工程源代碼：
https://github.com/EasyKotlin/kotlinjs
參考資料
3.http://www.indiepig.com/blog/kotlin-hello-js.php
6.https://kotlinlang.org/docs/tutorials/javascript/working-with-modules/working-with-modules.html
Kotlin 開(kāi)發(fā)者社區(qū)
國(guó)內(nèi)第一Kotlin 開(kāi)發(fā)者社區(qū)公眾號(hào)，主要分享裹匙、交流 Kotlin 編程語(yǔ)言瑞凑、Spring Boot、Android概页、React.js/Node.js籽御、函數(shù)式編程痴昧、編程思想等相關(guān)主題榴徐。
