使用 Jayq 将 Resize 事件绑定到 Clojurescript

Question

我正在尝试创建一个简单的 clojurescript，它将显示浏览器窗口的宽度。

我的 app.cljs 如下所示：

(ns acme.frontend.app
(:use [jayq.core :only [$]])
(:require-macros [hiccups.core :as hiccups :refer [html]])
(:require [hiccups.runtime :as hiccupsrt]))

(def $body ($ :body))

(def window-width (atom nil))

(defn on_window_resize
  []
  (reset! window-width (.-innerWidth ($ :window)))
  (println window-width))


(defn init []
  (set! (.-onload ($ :document))
    ((fn []
       (set! (. ($ :window) -resize) (())))))
  (let [$dyncontent ($ :#svgcontent)]
    (.html $dyncontent @window-width))
  (println "ScriptLoaded"))

我的 Shadow-cljs.edn 如下所示：

{:source-paths
 ["src/dev"
  "src/main"
  "src/test"]

 :dependencies [[cider/cider-nrepl "0.25.10"]
            [jayq "2.5.4"]
            [hiccups "0.3.0"]]
 :builds
 {:frontend
   {:target :browser
    :modules {:main {:init-fn acme.frontend.app/init}}
    :devtools {:http-root "public"
          :http-port 8081}
    :optimizations :advanced
    :externs ["externs/jquery.js"]}}}

代码编译，我在 public/js 文件夹中看到 main.js。

但是，这没有任何作用。我可以随意调整窗口大小，什么都不会发生。

我对 clojure/script 很陌生，所以我可能会做一些愚蠢的事情。但是我做错了什么？

顺便说一句，有没有办法在我们当前托管的同一个 index.html 文件上运行 browser-repl？当我运行shadow-cljs browser-repl 时，会打开一个托管在不同端口的新窗口。它们怎么可能相同，以便开发在同一页面上？

更新 我已经稍微更新了我的代码。 现在 init 和 onDOMLoad 函数如下所示：

(defn onDOMLoad
 []
 (.resize ($ :window) on_window_resize))

(defn init []
 (.ready ($ :document) onDOMLoad))

调整大小时，这无法执行任何操作。

但是js版本可以，如下图：

(defn onDOMLoad
 []
 (.addEventListener js/window "resize" on_window_resize))

据此，我假设 jayq 不允许您绑定以调整事件大小。我是不是找错树了？

更新：我现在已经放弃在 clojurescript 上使用 jayq。相反，我发现 goog.dom 更加用户友好。我正在关注学习 clojurescript 的书以获取这方面的指导。我正在相应地结束这个问题。非常感谢。

Answer 1

在您的(defn init [] ...) 中，您正在创建一个匿名函数，然后通过额外的括号((fn [] ...)) 立即调用它。所以那个函数调用的结果就是你set! 作为onload 而不是函数本身。只需删除一对括号。

在您的配置中，您将:optimizations 和:externs 设置为错误的级别。它们需要在:compiler-options 键下。您根本不需要设置:optimizations，它们默认为:advanced 用于浏览器release 构建。

browser-repl 启动一个独立于任何构建的独立浏览器 REPL。如果您想在构建中使用 REPL，请使用 shadow-cljs cljs-repl frontend。