開發 fullstack application 時,從 backend 要送資料到 frontend ,這是很常見的事,而這件事有三種不同的作法:
- API
- HTML 頁面初始化
- 編譯期初始化
通常就是讓 backend 提供 API ,然後 frontend 去送出 http request 來取得資料。然而,有一種情況:「 frontend App 要初始化的時候,就需要從 backend 取得幾個變數來做初始化,由於只有不到十個變數、資料量不大、資料也不會變化,似乎為此特別做一個 API 也太麻煩了。」
於是,對於上述的問題就可以考慮直接透過 html document 來夾帶資料的作法:
a. 當 backend 在生成 page content 時,在 hiccup format 的 html 裡加入下方這一行。注意:MIME type 要設定為 application/json,如此一來,瀏覽器就不會去執行它。
[:script#data-tag {:type "application/json"}
(json/write-str {:key-a data-a :key-b data-b})]
b. 在 frontend 的 ClojureScript 裡,可以透過如下的程式碼來取得資料:
(defn init-config []
(let [data (->> (js/document.getElementById "data-tag")
(.-innerHTML)
(.parse js/JSON))]
(js->clj data :keywordize-keys true)))
還有一種情況是:「如果需要初始化的資料,根本一開始就只是放在一個靜態的檔案裡」這種情況,就可以考慮最後一種作法,讓 ClojureScript 利用 macro 在編繹期去讀取檔案。