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

在成为一名不专业的 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".

JavaScript

现在好像流行放在 BODY 的最后面, 这里就是小前端的逻辑. 如果把浏览器当作客户端, DOM 是 Android 的 layout, CSS 是 Android 的 style, JavaScript 是 Android 的逻辑代码.

远古时代的前端开发技术

DOM

上文提到的 Velocity 就是可以用来动态生成页面的工具, 这类工具叫做模板引擎. 模板引擎允许开发人员定义一些变量, 在服务器返回页面时它会把变量的值替换到模板中, 实现了同一份代码显示不同的内容, 比如: Hello, ${userName} 会跟不同的用户打招呼.

CSS