Writing Kotlin in the Browser.md

title	date	author	tags	keywords	categories	reward	reward_title	reward_wechat	reward_alipay	source_url	translator	translator_url
[译]Writing Kotlin in the Browser	2013-10-16 01:00:00 -0700	Hadi Hariri			官方动态	false	Have a nice Kotlin!			https://blog.jetbrains.com/kotlin/2013/10/writing-kotlin-in-the-browser/

你知道 Kotlin 可以定位到 JavaScript 和 JVM 吗？不要太惊讶，如果你不知道，因为我们没有给它太多的覆盖，尽管已经发货了 成功的产品 使用这种功能。但是，这是希望改变的。

基础 - 一个简单的项目

第一步是建立一个新项目。在项目中使用 Kotlin 时，我们有能力定位到 JVM 或 JavaScript。如果我们在现有项目中添加新的 Kotlin 文件， Kotlin 会提示我们这样做 。如果我们开始一个新项目，我们可以在设置向导中选择目标，假设我们使用 IntelliJ IDEA。

{% raw %}

{% endraw %}

我们还需要将 Kotlin 标准库添加到该项目中。点击创建按钮，我们会提示我们要复制这些文件的位置。默认情况下，它的副本是一个名为脚本的文件夹。我们稍后会介绍，因为它很重要。

{% raw %}

{% endraw %}

项目组织

由此产生的项目结构应该是

{% raw %}

{% endraw %}

该项目有两个文件被添加：

• lib 文件夹包含头文件，作为开发过程中使用的 jar 文件。
• 脚本文件夹包含一个 kotlin.js，它是 Kotlin 运行时库。这用于生产。

我们所有的 Kotlin 源代码都应放在src文件夹中。一旦编译完成，它将生成一些 JavaScript 文件，然后需要与kotlin.js运行时文件一起发送。 所有其他源代码，作为这个外部 JavaScript 库或文件，CSS 和 HTML 文件可以放置在任何地方，最好在同一个项目中，使开发更容易，但不一定。对于我们的例子，我们将把它放在一个名为web的文件夹中，并创建一系列子文件夹来构建我们的代码。

{% raw %}

{% endraw %}

设置工作流程

当我们编写 Kotlin 代码时，编译器将生成一些需要作为我们应用程序一部分发送的 JavaScript。默认情况下，IntelliJ IDEA 将将该文件及其源映射输出到名为*out / production / {project_name}*的文件夹

{% raw %}

{% endraw %}

在开发期间，我们需要最新版本的这些文件，因此我们希望将这些文件放在我们的web / js / app文件夹中。我们可以在很多方面做到这一点 IntelliJ IDEA 工件 或 Maven / Gradle。在我们的例子中，我们只是使用一个工件。我们可以设置一个将相应的文件复制到所需的输出位置，另外还将最初复制到脚本文件夹的kotlin.js文件复制到同一位置*。 * 这是一次一次性操作，所以一个更好的选择是将此文件的输出位置直接定义到所需的输出文件夹该项目。我们这样做是为了逐步解释事情。

与 DOM 元素交互

现在我们已经准备好项目布局了，我们开始编写一些代码。我们可以做的最基本的事情是操纵一些 DOM 元素。我们可以创建一个简单的 HTML 页面（名为index.html），并将其放在web文件夹下 这个想法是现在使用 Kotlin 更新输入字段的值。为此，我们可以创建一个名为main的新文件.kt*，并将其放在我们的src文件夹下。

面向网络的图书馆

Kotlin 提供了一系列专门针对网络的图书馆。在我们的例子中，由于我们想操纵 DOM，所以我们可以导入js.dom.html来访问文档变量。最终的代码将是 这很简单。我们正在使用document.getElementById来检索 DOM 元素，然后使用setAttribute设置其值。完全一样的方式，我们使用 JavaScript，除了这里我们使用 Kotlin，并有静态打字的好处，除其他外。 标准库已经支持 DOM 操作，HTML 5 功能（如 Canvas 和本地存储），以及用于常见库（如 jQuery）的包装。我们会在更多的时候添加更多的内容，我们将在未来的帖子中介绍其中的一些内容。

运行代码

现在我们已经编译了代码，我们需要实际运行它。为此，我们必须同时参考我们的index.html页面中的kotlin.js以及生成的（basic.js）文件。

{% raw %}

 

{% endraw %}

当加载页面时，与main功能相对应的代码将自动被调用。 加载我们的 index.html*页面后，我们将看到结果。

{% raw %}

{% endraw %}

从 JavaScript 调用 Kotlin

如果我们要在 Kotlin 中使用 JavaScript 中的一些代码怎么办？例如，想想需要在客户端和服务器上重复需要重复的某种业务逻辑的场景。所有我们需要做的是写它，然后调用它。这是 Kotlin 写的一个简单的函数

{% raw %}

 

{% endraw %}

这被放置在与应用程序相同的模块内，我们可以通过 Kotlin 模块名称来引用它* ** *此 API 不是最终的，将来很可能会发生变化，可能会更加紧凑。 / strong>

下一步

这不是所有可能与 Kotlin。我们没有提到的一件事是能够从 Kotlin 内部调用 JavaScript 代码，这是我们将在另一个帖子中覆盖的东西，因为这个已经变得太久了！ 如果你想玩 Kotlin 到 JavaScript，而不必安装任何东西，你也可以直接尝试 浏览器 。和往常一样，给我们您的反馈！