javascript - 为什么我不能将 Clojurescript 函数作为回调传递给 Javascript？

Question

我正在尝试在 Clojurescript/Reagent SPA 中使用 Google 的 recaptcha，如下面的代码所示。

(ns myapp.captcha
  (:require  [reagent.core :as r]
             [cljs.core.async :refer [<! >! chan]])
  (:require-macros [cljs.core.async.macros :refer [go go-loop]]))

(def captcha-ch (chan))

(defn ^:export data-callback [human-proof]
  (go (>! captcha-ch {:captcha-data human-proof})))

(defn ^:export data-expired-callback []
  (go (>! captcha-ch {:captcha-expired true})))

(defn captcha [site-key]
  (let [grecaptcha-script (doto (.createElement js/document "script")
                            (.setAttribute "id" "grecaptcha-script")
                            (.setAttribute "src" "https://www.google.com/recaptcha/api.js"))
        out-ch (chan)
        comp (r/create-class
              {:component-did-mount (fn [this]
                                      (.appendChild (.-body js/document)
                                                    grecaptcha-script))
               :component-will-unmount (fn [this]
                                         (.removeChild (.-body js/document)
                                                       (.getElementById js/document "grecaptcha-script"))
                                         (go (>! captcha-ch {:exit true})))
               :reagent-render (fn [this]
                                 [:div.g-recaptcha
                                  {:data-sitekey site-key
                                   :data-callback "myapp.captcha.data_callback"
                                   :data-expired-callback "myapp.captcha.data_expired_callback"}])})]
    (go-loop []
      (let [msg (<! captcha-ch)]
        (if-not (:exit msg)
          (>! out-ch msg)
          (recur))))

    {:chan out-ch :comp comp}))

当验证码被解决并且应该调用数据回调时，我收到一条错误消息:

ReCAPTCHA couldn't find user-provided function: myapp.captcha.data_callback

另一方面，如果我从浏览器的调试器控制台调用 myapp.captcha.data_callback，该函数可见并正确执行。

PS:暂时请忽略global chan，那是另外一回事。为了解决这个问题，我必须显式调用验证码渲染，这使我处于某些显然与脚本加载顺序相关的竞争条件中。我承认这可能是一种更简洁的方法，但现在看看这里的问题是什么很有趣。

Answer 1

这是因为 Closure 编译器在编译期间混淆了您的代码，包括重命名您的函数。最简单的解决方案是首先确保编译器优化尊重您的函数名称(或者简单地禁用优化，例如通过 :optimization :none 和 shadow cljs。

接下来，您要确保导出要使用的函数。这是通过 ^:export 完成的，例如:(defn ^:export my-exported-fun [] ...)

最后，在引用函数时传递完整的命名空间，例如myapp.frontend.my-exported-fun。

希望这对 future 的旅行者有帮助:)