如何使用Clojurescript与HTML DOM交互？

Question

我是Clojurescript的新手。我想知道如何使用Clojurescript创建HTML元素，并如何更改它们的属性。我在网上似乎找不到很多相关信息。

- mandy1339

Answer 1

ClojureScript与JavaScript和浏览器有很好的互操作性。您可以直接调用JavaScript全局变量和函数来查询和操作DOM，如下所示：

(-> js/document
    (.getElementById "app")
    (.-innerHTML)) ; returns contents of element with id 'app'

(-> js/document
    (.getElementById "app")
    (.-innerHTML)
    (set! "Hello Clojure!")) ; Sets new content for element

查看ClojureScript cheatsheet，了解在CLJS中与JavaScript交互的简短摘要。

然而，现代Web应用程序不是使用直接的DOM操作构建的。 @scott-lowe的回答建议使用Reagent，这是一个用于React的ClojureScript桥接器，也是当前最受欢迎的UI JS框架之一。对于开始构建Web应用程序来说是一个不错的选择。

此外，我建议查看re-frame，它基于Reagent，并为您的应用程序提供状态管理。开始的简单方法是安装Leiningen构建工具，并简单地输入lein new re-frame my-app-name。这会为你提供一个很好的模板来开始实验。使用lein figwheel运行应用程序，你可以立即在浏览器中看到对cljs代码的更改。开始编写的好地方是views.cljs，其中包含主应用的hiccup-like模板。

- Toni Vanhala

---

非常感谢。我从未意识到ClojureScript的备忘单与Clojure的备忘单不同。js/jQuery函数似乎很适合开始尝试编写代码。谢谢！ - mandy1339

小细节：我的示例并不是真正的jQuery，而是使用浏览器的标准Web API，包括getElementById。 - Toni Vanhala

Answer 2

请查看Reagent项目，它提供了ClojureScript和React之间的极简接口。

Reagent项目网站包括以下示例：https://reagent-project.github.io/

(ns example
  (:require [reagent.core :as r]))

(defn simple-component []
  [:div
   [:p "I am a component!"]
   [:p.someclass
    "I have " [:strong "bold"]
    [:span {:style {:color "red"}} " and red "] "text."]])

(defn render-simple []
  (r/render [simple-component]
    (.-body js/document)))

在上面的例子中，Reagent组件simple-component被渲染到js/document节点的body中。Reagent组件只是一个简单的函数，但是你可以通过将这些简单函数组合在一起来组成更复杂的HTML块。

还有许多其他方式可以从ClojureScript生成HTML并与DOM交互，但我认为可以说Reagent是ClojureScript社区中最受欢迎的库之一；它也很成熟并且文档齐全。

- Scott

---

哇，Reagent 看起来真的很适合 Clojurescripts 的流程。它使用向量和映射来表示元素和属性。我肯定会使用这个库。非常感谢 Scott！ - mandy1339

很高兴你喜欢Reagent的外观！最近我从中获得了很多乐趣和享受。话虽如此，@toni-vanhala的建议同样好：仅使用ClojureScript的JS-interop和现代浏览器内置的标准JS函数，您就可以实现很多事情。根据需要学习和使用两种方法都是有益的 :-) - Scott