摘要:早的時候我嘗試過用語法直接生成后邊也嘗試過用語法生成的模板效果勉勉強強主要是學習的作用后來有了就干脆不用了不過未來加載靜態資源還是需要有就覺得麻煩搞出點東西來這個模塊經過幾次演變最終定型成為很相似的寫法代碼是用低版本的寫的也能在里調用
早的時候我嘗試過用 Cirru 語法直接生成 HTML
后邊也嘗試過用 Cirru 語法生成 JavaScript 的模板
效果勉勉強強, 主要是學習的作用, 后來有了 React 就干脆不用了
不過未來加載靜態資源, 還是需要有 HTML, 就覺得麻煩, 搞出點東西來
這個模塊經過幾次演變, 最終定型成為 React 很相似的寫法
https://github.com/mvc-works/stir-template
代碼是用低版本的 CirruScript 寫的, API 也能在 CoffeeScript 里調用
stir = require :stir-tempate html = stir.html head = stir.head body = stir.body div = stir.createFactory :div renderPage = (data) -> stir.render stir.doctype() html null, head null, body null, div name: "a", "empty" div()
可以看到模仿了 React, 渲染函數的第一個參數是屬性, 后邊是子元素
也提供了相似的輔助函數 render, createElement, createFactory
這樣寫出來的風格, 跟 CoffeeScript 里寫 React 組件也就差不多了
自己需要生成個標簽的話, 可以嘗試這樣的語法:
newTag = stir.createFactory "new-tag"
另外 算是個特殊的標簽, React 當中不提供
那么 stir-template 就方便配合 React 用在后者不方便的地方
http://script.cirru.org/
我的個人項目目前已經大量使用 CirruScript.. 算是刷排名吧
https://github.com/mvc-works/webpack-workflow
CirruScript 首先是編譯到 ES5 的代碼生成器, 其次才當做模板語言用
我覺得 CoffeeScript 里逗號太多, 縮進有 bug, 不開心一直用
CirruScript 配合 stir-template 跟 React 可以這樣用:
var stir $ require :stir-template React $ require :react var Page $ React.createFactory $ require :./src/page var ({}~ html head title body meta script link div a span) stir var line $ (text) (div ({} (:className :line)) text) = module.exports $ (data) return $ stir.render stir.doctype html null head null title null ":Coffee Webpack Starter" meta $ object (:charset :utf-8) link $ object (:rel :icon) :href :http://tp4.sinaimg.cn/5592259015/180/5725970590/1 link $ {} (:rel :stylesheet) :href $ cond data.dev :src/main.css data.style script $ object (:src data.vendor) (:defer true) script $ object (:src data.main) (:defer true) body null div ({} (:class :intro)) div ({} (:class :title)) ":This is a demo of Webpack usage." line ":Open Console to see how it loads." div null span null ":Read more at " a {} (:href :http://github.com/teambition/coffee-webpack-starter) , :github.com/teambition/coffee-webpack-starter span null :. div ({} (:class :demo)) React.renderToString (Page)
首先 HTML 的結構大概還是能看到的, 接著就是語法了...
縮進
Cirru 首先不是靠很多語法發揮作用的語言, 而是靠的縮進
整個代碼會先被解析成一棵樹, 這棵樹才是后邊執行的重點
至少我在寫代碼的時候, 時時刻刻腦補他的樹是怎樣的, 可以看 Demo:
http://repo.cirru.org/parser/
美元符號 $
美元符號是為了解決一類縮進而引入的, 比如說下邊這樣的代碼:
(set a (f1 (f2 (f3 x))))
縮進以后想想都覺得很累, 會是這樣的, 還不如用括號
set a f1 f2 f3 x
那么我引入 $ 之后問題就輕松了, 直接就可以這樣寫:
set a $ f1 $ f2 $ f3 x
逗號 ,
然后逗號也是為了解決一類情況引入的, 意思大概和 $ 相反, 這樣的代碼
(set a (f1 a) (b) (f2))
改成縮進的時候會是這樣的, 注意單行的 b 跟 f2 因為換行是有括號的:
set a f1 a b f2
那么問題就來了, 有這樣的代碼怎么表示, 這里的 b 沒有括號了啊:
(set a (f1 a) b (f2))
所以我引入了 ,, 作用就是去掉一層縮進, 大概就是這樣:
(set a (f1 a) (, b) (f2))
然后再用縮進的寫法, 就不會解析出錯了:
set a f1 a , b f2
根據上邊 3 條規則, Cirru 語法的縮進能表示絕大部分編程需求
除了表達式第一個操作符里狂用括號的... 放哪個語言里都沒正常的辦法
CirruScript 的編譯器是通過識別表達式第一個操作符來轉換 AST 的
比如說 var return 會被識別成對應的表達式或者語句的 AST
另外的 div 這樣的, 沒有對應的操作符, 就會被處理為函數調用
object 操作符, 用來生成對象, 它的參數都是鍵值對
它有個 alias 是{}, 我覺得看起來更習慣一些, 畢竟花括號還是很眼熟的
array 操作符同樣的意思, 用來生成數組, 它的參數就是元素了
它有個 alias 是 []. 空數組可能會寫成 ([]) 表示為表達式了
字面量還有標識符我做了一些處理, 方便寫代碼用
這里邊的 null true 都是回自動識別的, 數字也做了處理
另外 data.main 這種, 也通過成員表達式的 AST 進行了處理
這里邊還有些挺奇怪的比如說 {}~, 其實是 object~
但是但是, 這種正確的名稱應該是: **解構賦值**, 只是奇怪了點
奇怪的語法還是到 http://script.cirru.org 看吧, 可以看具體 AST 是什么
字符串是個奇怪的事情, 因為 Cirru 是從圖形編輯器退化而來的..
退化嘛... 自然有的東西, 原來圖形很正常, 用文本表示就怪怪怪怪了的
Cirru 的語法里 a 和 "a", 帶不帶引號, 實際上是一樣的
不一樣的是 "a1 a2" 和 a1 a2, 沒有引號就是兩個節點, 有就是一個
所以... 引號實際上是為了特殊字符的轉義用的, 還有這種呢 "a1" a2"
你在 里打字的時候不用轉義, 圖形界面嘛, 那是正常的時候
然后為了表示字符串, 我動起來歪腦筋, 對, 用冒號 :
冒號開頭的就是字符串了, 沒有特殊字符的時候還可以少一個字符
:utf-8 跟 ":utf-8" 表示的是一個意思, 編譯的結果也是一樣的
必須加引號的是 ":hello world" 這樣的有特殊字符的節點
看多了 Clojure 的話其實冒號你是會習慣的...
最新版的 Gulp 應該是能識別 gulpfile.cirru 這樣的后綴的
我也寫了插件, 應該問題不大, CoffeeScript 這么難用都用下來了
https://github.com/Cirru/gulp-cirru-script
一般我會寫個 template.cirru 文件, 從 Gulp 里引用
最后執行一下函數, 就能從數據渲染出 HTML 來了:
require("cirru-script/lib/register") gulp.task "html", (cb) -> html = require"./template.cirru" # <-- 引用看這里 fs = require "fs" if not env.dev assets = require "./build/assets.json" env.main = "./build/#{assets.main}" env.vendor = "./build/#{assets.vendor}" fs.writeFile "index.html", (html env), cb # <-- 調用看這里
希望你有興趣用 CirruScript 生成 HTML. 早日淘汰手寫 HTML.
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/85913.html
摘要:早的時候我嘗試過用語法直接生成后邊也嘗試過用語法生成的模板效果勉勉強強主要是學習的作用后來有了就干脆不用了不過未來加載靜態資源還是需要有就覺得麻煩搞出點東西來這個模塊經過幾次演變最終定型成為很相似的寫法代碼是用低版本的寫的也能在里調用 早的時候我嘗試過用 Cirru 語法直接生成 HTML后邊也嘗試過用 Cirru 語法生成 JavaScript 的模板效果勉勉強強, 主要是學習的作用...
摘要:這是項目相關的代碼就是把代碼變換成代碼當前版本的用的是手工轉化代碼是比較亂的雖然也比較有效其中支持導致代碼的復雜性難以降低而且實際上我當前寫的幾個項目都是沒有開啟因為提升并不明顯另一個原因是代碼和幾乎是對應的在對所有文件都打包的前提下查看源 這是 Cirru 項目相關的代碼, 就是把 Cirru 代碼變換成 JavaScript 代碼 當前版本的 CirruScript 用的是手工轉化...
摘要:參與情況第一天趕上了時間晚上聚餐沒去第二天趕飛機提前退場關于的幾個分項沒有在場微信群幾乎全程參與并且大部分時間在維護氣氛陰差陽錯兩天都沒上錯過了推廣機會公司展位準備不充分連續兩年的問題需要注意印象深的演講百度上的很贊而且在上對付鼠標事件我很 參與情況 第一天趕上了時間, 晚上聚餐沒去 Nodebot 第二天趕飛機提前退場, 關于 React 的幾個分項沒有在場 微信群幾乎全程參與, ...
摘要:細說后端模板渲染客戶端渲染中間層服務器端渲染前端與后端渲染方式的發展大致經歷了這樣幾個階段后端模板渲染客戶端渲染中間層服務器端渲染。與后端模板渲染剛好相反,客戶端渲染的頁面渲染都是在客戶端進行,后端不負責任何的渲染,只管數據交互。 細說后端模板渲染、客戶端渲染、node 中間層、服務器端渲染(ssr) 前端與后端渲染方式的發展大致經歷了這樣幾個階段:后端模板渲染、客戶端渲染、node ...
閱讀 930·2021-11-23 09:51
閱讀 993·2021-11-18 10:02
閱讀 1909·2021-09-10 11:27
閱讀 3140·2021-09-10 10:51
閱讀 779·2019-08-29 15:13
閱讀 2064·2019-08-29 11:32
閱讀 2502·2019-08-29 11:25
閱讀 3045·2019-08-26 11:46