{"id":23552576,"url":"https://github.com/xlisp/clojurescript-study","last_synced_at":"2025-06-14T06:35:12.911Z","repository":{"id":127744144,"uuid":"72822260","full_name":"xlisp/clojurescript-study","owner":"xlisp","description":"记录ClojureScript的学习经历, Reagent(Cljs)使用第三方插件","archived":false,"fork":false,"pushed_at":"2018-01-21T12:16:01.000Z","size":482,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-30T10:11:27.169Z","etag":null,"topics":["clojure","clojurescript","javascript","react","reagent"],"latest_commit_sha":null,"homepage":"","language":"Clojure","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xlisp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-11-04T06:57:05.000Z","updated_at":"2024-09-05T11:09:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"ea4e0b0c-155e-4274-87f4-8e74f71dfd74","html_url":"https://github.com/xlisp/clojurescript-study","commit_stats":null,"previous_names":["xlisp/clojurescript-study"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xlisp%2Fclojurescript-study","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xlisp%2Fclojurescript-study/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xlisp%2Fclojurescript-study/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xlisp%2Fclojurescript-study/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xlisp","download_url":"https://codeload.github.com/xlisp/clojurescript-study/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251321867,"owners_count":21570812,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clojure","clojurescript","javascript","react","reagent"],"created_at":"2024-12-26T11:11:34.178Z","updated_at":"2025-04-28T13:47:02.242Z","avatar_url":"https://github.com/xlisp.png","language":"Clojure","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 记录ClojureScript的学习经历\n\n\n\n- [记录ClojureScript的学习经历](#%E8%AE%B0%E5%BD%95clojurescript%E4%B8%8Ereact%E7%9A%84%E5%AD%A6%E4%B9%A0%E7%BB%8F%E5%8E%86-%E5%8C%85%E6%8B%ACreagent%E5%92%8Com)\n    - [1. r/atom](#1-ratom)\n    - [2. r/render-component](#2-rrender-component)\n    - [3. cljs.http](#3-cljshttp)\n    - [4. a,button标签点击事件](#4-abutton%E6%A0%87%E7%AD%BE%E7%82%B9%E5%87%BB%E4%BA%8B%E4%BB%B6)\n    - [5. label的双击修改事件on-double-click](#5-label%E7%9A%84%E5%8F%8C%E5%87%BB%E4%BF%AE%E6%94%B9%E4%BA%8B%E4%BB%B6on-double-click)\n    - [6. input过程发生的三种常用的响应函数: input的键盘输入按下的事件on-key-down, 内容改变事件on-change, 点击input其他部分事件on-blur](#6-input%E8%BF%87%E7%A8%8B%E5%8F%91%E7%94%9F%E7%9A%84%E4%B8%89%E7%A7%8D%E5%B8%B8%E7%94%A8%E7%9A%84%E5%93%8D%E5%BA%94%E5%87%BD%E6%95%B0-input%E7%9A%84%E9%94%AE%E7%9B%98%E8%BE%93%E5%85%A5%E6%8C%89%E4%B8%8B%E7%9A%84%E4%BA%8B%E4%BB%B6on-key-down-%E5%86%85%E5%AE%B9%E6%94%B9%E5%8F%98%E4%BA%8B%E4%BB%B6on-change-%E7%82%B9%E5%87%BBinput%E5%85%B6%E4%BB%96%E9%83%A8%E5%88%86%E4%BA%8B%E4%BB%B6on-blur)\n    - [7. js副作用的写法: http://himera.herokuapp.com/synonym.html](#7-js%E5%89%AF%E4%BD%9C%E7%94%A8%E7%9A%84%E5%86%99%E6%B3%95-httphimeraherokuappcomsynonymhtml)\n    - [8. dom](#8-dom)\n- [演示 heroku: rails api + clojurescript](#%E6%BC%94%E7%A4%BA-heroku-rails-api--clojurescript)\n\n\n\n\n\n##### 1. r/atom \n只要修改atom内的任意一值,整个应用的任意一引用到atom的地方,都会底层自动修改掉\n```clojure\n(defonce counter (r/atom 0))\n```\n##### 2. r/render-component\n渲染模块,可以对cljs纯函数单独测试,单独显示,cljs repl交互式开发\n```clojure\n(defn todo-app [] [:h1 \"test...\"])\n(r/render-component [todo-app] (. js/document (getElementById \"app\"))) \n;; $('#app')\n(dom/getElement \"app\") ;;=\u003e #object[HTMLDivElement [object HTMLDivElement]]\n(. js/document (getElementById \"app\")) ;;=\u003e #object[HTMLDivElement [object HTMLDivElement]]\n\n```\n##### 3. cljs.http\n通过lambda的回调caller传出 `(:body response)`, 然后通过swap!或者reset!将其值放入atom的原子或者列表里面\n```clojure\n\n(ns todos.core\n  (:require-macros [cljs.core.async.macros :refer [go]])\n  (:require [reagent.core :as r :refer [atom]]\n            [cljs-http.client :as http]\n            [cljs.core.async :refer [\u003c!]]))\n\n(defonce todos-list-init\n  (go (let [response\n            (\u003c!\n             (http/get \"http://127.0.0.1:3001/todos\"\n                       {:with-credentials? false\n                        :query-params {\"since\" \"\"}}))]\n        (let [body (:body response)]\n          (reset! todos (zipmap  (map :id body) body) )\n          ))))\n\n(defn create-todo [text body]\n  (go (let [response\n            (\u003c!\n             (http/post \"http://127.0.0.1:3001/todos\"\n                        {:with-credentials? false\n                         :query-params {:title text}}))]\n        (body (:body response))\n        )))\n        \n(defn add-todo [text]\n  (do\n    (create-todo\n     text\n     #(swap! todos assoc (:id %) {:id (:id %) :title (:title %) :done false}))\n    )\n  )\n  \n```\n\n##### 4. a,button标签点击事件\nlambda响应函数 `{:on-* (fn [x] ..)}` 放在离标签最近的Hash里面\n```clojure\n[:li [:a {:on-click #(js/alert \"这里是a标签点击事件\")} \"Active\"  ]]\n[:button.reply {:on-click #(js/alert id)}]\n```\n##### 5. label的双击修改事件on-double-click\n当鼠标双击input时,把input变成可输入修改的模式的class\n```clojure\n[:label {:on-double-click #(reset! editing true)} title]\n```\n##### 6. input过程发生的三种常用的响应函数: input的键盘输入按下的事件on-key-down, 内容改变事件on-change, 点击input其他部分事件on-blur\n* 当鼠标点input的其他部位时,保存update提交: on-blur\n* 当改变input内容时修改input的值value: on-change\n* 按下键盘,如果是回车13就保存,如果是Esc27就停止修改\n```clojure\n      [:input {:type \"text\" :value @val\n               :id id :class class :placeholder placeholder\n               :on-blur save\n               :on-change #(reset! val (-\u003e % .-target .-value))\n               :on-key-down #(case (.-which %)\n                               13 (save)\n                               27 (stop)\n                               nil)}]\n```\n\n##### 7. js副作用的写法: http://himera.herokuapp.com/synonym.html\n\n```clojure\n\n(clojure.string/split window.location.search #\"=|\\?|\\\u0026\") ;; 得到完整的参数params\n(-\u003e js/window .-location .-href) ;; 得到完整的链接\n(.. js/window -location -href) ;; 得到完整的链接\n(.. js/window -location -search) ;; 得到完整的参数params\n\n;; 时间\n(js/Date.) ;;=\u003e #inst \"2016-11-11T08:41:21.877-00:00\"\n;; js =\u003e ` new Date().getFullYear() `\n(.toTimeString (js/Date.)) ;; =\u003e \"00:36:01 GMT-0800 (PST)\"\n(js/Date.now) ;; =\u003e 1478853434489\n(.getYear (js/Date.)) ;;=\u003e 116\n(.getFullYear (js/Date.)) ;; =\u003e 2016\n\n(defn current-time []\n  (let [date (js/Date.)]\n    (str (.getFullYear date) \"-\" (.getMonth date) \"-\" (.getDate date))\n    ) )\n(current-time) ;;=\u003e \"2016-10-11\"\n\n```\n\n方法调用\n\n```clojure\n(.method object params)\n\n(.log js/console \"hello world!\")\n```\n访问属性\n\n```clojure\n(.-property object)\n\n(.-style div)\n\n```\n设置属性\n\n```clojure\n\n(set! (.-property object))\n\n(set! (.-color (.-style div) \"#234567\"))\n\n(set! (.-innerHTML (. js/document (getElementById \"app\"))) \"ABC\")\n\n```\n\n##### 8. dom \n```clojure\n;; =\u003e $('#dateTabShop li.active a')\n(js/$ \"#dateTabShop li.active a\")\n;; *.first\n(aget (js/$ \"#dateTabShop li.active a\") 0) ;;=\u003e #object[HTMLAnchorElement http://127.0.0.1:3000/#sh-tran-date]\n;; *.first.title\n(.-title (aget (js/$ \"#dateTabShop li.active a\") 0)) ;;=\u003e \"day\"\n\n```\n\n##### 9. 滚动事件和高度计算\n\n```clojurescript\n(set! js/window.onscroll #(js/alert 111))\n\n\n;; jimw_clj.core.cur_doc_top(): 底部是27737,头部是0\n(defn cur-doc-top []\n  (.. js/document -documentElement -scrollTop))\n\n(.. js/document -documentElement -scrollHeight)\n\n;; \n(defn is-page-end []\n  (\u003c=\n   (- (.. js/document -documentElement -scrollHeight) ;; 整个页面的高度\n      (.. js/document -documentElement -scrollTop)) ;; 窗口和页面两张纸, 会变的滚动高度\n   (.. js/document -documentElement -offsetHeight)  ;; 控制台变小和变大会影响`窗口高度`\n   ))\n   \n```\n\n\n### [演示 heroku: rails api + clojurescript](http://todos-tree.herokuapp.com/todos-tree)\n\n![](./todos.jpeg)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxlisp%2Fclojurescript-study","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxlisp%2Fclojurescript-study","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxlisp%2Fclojurescript-study/lists"}