《Kotlin 程序設(shè)計》第十三章 使用Kotlin開發(fā)JavaScript代碼

第十三章 使用Kotlin開發(fā)JavaScript代碼

一切皆是映射。

我們知道，JavaScript是動態(tài)類型的語言，這意味著它不會在編譯期檢查類型。而相對來說，Kotlin和Java都是靜態(tài)類型的。

Kotlin1.1版本加入了對JavaScript的支持，也就是說我們可以Kotlin進行網(wǎng)頁開發(fā)，并且Kotlin也支持與JavaScript的相互操作。目前的實現(xiàn)是 ECMAScript 5.1。

但是，Kotlin對于JavaScript的支持，更多的只是將Kotlin等價轉(zhuǎn)換成JavaScript以達到支持的功能，然后做一些函數(shù)的封裝工作。kotlinc-js編譯器做的工作大致是：詞法分析、語法分析、語義分析、轉(zhuǎn)成JS代碼，然后通過JavaScript引擎執(zhí)行。

我們可以用Kotlin 代碼來創(chuàng)建面向客戶端 JavaScript ，與 DOM 元素交互等。Kotlin 提供了相應(yīng)API與DOM（Document Object Model，文檔對象模型）交互，創(chuàng)建和更新 DOM 元素。

另外，Kotlin 也可以與現(xiàn)有的第三方庫和框架（如 JQuery 或 ReactJS）一起使用。Kotlin 還兼容 CommonJS、AMD 和 UMD，直接與不同的模塊系統(tǒng)交互。

Kotlin 之JavaScript HelloWorld！

下面我們介紹一下使用Kotlin進行JavaScript代碼的開發(fā)。

首先，新建Kotlin（JavaScript）工程：

你將得到一個如下 的工程：

.
├── 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'
}

我們可以看出兩個核心的配置：

  • apply plugin: 'kotlin2js'
  • kotlin-stdlib-js

kotlin2js會把我們寫好的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支持的選項有

plain (default)
amd
commonjs
umd

關(guān)于moduleKind更多介紹，可以參考[6].

新建KotlinJS.kt，編寫代碼如下

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ò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

可以看出，當Kotlin編譯器進行編譯轉(zhuǎn)換成了JavaScript，主要輸出了兩個文件:

  • kotlin.js: Kotlin支持JavaScript運行時的標準庫。它在應(yīng)用程序之間都是一樣的，可想而知，這是為了讓Kotlin支持JavaScript而做的封裝庫。

  • output.js： Kotlin代碼轉(zhuǎn)成JavaScript的等價代碼。其中，output.js就是我們的KotlinJS.kt轉(zhuǎn)換之后的js代碼。這個代碼如下：

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的前置依賴是kotlin.js。

我們使用requirejs來管理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))
});

直接瀏覽器打開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)換過程

在Kotlin-JavaScript模式中，Kotlinc(編譯器)只是進行了轉(zhuǎn)換JS的操作，然后與標準庫kotlin.js、項目中JS文件一起再通過JavaScript引擎執(zhí)行。

Kotlin編譯器會將原生的Kotlin代碼轉(zhuǎn)換成相應(yīng)的JavaScript代碼，并且對于原先Kotlin中定義的函數(shù)名和變量都不會改變，這樣我們可以在JavaScript中調(diào)用經(jīng)過Kotlin編譯器轉(zhuǎn)換后的JavaScript代碼。

但是在Kotlin-JS編譯器轉(zhuǎn)換的這個過程，由于Kotlin類型系統(tǒng)與JavaScript類型系統(tǒng)無法完全一一對應(yīng)上，所以在轉(zhuǎn)換過程中，也會有些問題。

JavaScript中有以下幾種數(shù)據(jù)類型：

number
boolean
string
object
array
undefined
null

而Kotlin中，有以下類型：

Int
Byte
Short
Long
Double
Float
Boolean
Char
String
Any
Array
List
Set
Map
…

顯然，Kotlin擁有更復(fù)雜的數(shù)據(jù)類型。Kotlin編譯器如何將Kotlin類型映射到JavaScript類型呢？如下：

Kotlin中Int/Byte/Short/Float/Double 映射JavaScript的number

Kotlin中String映射JavaScript中string
Kotlin中Any映射Javas中Object
Kotlin中Array映射JavaScript中Array
Kotlin中Long不映射JavaScript中任何類型
Kotlin集合（List/Set/Map等）不映射JavaScript中類型類型

比如說，轉(zhuǎn)換Kotlin的Long類型，由于JavaScript中沒有64位整數(shù)，導(dǎo)致Kotlin中的Long類型沒有映射到任何JavaScript對象，在實際轉(zhuǎn)換過程中，是用Int類型來處理的。

同理，Kotlin中的集合也沒有映射到JavaScript任何特定的類型。Kotlin為了不對語言做任何的改變，僅僅是將Long和集合當成了一個模擬。

Kotlin能夠同時支持Java和JavaScript，愿景是美好的。但是就目前來說，Kotlin對于JavaScript的支持，不如Java那么絲般潤滑。局限性和互操作上都顯得有點“羞澀”。對于反射等功能，目前也尚不支持。KotlinJS未來有較大發(fā)展提升空間。

小結(jié)

本章示例工程源代碼：

https://github.com/EasyKotlin/kotlinjs

參考資料

1.https://kotlinlang.org/docs/tutorials/javascript/getting-started-gradle/getting-started-with-gradle.html

2.https://kotlinlang.org/docs/tutorials/javascript/working-with-modules/working-with-modules.html#using-amd

3.http://www.indiepig.com/blog/kotlin-hello-js.php

4.http://shinelw.com/2017/03/30/kotlin-new-features-for-javascript-support/?utm_source=tuicool&utm_medium=referral

5.http://kotlinlang.org/docs/tutorials/javascript/working-with-javascript.html#interacting-with-the-dom

6.https://kotlinlang.org/docs/tutorials/javascript/working-with-modules/working-with-modules.html

Kotlin 開發(fā)者社區(qū)

國內(nèi)第一Kotlin 開發(fā)者社區(qū)公眾號，主要分享、交流 Kotlin 編程語言、Spring Boot、Android、React.js/Node.js、函數(shù)式編程、編程思想等相關(guān)主題。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容