国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

用 CirruScript 渲染 HTML

gghyoo / 2894人閱讀

摘要：早的時(shí)候我嘗試過(guò)用語(yǔ)法直接生成后邊也嘗試過(guò)用語(yǔ)法生成的模板效果勉勉強(qiáng)強(qiáng)主要是學(xué)習(xí)的作用后來(lái)有了就干脆不用了不過(guò)未來(lái)加載靜態(tài)資源還是需要有就覺得麻煩搞出點(diǎn)東西來(lái)這個(gè)模塊經(jīng)過(guò)幾次演變最終定型成為很相似的寫法代碼是用低版本的寫的也能在里調(diào)用

早的時(shí)候我嘗試過(guò)用 Cirru 語(yǔ)法直接生成 HTML
后邊也嘗試過(guò)用 Cirru 語(yǔ)法生成 JavaScript 的模板
效果勉勉強(qiáng)強(qiáng), 主要是學(xué)習(xí)的作用, 后來(lái)有了 React 就干脆不用了
不過(guò)未來(lái)加載靜態(tài)資源, 還是需要有 HTML, 就覺得麻煩, 搞出點(diǎn)東西來(lái)

stir-template

這個(gè)模塊經(jīng)過(guò)幾次演變, 最終定型成為 React 很相似的寫法
https://github.com/mvc-works/stir-template
代碼是用低版本的 CirruScript 寫的, API 也能在 CoffeeScript 里調(diào)用

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, 渲染函數(shù)的第一個(gè)參數(shù)是屬性, 后邊是子元素
也提供了相似的輔助函數(shù) render, createElement, createFactory
這樣寫出來(lái)的風(fēng)格, 跟 CoffeeScript 里寫 React 組件也就差不多了
自己需要生成個(gè)標(biāo)簽的話, 可以嘗試這樣的語(yǔ)法:

newTag = stir.createFactory "new-tag"

另外 算是個(gè)特殊的標(biāo)簽, React 當(dāng)中不提供
那么 stir-template 就方便配合 React 用在后者不方便的地方

Cirru 的縮進(jìn)

http://script.cirru.org/

我的個(gè)人項(xiàng)目目前已經(jīng)大量使用 CirruScript.. 算是刷排名吧
https://github.com/mvc-works/webpack-workflow
CirruScript 首先是編譯到 ES5 的代碼生成器, 其次才當(dāng)做模板語(yǔ)言用
我覺得 CoffeeScript 里逗號(hào)太多, 縮進(jìn)有 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 的結(jié)構(gòu)大概還是能看到的, 接著就是語(yǔ)法了...

縮進(jìn)

Cirru 首先不是靠很多語(yǔ)法發(fā)揮作用的語(yǔ)言, 而是靠的縮進(jìn)
整個(gè)代碼會(huì)先被解析成一棵樹, 這棵樹才是后邊執(zhí)行的重點(diǎn)
至少我在寫代碼的時(shí)候, 時(shí)時(shí)刻刻腦補(bǔ)他的樹是怎樣的, 可以看 Demo:
http://repo.cirru.org/parser/

美元符號(hào) $

美元符號(hào)是為了解決一類縮進(jìn)而引入的, 比如說(shuō)下邊這樣的代碼:

(set a (f1 (f2 (f3 x))))

縮進(jìn)以后想想都覺得很累, 會(huì)是這樣的, 還不如用括號(hào)

set a
  f1
    f2
      f3 x

那么我引入 $ 之后問(wèn)題就輕松了, 直接就可以這樣寫:

set a $ f1 $ f2 $ f3 x

逗號(hào) ,

然后逗號(hào)也是為了解決一類情況引入的, 意思大概和 $ 相反, 這樣的代碼

(set a (f1 a) (b) (f2))

改成縮進(jìn)的時(shí)候會(huì)是這樣的, 注意單行的 b 跟 f2 因?yàn)閾Q行是有括號(hào)的:

set a
  f1 a
  b
  f2

那么問(wèn)題就來(lái)了, 有這樣的代碼怎么表示, 這里的 b 沒(méi)有括號(hào)了啊:

(set a (f1 a) b (f2))

所以我引入了 ,, 作用就是去掉一層縮進(jìn), 大概就是這樣:

(set a (f1 a) (, b) (f2))

然后再用縮進(jìn)的寫法, 就不會(huì)解析出錯(cuò)了:

set a
  f1 a
  , b
  f2

根據(jù)上邊 3 條規(guī)則, Cirru 語(yǔ)法的縮進(jìn)能表示絕大部分編程需求
除了表達(dá)式第一個(gè)操作符里狂用括號(hào)的... 放哪個(gè)語(yǔ)言里都沒(méi)正常的辦法

CirruScript 的操作符

CirruScript 的編譯器是通過(guò)識(shí)別表達(dá)式第一個(gè)操作符來(lái)轉(zhuǎn)換 AST 的
比如說(shuō) var return 會(huì)被識(shí)別成對(duì)應(yīng)的表達(dá)式或者語(yǔ)句的 AST
另外的 div 這樣的, 沒(méi)有對(duì)應(yīng)的操作符, 就會(huì)被處理為函數(shù)調(diào)用

object 操作符, 用來(lái)生成對(duì)象, 它的參數(shù)都是鍵值對(duì)
它有個(gè) alias 是{}, 我覺得看起來(lái)更習(xí)慣一些, 畢竟花括號(hào)還是很眼熟的
array 操作符同樣的意思, 用來(lái)生成數(shù)組, 它的參數(shù)就是元素了
它有個(gè) alias 是 []. 空數(shù)組可能會(huì)寫成 ([]) 表示為表達(dá)式了

字面量還有標(biāo)識(shí)符我做了一些處理, 方便寫代碼用
這里邊的 null true 都是回自動(dòng)識(shí)別的, 數(shù)字也做了處理
另外 data.main 這種, 也通過(guò)成員表達(dá)式的 AST 進(jìn)行了處理

這里邊還有些挺奇怪的比如說(shuō) {}~, 其實(shí)是 object~
但是但是, 這種正確的名稱應(yīng)該是: **解構(gòu)賦值**, 只是奇怪了點(diǎn)
奇怪的語(yǔ)法還是到 http://script.cirru.org 看吧, 可以看具體 AST 是什么

CirruScript 的字符串

字符串是個(gè)奇怪的事情, 因?yàn)?Cirru 是從圖形編輯器退化而來(lái)的..
退化嘛... 自然有的東西, 原來(lái)圖形很正常, 用文本表示就怪怪怪怪了的
Cirru 的語(yǔ)法里 a 和 "a", 帶不帶引號(hào), 實(shí)際上是一樣的
不一樣的是 "a1 a2" 和 a1 a2, 沒(méi)有引號(hào)就是兩個(gè)節(jié)點(diǎn), 有就是一個(gè)
所以... 引號(hào)實(shí)際上是為了特殊字符的轉(zhuǎn)義用的, 還有這種呢 "a1" a2"
你在