Ktjs 使用现有的 Js 库

在 Ktjs 的开发过程中，经常会遇到要使用 js 现有模块的问题，我们不可能在 Kotlin 上完整的造一套新的轮子。Kotlin 的文档里有一些相应的操作，不过并不能直接拿来用，直接拿的后果就是被坑得体无完肤，还是得自己爬坑。程序员不爱写文档或者说写不好文档的梗被发挥得淋漓尽致:(

好了，那我们倒底要如何来使用一个第三方的 js 呢？下面以 jquery 为例来讲述。

首先我们需要将 jquery.js 转换成 jquery.kt，以使得 Kotlin 可以正常读取 jquery 的导出方法，这一步需要借助 ts2kt 工具，使用以下命令来进行安装:

$ sudo npm -g install ts2kt

完成后，我们需要找到 jquery 的 ts 定义，在 DefinitelyTyped(点击进入) 内即可找到，这个仓库超大，github 是无法完全展示列表的，所以只能依靠搜索的功能来找到所需的定义。

把 jquery.d.ts 保存到本地，然后使用命令进行转换:

$ ts2kt -d headers jquery.d.ts

执行完毕后将生成一个 jquery.kt，这个文件即是 jquery 与 kotlin 代码之间的桥梁。

---

然后我们就可以使用它了，需要注意的是，当我们使用了任意第三方库时，都需要在 html 内进行引用:

然后我们把页面补完，写个最简单的 div 就好:

然后在 kotlin 代码内就可以如此来写:

`$`("#root")[0]?.innerHTML = "
Hello Ktjs
"

千万不要以为这是 js，它确确实实是 Kotlin 代码。

如果需要同时使用 kotlinx-html-js 来生成页面，也可以这样写:

val div = document.create.div {
    h1 { text("Hello Ktjs") }
    button {
        text("Click Me!")
        onClickFunction = { println("Clicked!") }
    }
}
`$`("#root")[0]?.appendChild(div)

同样的，如果要给页面中的对象绑定事件，可以使用以下代码:

`$`("#btn")[0]?.onclick = { println("Clicked!") }