前端Web框架【免費(fèi)下載鏈接】re-frameA ClojureScript framework for building user interfaces, leveraging React項(xiàng)目地址https://gitcode.com/gh_mirrors/re/re-frame點(diǎn)擊查看免費(fèi)下載在寫代碼時(shí)程序員常常需要在腦中運(yùn)行自己的程序盯著某一處代碼在意識(shí)里模擬它的執(zhí)行過程、數(shù)據(jù)如何流轉(zhuǎn)、狀態(tài)如何變化。這種對運(yùn)行時(shí)動(dòng)態(tài)runtime dynamics的推理能力直接決定了開發(fā)效率與 Bug 數(shù)量。本篇技術(shù)指南以 re-frame 官方文檔 docs/on-dynamics.md 為核心系統(tǒng)拆解 re-frame 如何通過一次一個(gè)事件的時(shí)間模型、有限狀態(tài)機(jī)式的事件處理、純函數(shù)與不可變數(shù)據(jù)、聲明式數(shù)據(jù) DSL 以及單一狀態(tài)存儲(chǔ)構(gòu)建出一個(gè)極簡單、極易在心智中模擬的動(dòng)態(tài)模型。讀完本文你將理解 re-frame 架構(gòu)設(shè)計(jì)背后以開發(fā)體驗(yàn)為最高目標(biāo)的取舍邏輯并能從源碼層面路由隊(duì)列的 FSM、攔截器鏈、訂閱信號(hào)圖印證這套動(dòng)態(tài)模型是如何落地的。核心主張re-frame 擁有一個(gè)簡單動(dòng)態(tài)過程re-frame 文檔提出了一個(gè)非常大膽的核心論斷re-frame has a simple dynamic processre-frame 擁有一個(gè)簡單的動(dòng)態(tài)過程并且進(jìn)一步強(qiáng)調(diào)關(guān)于 re-frame沒有比這更重要的一點(diǎn)。re-frame 的最高設(shè)計(jì)目標(biāo)是提供優(yōu)秀的開發(fā)者體驗(yàn)為此它不惜在部分場合犧牲函數(shù)式純潔性文檔中甚至用了gasp!來表達(dá)這種反叛。而幾乎所有能提升開發(fā)者體驗(yàn)的因素中呈現(xiàn)一個(gè)簡單的動(dòng)態(tài)模型貢獻(xiàn)最大——它讓程序員更容易在腦中模擬運(yùn)行、更容易定位問題也因此大幅減少 Bug 的產(chǎn)生。這一論斷是理解 re-frame 全部架構(gòu)設(shè)計(jì)的鑰匙。下面我們從動(dòng)態(tài)這個(gè)概念本身出發(fā)逐層向下剖析。什么是動(dòng)態(tài)State 與 Computation 的反饋回路水動(dòng)力學(xué)Hydrodynamics、熱力學(xué)Thermodynamics、社會(huì)動(dòng)力學(xué)Social Dynamics——這些學(xué)科名稱中的dynamics都意味著觀察系統(tǒng)如何隨時(shí)間/空間變化然后對變化的原因建模。Web 應(yīng)用本質(zhì)上是一個(gè)順序進(jìn)程sequential process隨時(shí)間推移它從一個(gè)State遷移到另一個(gè)State行為也隨之改變。動(dòng)態(tài)正是由Computation與State跨時(shí)間相互作用而產(chǎn)生的State本質(zhì)上是凝結(jié)的時(shí)間——?dú)v史被物化后的結(jié)果并由一輪輪的Computation塑形但這不是單向的雖然Computation創(chuàng)造StateComputation自身又被State控制例如基于State的謂詞決定執(zhí)行哪條分支。于是兩者之間存在一個(gè)反饋回路feedback loop。對程序員而言要在腦中模擬這種 State/Computation 的反饋過程需要同時(shí)調(diào)度很多東西很快就會(huì)逼近認(rèn)知預(yù)算cognitive budget的上限。某些時(shí)間、State 與 Computation的交互方式可以降低動(dòng)態(tài)復(fù)雜度、讓心智模擬更容易另一些則適得其反把系統(tǒng)推向幾乎不可能模擬的一端——那類系統(tǒng)會(huì)滋生難纏的 Bug且維護(hù)起來令人恐懼。正如 Alan Perlis 所說要理解一個(gè)程序你必須同時(shí)成為機(jī)器和程序本身。靜態(tài)關(guān)注點(diǎn) vs 動(dòng)態(tài)關(guān)注點(diǎn)程序員們驚人地聚焦于系統(tǒng)的靜態(tài)方面DRY、代碼行數(shù)、高內(nèi)聚低耦合……這些當(dāng)然有用但或許我們更應(yīng)該關(guān)注那些讓運(yùn)行時(shí)更容易或更難在腦中模擬的品質(zhì)。這一點(diǎn)被談?wù)摰眠h(yuǎn)遠(yuǎn)不夠。re-frame 的目標(biāo)就是擁有盡可能簡單的動(dòng)態(tài)模型——因?yàn)檫@才是驅(qū)動(dòng)開發(fā)者生產(chǎn)力的第一要素。接下來我們從高層面逐步下沉看看 re-frame 是如何交付這套簡單動(dòng)態(tài)模型的。re-frame 的時(shí)間模型一次一個(gè)事件re-frame 應(yīng)用以一個(gè)事件接一個(gè)事件的方式在其計(jì)算/狀態(tài)空間中前進(jìn)。時(shí)間的單位就是一個(gè)事件event。每個(gè)事件都會(huì)從頭到尾完整處理完隊(duì)列中下一個(gè)事件才會(huì)被處理。re-frame 不支持事件被掛起suspended稍后再重啟的模型——應(yīng)用在任何時(shí)刻都只做一件事處理一個(gè)事件。此外當(dāng)事件改變應(yīng)用狀態(tài)時(shí)這種改變是事務(wù)性的transactional瞬間、一次性完成而不是增量、漸進(jìn)式的。因此在高層面re-frame 以離散單元交付動(dòng)態(tài)每個(gè)單元有清晰的開始與結(jié)束可以被獨(dú)立理解和分析。源碼視角路由隊(duì)列就是一個(gè)有限狀態(tài)機(jī)這一時(shí)間模型在源碼中有著極為具體的實(shí)現(xiàn)re-frame 的事件路由隊(duì)列 src/re_frame/router.cljc 用一個(gè)**手工實(shí)現(xiàn)的有限狀態(tài)機(jī)FSM**來管理事件隊(duì)列的生命周期。源碼注釋直言The processing/handling of an event happens asynchronously sometime after that event was enqueued via dispatch……So now we hand-roll our own, finite-state-machine and all.EventQueue維護(hù)四個(gè)狀態(tài):idle空閑、:scheduled已調(diào)度、即將運(yùn)行、:running正在逐事件處理、:paused因:flush-dom等元數(shù)據(jù)暫停。-fsm-trigger用case一次性描述全部狀態(tài)遷移例如[:idle :add-event] [:scheduled #(do (-add-event this arg) (-run-next-tick this))] [:scheduled :add-event] [:scheduled #(-add-event this arg)] [:scheduled :run-queue] [:running #(-run-queue this)] [:running :add-event] [:running #(-add-event this arg)] [:running :pause] [:paused #(-pause this arg)] [:running :exception] [:idle #(-exception this arg)] [:running :finish-run] (if (empty? queue) ;; FSM guard [:idle] [:scheduled #(-run-next-tick this)]) [:paused :add-event] [:paused #(-add-event this arg)] [:paused :resume] [:running #(-resume this)]這套 FSM 落實(shí)了文檔描述的時(shí)間紀(jì)律dispatch見 src/re_frame/core.cljc只是把事件 push 進(jìn) FIFO 隊(duì)列并通過goog.async.nextTick調(diào)度處理保證處理很快發(fā)生但不立即發(fā)生-run-queue會(huì)一次性處理完當(dāng)前隊(duì)列中的所有事件不中途讓出瀏覽器控制權(quán)但若處理過程中有新事件被 dispatch 進(jìn)來它們會(huì)留在隊(duì)列里、留到下一輪處理從而在不讓瀏覽器餓死與不讓隊(duì)列失控之間取得平衡只有帶:flush-dom元數(shù)據(jù)的事件如(dispatch ^:flush-dom [:event-id ...])會(huì)觸發(fā):pause——注意這里暫停的是隊(duì)列處理而不是掛起某個(gè)事件的處理事件本身一旦開始就被完整執(zhí)行到底這與文檔事件不可被掛起重啟的表述一致每個(gè)事件被處理前-process-1st-event-in-queue會(huì)重置events/*handling*等動(dòng)態(tài)綁定保證每個(gè)事件都作為一個(gè)全新的頂層事件來處理。事務(wù)性的狀態(tài)變更一次事件、一次性改狀態(tài)的另一個(gè)關(guān)鍵實(shí)現(xiàn)在 src/re_frame/events.cljc 的handle函數(shù)中它在執(zhí)行攔截器鏈之前記錄:app-db-before在鏈執(zhí)行之后記錄:app-db-after而真正的狀態(tài)寫入由 src/re_frame/fx.cljc 中內(nèi)置的:db效果處理器完成——它只做一次(reset! app-db value)。也就是說從應(yīng)用視角看app-db是從舊值一步跳變到新值的中間不存在任何可見的中間態(tài)。單個(gè)事件的處理有限狀態(tài)機(jī) 數(shù)據(jù)流還記得大學(xué)里計(jì)算理論課上的內(nèi)容嗎計(jì)算能力最受限、也因此最容易在心智中模擬的動(dòng)態(tài)過程叫做有限狀態(tài)機(jī)FSM。而在計(jì)算譜系的另一端是圖靈機(jī)——你可以用圖靈機(jī)計(jì)算任何東西這很了不起但你的編程鍵盤從此變成了一把上膛的槍能做不代表應(yīng)該做。re-frame 處理單個(gè)事件的總體過程就是一部分有限狀態(tài)機(jī)、一部分?jǐn)?shù)據(jù)流事件處理過程沿著一條線性的邏輯狀態(tài)集逐步推進(jìn)——也就是大家熟知的The Dominoes六塊多米諾骨牌任意時(shí)刻只處于一個(gè)狀態(tài)每個(gè)狀態(tài)中有特定的行為/計(jì)算且各狀態(tài)之間充分隔離可以獨(dú)立理解、獨(dú)立分析你可以放心地放大任何一個(gè)局部去理解它而忽略其余部分。re-frame 文檔并沒有正式地以 FSM 術(shù)語來講述這套機(jī)制而是把它呈現(xiàn)為引發(fā)狀態(tài)間遷移的數(shù)據(jù)流。但多米諾骨牌本質(zhì)上就是一臺(tái)簡單的 FSM——正因如此每個(gè)事件都被一種簡單的計(jì)算方式處理使得在腦中模擬變得容易。文檔用兩個(gè)并排的注意注記點(diǎn)明了這一設(shè)計(jì)哲學(xué)Less Is More少即是多在這一層面re-frame 是刻意地不那么強(qiáng)大。它只交付完成任務(wù)所需的最小計(jì)算能力。與其提供大量自由度與偶發(fā)的魔法它給你的是簡單性與確定性。Less Is Scary少是可怕的給程序員更少的計(jì)算能力會(huì)讓他們不安。我們生活在需求隨時(shí)變化的世界里出于自我保護(hù)我們總是被更強(qiáng)大的能力吸引而不是更少。六塊多米諾骨牌The Dominoesre-frame 應(yīng)用是一個(gè)永動(dòng)循環(huán)每次迭代包含 6 個(gè)階段。由于這些階段逐個(gè)發(fā)生re-frame 稱之為六塊多米諾骨牌級(jí)聯(lián)。相關(guān)的完整代碼級(jí)講解見 docs/dominoes-30k.md 與 docs/a-loop.md這里先給出概貌Event Dispatch事件派發(fā)——事件是向量如[:delete-item 2486]首個(gè)元素是事件種類其余是可選數(shù)據(jù)。事件以領(lǐng)域特定方式表達(dá)用戶意圖Event Handling事件處理——用reg-event-fx/reg-event-db注冊的處理器純函數(shù)計(jì)算事件的效果Effect Handling效果處理——用reg-fx注冊的效果處理器把數(shù)據(jù)化的效果變成真實(shí)動(dòng)作如reset!應(yīng)用狀態(tài)Query查詢——由reg-sub注冊的查詢函數(shù)從應(yīng)用狀態(tài)中提取/計(jì)算物化視圖View視圖——Reagent 組件視圖函數(shù)通過subscribe從信號(hào)圖取數(shù)計(jì)算 hiccup 格式的 DOM 描述DOM——Reagent/React 把 hiccup 變成真實(shí)瀏覽器 DOM。注意其中存在兩個(gè)同構(gòu)的子級(jí)聯(lián)1-2-3 與 4-5-6 結(jié)構(gòu)相似——倒數(shù)第二塊多米諾2 與 5計(jì)算所需變更的數(shù)據(jù)描述最后一塊3 與 6做真正的臟活并執(zhí)行這些描述。但你幾乎不需要操心那些臟活多米諾re-frame 大多替你包辦了。這也是文檔引用尼采那句只有在對立面的滋養(yǎng)下才會(huì)結(jié)出果實(shí)的用意——在函數(shù)式系統(tǒng)里最有趣的部分恰恰是如何安排不去保持純粹。攔截器鏈多米諾 2 與 3 的底層實(shí)現(xiàn)機(jī)制從源碼結(jié)構(gòu)看多米諾 2事件處理與多米諾 3效果處理實(shí)際上都由**攔截器鏈interceptor chain**機(jī)制驅(qū)動(dòng)完整機(jī)制見 docs/Interceptors.md 與 src/re_frame/interceptor.cljc。每個(gè)攔截器本質(zhì)上是一個(gè)包含:before與:after兩個(gè)函數(shù)的數(shù)據(jù) map。執(zhí)行一條攔截器鏈分三步創(chuàng)建context包含:coeffects與:effects兩個(gè) map→ 沿鏈正向依次調(diào)用每個(gè)攔截器的:before逐步構(gòu)建coeffects即事件處理器的輸入→ 沿鏈反向依次調(diào)用每個(gè)攔截器的:after逐步處理effects即事件處理器的輸出。這正是execute*的實(shí)現(xiàn)(defn execute* [ctx] (- ctx (invoke-interceptors :before) change-direction (invoke-interceptors :after)))在 src/re_frame/core.cljc 的-reg-event中可以看到每次reg-event-db/reg-event-fx/reg-event-ctx注冊都會(huì)在用戶提供的攔截器前自動(dòng)拼接一段固定鏈條(events/register id [cofx/inject-db fx/do-fx flow/interceptor std-interceptors/inject-global-interceptors interceptors (handler-interceptor handler)])其中inject-db把當(dāng)前app-db注入:coeffectssrc/re_frame/cofx.cljcdo-fx作為多米諾 3 在:after階段執(zhí)行:effects里的每個(gè)效果src/re_frame/fx.cljc。整個(gè)鏈條就是一臺(tái)線性狀態(tài)的 FSM先正向構(gòu)建輸入再反向處理輸出兩個(gè)方向之間只有一個(gè)清晰的轉(zhuǎn)向點(diǎn)。多米諾內(nèi)部的純函數(shù)站在時(shí)間與空間之外再往下深挖一層單個(gè)多米諾內(nèi)部的動(dòng)態(tài)又是什么樣在多米諾內(nèi)部我們又回到了圖靈完備的 ClojureScript 世界。幸運(yùn)的是為了馴服這種可怕的力量re-frame 要求你寫純函數(shù)、使用不可變數(shù)據(jù)純函數(shù)站在時(shí)間之外。要理解它們你不需要知道它們何時(shí)運(yùn)行、當(dāng)時(shí)系統(tǒng)的狀態(tài)是什么——你只需要知道實(shí)際傳入的參數(shù)值時(shí)間的暴政在純函數(shù)內(nèi)部依然存在內(nèi)部仍有執(zhí)行流所以你或許仍需在腦中模擬它但純函數(shù)交付的動(dòng)態(tài)過程更小、更易于認(rèn)知處理。而且不止如此我們以參數(shù)形式向純函數(shù)提供數(shù)據(jù)它返回?cái)?shù)據(jù)這些數(shù)據(jù)不可變——這把純函數(shù)與任何地點(diǎn)解耦它不受數(shù)據(jù)放在哪里的影響。由于純函數(shù)既脫離時(shí)間又脫離空間它們就能以最數(shù)學(xué)化的方式組合從而極大地壓制運(yùn)行時(shí)動(dòng)態(tài)的復(fù)雜度。這種純函數(shù) 不可變數(shù)據(jù)的實(shí)踐正是 re-frame 注冊 API 的形態(tài)reg-event-db的處理器簽名是(fn [db event] - db)reg-event-fx的處理器簽名是(fn [cofx event] - effects-map)二者都是數(shù)據(jù)進(jìn)、數(shù)據(jù)出的純函數(shù)唯一不純的部分被集中放逐到多米諾 3 的reg-fx效果處理器中如 examples/simple/src/simple/core.cljs 中注冊的:timer、:time-color-change等處理器全部是純函數(shù)。香蕉問題非純函數(shù)的代價(jià)文檔引用 Erlang 之父 Joe Armstrong 的名言來警示非純函數(shù)你想要一根香蕉結(jié)果得到的卻是一只拿著香蕉的大猩猩以及整片叢林。要理解一個(gè)伸手去抓香蕉的函數(shù)你必須同時(shí)理解與叢林變化相關(guān)的全部動(dòng)態(tài)——你必須做全局推理而不是局部推理而這往往極其困難。這正是 re-frame 把副作用隔離到效果處理器、把業(yè)務(wù)邏輯約束在純函數(shù)里的根本動(dòng)機(jī)。聲明式用數(shù)據(jù) DSL 消解動(dòng)態(tài)復(fù)雜度聲明式編程意味著讓X發(fā)生、但不指定如何發(fā)生。它把過程抽象掉從而折疊了與之相關(guān)的動(dòng)態(tài)。re-frame 中處處是聲明式Reagent 是強(qiáng)大的聲明式 DOM 能力——視圖函數(shù)返回?cái)?shù)據(jù)React/Reagent 負(fù)責(zé)如何渲染事件是聲明式的——(dispatch [:delete-item 2486])只表達(dá)意圖效果是聲明式的——處理器返回{:db new-db}這樣的數(shù)據(jù)而不是直接執(zhí)行副作用信號(hào)圖Signal Graph是聲明式的——reg-sub聲明查詢與輸入信號(hào)之間的數(shù)據(jù)依賴關(guān)系而不是命令式地手動(dòng)派發(fā)更新。而且所有這些聲明式都是用**基于數(shù)據(jù)的 DSLdata-based DSL**實(shí)現(xiàn)的這正是 Clojure 之道Hiccup是絕佳的 DSL而且它就是數(shù)據(jù)——簡單情形下只是數(shù)據(jù)字面量需要時(shí)還可以用計(jì)算來生成數(shù)據(jù)SQL是基于字符串的——作為字面量尚可但要計(jì)算字符串時(shí)就糟糕透頂正則表達(dá)式更是如此——一種強(qiáng)大且偶爾出人意料的計(jì)算范式卻偏偏用字符串承載。在 re-frame 中攔截器是數(shù)據(jù):before/:after的 map、事件是數(shù)據(jù)向量、效果是數(shù)據(jù)map、DOM 是數(shù)據(jù)hiccup 向量、訂閱依賴是數(shù)據(jù)如reg-sub的:- [:a-sub]糖語法。從 src/re_frame/subs.cljc 的sugar實(shí)現(xiàn)可以看到reg-sub的三種輸入信號(hào)聲明方式默認(rèn)取app-db、顯式信號(hào)函數(shù)、:-糖最終都被解析為輸入信號(hào)函數(shù) 計(jì)算函數(shù)聲明式數(shù)據(jù)被統(tǒng)一編譯成響應(yīng)式依賴。狀態(tài)管理單一數(shù)據(jù)源一次事件一次更新沒有任何東西比需要分發(fā)狀態(tài)distribute state更能昭示復(fù)雜動(dòng)態(tài)了——除非再加上……還要經(jīng)過不可靠的網(wǎng)絡(luò)。這也是面向?qū)ο缶幊塘钊祟^疼的根源我們當(dāng)初怎么會(huì)認(rèn)為把狀態(tài)刻意分發(fā)進(jìn)一個(gè)個(gè)隱藏的可變小包、然后動(dòng)態(tài)同步它們是個(gè)好主意re-frame 的做法截然相反狀態(tài)只放在一個(gè)地方app-db一個(gè)由 src/re_frame/db.cljc 定義的單一ratom(def app-db (ratom {}))任何應(yīng)用代碼都不直接訪問它——讀取走訂閱寫入走事件每個(gè)事件周期只更新一次如前所述:db效果處理器在一次reset!中完成更新你永遠(yuǎn)不必?fù)?dān)心應(yīng)用處于某種略微不一致的中間狀態(tài)沒有狀態(tài)同步的動(dòng)態(tài)因?yàn)橹挥幸粋€(gè)存儲(chǔ)你不需要擔(dān)心變更從一個(gè) store 傳播到另一個(gè) store的動(dòng)態(tài)問題。從 src/re_frame/subs.cljc 可以看到訂閱層通過query-reaction緩存去重兩個(gè)并發(fā)的相同查詢共享同一個(gè)執(zhí)行中的處理器這既避免了重復(fù)計(jì)算也維持了單一事實(shí)來源。文檔還特別指出一個(gè)推論性的好處在一瞬間你可以檢查應(yīng)用中全部狀態(tài)是否符合某個(gè) schema——包括剛從服務(wù)器通過線路到達(dá)的數(shù)據(jù)因?yàn)槿繝顟B(tài)都在那一個(gè)app-db里。一次事故報(bào)告簡單動(dòng)態(tài)模型的警示re-frame 文檔以一段半開玩笑的口吻記錄了尾部風(fēng)險(xiǎn)fat tail risk5 月 12 日大約凌晨 12:47re-frame 獲得了自我意識(shí)在控制臺(tái)打印了一行日志哦是嗎我會(huì)讓你們看看什么叫真正的簡單動(dòng)態(tài)過程f#$%ers。雖然核冬天隨之而來但人類最終戰(zhàn)勝了機(jī)器人軍團(tuán)Bug 也被找到并修復(fù)。不過如果你注意到某個(gè)信號(hào)圖呈現(xiàn)出Cortex 結(jié)構(gòu)我們?nèi)越ㄗh預(yù)防性重啟。這段文字幽默地提醒即便最克制的動(dòng)態(tài)模型也可能出現(xiàn)意外涌現(xiàn)的復(fù)雜度保持警惕、保持可觀測性永遠(yuǎn)是好習(xí)慣?？偨Y(jié)為什么 re-frame 程序可以少寫測試re-frame 應(yīng)用簡單到可以在腦子里模擬而隨之而來的全是好結(jié)果。這種簡單性來自多個(gè)因素的疊加文檔按層回顧在高層面事件被離散地、一個(gè)接一個(gè)地處理單個(gè)事件被以類 FSM 的方式逐步處理六塊多米諾骨牌純函數(shù)與不可變數(shù)據(jù)極大地壓制了動(dòng)態(tài)多個(gè)環(huán)節(jié)使用了聲明式的、基于數(shù)據(jù)的 DSL只有一個(gè)狀態(tài)存儲(chǔ)且每個(gè)事件周期只事務(wù)性地更新一次。文檔在結(jié)尾分享了一個(gè)真實(shí)的社區(qū)軼事——某位經(jīng)驗(yàn)豐富的 Clojure 開發(fā)者用了 re-frame 九個(gè)月后驚訝地發(fā)現(xiàn)用 re-frame 九個(gè)月了。你知道奇怪的是什么嗎自從開始用 re-frame我發(fā)現(xiàn)自己寫的測試越來越少了。一位此前寫過大量測試、有自我約束力的程序員憑直覺開始少寫測試甚至自己也感到驚訝。文檔作者相信這位程序員的直覺告訴他這樣做是安全的——他正在對自己體驗(yàn)到的簡單性做出反應(yīng)。雖然這只是一個(gè)樣本N of 1但幾乎沒有比這更好的推薦了。附錄 A把動(dòng)態(tài)實(shí)體化Reified Dynamics——trace 機(jī)制與 re-frame-10x 的愿景文檔承認(rèn)程序動(dòng)態(tài)這個(gè)話題整體上被討論得不夠但也存在著名的例外。Brett Victor 在 2012 年的《Learnable Programming》中開宗明義因此一個(gè)編程系統(tǒng)的目標(biāo)應(yīng)該是支持并鼓勵(lì)強(qiáng)大的思維方式讓程序員能夠看見并理解其程序的執(zhí)行他關(guān)心的不是代碼的靜態(tài)方面而是系統(tǒng)的動(dòng)態(tài)以及更高一層——系統(tǒng)開發(fā)的動(dòng)態(tài)。對于第一個(gè)目標(biāo)Brett Victor 演示了程序員如何直接操縱代碼中的值并即時(shí)觀察變化帶來的影響。演示極具視覺沖擊力但示例程序很小文檔作者坦言自己的應(yīng)用更大、更平淡按鈕 數(shù)據(jù)處理很難看出該概念如何擴(kuò)展到我的世界。不過一個(gè) ClojureScript 程序員可以通過熱代碼重載hot code reloading、REPL、事件即時(shí)重放獲得極佳的近即時(shí)反饋——這雖未完全實(shí)現(xiàn) Brett Victor 演示中的直接操縱但對比漫長的編譯周期已相當(dāng)不錯(cuò)。在倉庫的 examples/simple/src/simple/core.cljs 中可以看到典型的:dev/after-load鉤子熱重載后調(diào)用rf/clear-subscription-cache!并重新掛載 UI。對于第二個(gè)目標(biāo)re-frame 有明確的規(guī)劃讓程序員獲得對程序執(zhí)行的深度洞察。與其讓程序員掙扎于心智模擬不如讓他們在事件發(fā)生后觀察并與程序執(zhí)行的實(shí)體化reification互動(dòng)。這正是工具re-frame-10x的遠(yuǎn)大目標(biāo)以務(wù)實(shí)的方式在更大、更工業(yè)級(jí)的編程任務(wù)上兌現(xiàn) Brett Victor 的第二個(gè)目標(biāo)。re-frame-10x 的方法論是把應(yīng)用處理一個(gè)事件時(shí)的動(dòng)態(tài)實(shí)體化為數(shù)據(jù)。程序員應(yīng)該能觀察到處理過程中執(zhí)行的每一份 ClojureScript 代碼無需再憑空想象代碼如何執(zhí)行——因?yàn)槟隳芤跃唧w的形式看見它。雖然目標(biāo)完全可以實(shí)現(xiàn)但實(shí)現(xiàn)目前只走了一部分路。值得強(qiáng)調(diào)的是這套實(shí)體化愿景的底層基礎(chǔ)設(shè)施已經(jīng)存在于當(dāng)前倉庫中src/re_frame/trace.cljc 定義了完整的 trace 機(jī)制——包括按:op-type組織的tag-schema:event、:event/handler、:event/do-fx、:sub/create、:sub/run、:sub/dispose等以及register-epoch-cb提供的每次 dispatch 的完整級(jí)聯(lián)裝配記錄每個(gè) epoch 攜帶:dispatch-id、:parent-dispatch-id、:app-db/before、:app-db/after、:coeffects、:effects、:interceptors、:sub-runs等它把一個(gè)事件從派發(fā)到 DOM 的全過程以純數(shù)據(jù)的形式交給下游工具。此外src/re_frame/router.cljc 中的dispatch-and-settle允許開發(fā)者派發(fā)一個(gè)事件并等待其同步級(jí)聯(lián)含:fx [:dispatch ...]子事件沉淀完畢——這套以數(shù)據(jù)重放動(dòng)態(tài)的能力正是實(shí)體化動(dòng)態(tài)理念在核心庫層面的直接體現(xiàn)。進(jìn)一步閱讀想從代碼層面加深對本主題的理解可繼續(xù)閱讀 docs/a-loop.mdre-frame 的數(shù)據(jù)循環(huán)與六塊多米諾、docs/dominoes-30k.md帶代碼片段的逐多米諾講解、docs/Interceptors.md攔截器機(jī)制詳解、docs/subscriptions.md信號(hào)圖與訂閱以及核心實(shí)現(xiàn)文件 src/re_frame/router.cljc、src/re_frame/events.cljc、src/re_frame/interceptor.cljc 和 src/re_frame/core.cljc。贊分享前端Web框架【免費(fèi)下載鏈接】re-frameA ClojureScript framework for building user interfaces, leveraging React項(xiàng)目地址https://gitcode.com/gh_mirrors/re/re-frame點(diǎn)擊查看免費(fèi)下載相關(guān)推薦Zotero Style插件嵌套標(biāo)簽視圖同步失效的排查與修復(fù)指南Zotero Style插件嵌套標(biāo)簽視圖同步失效的排查與修復(fù)指南 Zotero Style作為一款功能強(qiáng)大的Zotero插件為用戶提供了豐富的文獻(xiàn)管理增強(qiáng)功能桌面應(yīng)用知識(shí)管理科研Ruffle模擬器5個(gè)簡單步驟讓Flash內(nèi)容在Chrome中完美運(yùn)行Ruffle模擬器5個(gè)簡單步驟讓Flash內(nèi)容在Chrome中完美運(yùn)行 Ruffle是一款基于Rust語言開發(fā)的Flash Player模擬器它能讓已經(jīng)過時(shí)音視頻語言運(yùn)行時(shí)在 Substrate FRAME 運(yùn)行時(shí)中嵌入 XQVMpallet-xqvm 集成指南在 Substrate FRAME 運(yùn)行時(shí)中嵌入 XQVMpallet xqvm 集成指南 導(dǎo)讀 pallet xqvm 是 xquad 倉庫中一個(gè)特殊的 F創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考