kotlinjs-jquery-demo

A demo of using KotlinJS/kotlinx.html with JQuery

简介

这个项目提供一个把 KotlinJS 、kotlinx-html、JQuery 三者结合起来使用的一个最简易的应用示例，其中使用到的依赖和其作用有：

• kotlin-stdlib-js：Kotlin 官方的 JavaScript 平台标准库（用 Kotlin 来写 JS）
• kotlinx-html-js：用 Kotlin DSL 来构建生成 HTML （可在 JavaScript 平台或 JVM 平台用）
• kotlin-js-jquery：其实是一个 JQuery 的 Kotlin 强类型声明库

关于用 Kotlin 来写原生客户端 JS，一直以来都问题不大，写起来倍儿爽！

有问题的是，Kotlin 写 JQuery ，JQuery 需要 Kotlin 环境下的强类型声明，虽然官方提供了一个 ts2kt工具 来帮助把它在 TypeScript 的类型声明转换成 Kotlin 的类型声明，但是在我每次使用过程中都会有很多错误，很令人头疼。

今天在 Slack 上看到个 Kotlin 大佬说这个 ts2kt项目 确实是有问题的，然后他提供了个规范好的 JQuery 的类型声明文件，然后就可以直接拿来用了，这样就解决问题了。

使用

1. Clone 这个项目
2. Maven 导入依赖
3. Maven 执行 package
4. 打开 index.html 就能看到效果

每次修改完 Kotlin 源代码之后，Maven 执行一下 compile 就能更新生成的 js 文件了。

效果

Kotlin 代码：

fun main(args: Array<String>) {
    window.onload = { _ ->
        kotlinDslDoSomething()
        jqueryDoSomething()
    }
}

/**
 * DSL build HTML And append to body
 */
fun kotlinDslDoSomething() {
    document.body?.append {
        div {
            val suffixInfo = "(Produced by Kotlin-HTML-DSL)"
            id = "body_div"
            style = "text-align:center;"
            h1 {
                +"I am a Header$suffixInfo"
            }
            (1..10).forEach {
                div {
                    style = "color:${if (it % 2 == 0) "green" else "blue"}"
                    +"Line No.$it$suffixInfo"
                }
            }
        }
    }
}

/**
 * JQuery
 */
fun jqueryDoSomething() {
    val j = jQuery
    val text = " [I am red, added by Kotlin-JQuery] "
    j("#body_div").find("h1,div").append(
            j("<span>")
                    .css("color", "red")
                    .text(text)
    )
}

将会产生如下网页：