来自远古时代的 Kotlin 前端开发入门

最新推荐文章于 2025-06-28 07:16:06 发布

转载

最新推荐文章于 2025-06-28 07:16:06 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c91e863e51d45737759d008

文章标签：

#前端 #移动开发 #前端框架 #ViewUI

本文介绍了如何使用 Kotlin 进行前端开发，结合 Ktor 和 FreeMarker 框架处理 DOM 和响应式布局。文章讨论了 CSS 的响应式布局，JavaScript 中的 jQuery，以及如何用 Kotlin 调用 JS。最后提到了 BootStrap 作为无 UI 支持时的前端框架选择，并推荐了一个官方的 FullStack Demo 项目。

在成为一名不专业的 Android 开发之前, 做的是不专业的前端开发工作. 大致的工作就是写点 Web 页面, JS/CSS, 写点 Spring 的 Servlet. 搞 Android 之后这块就没怎么摸过了, 所以技术栈还是非常古老的 jQuery + Spring + Velocity.

自从 IDEA 爸爸搞出了 Kotlin, 试了一下开发 iOS 非常崩溃. 但全栈之心蠢蠢欲动, 感觉还是可以搞点事情. 所以就稍微拣了一下, 记录下来供大家参考.

前端的组成部分

打开一个 HTML 页面, 我们通常能看到如下几类元素.

DOM (页面)

HTML 是各种 tag 的嵌套结构, 在根元素之下是 HEAD 和 BODY. BODY 里面是页面结构, 现代的 Web 开发通常不会直接把内容直接写到 DOM 里, 所以一般来说页面里只有结构, 没有内容.

CSS

HEAD 里面会有 style 和 xyz.css, 这类东西叫 CSS (层叠式样式表), 用来控制内容的样式/排版. 需要注意的是 CSS 对于元素的影响也是嵌套的, 可以在 Chrome 的开发者工具中查看一个元素的样式究竟受到哪些 CSS 的影响. CSS 的用法有两种, 一种是在 tag 上引用 class: class="style1 style2", 另一种是在 tag 上直接写 style: style="xyz: abc, ijk: def".