初期の頃は、Cirru 構文を使用して HTML を直接生成しようとしました
その後、Cirru 構文を使用して JavaScript テンプレートを生成しようとしました
その効果は、主に学習目的で、ほとんど十分ではありませんでした。その後、React では、単にそうするだけになりました。使わないでください
でも、将来ロードされるでしょう 静的リソースにはまだ HTML が必要なので、面倒だと思って思いつきました
いくつかの進化を経て、このモジュールは最終的に に非常によく似た書き方になりましたReact
https://github.com/mvc-works/stir-template
コードは CirruScript の下位バージョンで書かれており、API は CoffeeScript で呼び出すこともできます
stir = require :stir-tempatehtml = stir.htmlhead = stir.headbody = stir.bodydiv = stir.createFactory :divrenderPage = (data) -> stir.render stir.doctype() html null, head null, body null, div name: 'a', 'empty' div()
を模倣していることがわかります。レンダリング関数の最初のパラメータは属性で、その後に子要素が続きます
同様の補助関数 render、createElement、createFactory も提供されます
この書き方は、CoffeeScript で React コンポーネントを記述するのとほぼ同じです
自分でタグを生成する必要がある場合、次の構文を試すことができます:
newTag = stir.createFactory 'new-tag'
また、
私は個人的なプロジェクトで CirruScript を広範囲に使用してきました...これはランキングの向上と見なすことができますCoffeeScript にはカンマが多すぎて、インデントにバグがあると思います。 React は次のように使用できます:
var stir $ require :stir-template React $ require :reactvar Page $ React.createFactory $ require :./src/pagevar ({}~ html head title body meta script link div a span) stirvar 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 の構造がまだ確認できます。そして、構文があります...
インデント
少なくとも私は書いています コーディングするとき、私は常に彼のツリーがどのようになるかを考えます。デモを見ることができます:
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))
set a f1 a b f2
(set a (f1 a) b (f2))
(set a (f1 a) (, b) (f2))
set a f1 a , b f2
式を除く最初の演算子の括弧の数... どの言語でもこれを記述する通常の方法はありません
CirruScript の演算子
CirruScript のコンパイラは、式の最初の演算子を識別することによって AST を変換します
たとえば、var return が次のようになるとします。対応する式またはステートメント ASTanother div として認識されます。対応する演算子がない場合は、オブジェクトの生成に使用される関数呼び出し
さらに、data.main もメンバー式の AST を通じて処理されます
ここには、{}~ など、実際にはオブジェクト~であるなど、いくつかの奇妙な点があります
退化してる…当たり前だけど、元のグラフィックは普通だけど、それをテキストで表現するのはおかしい
Cirruの構文では、aと「a」の有無は関係ない。引用符は、実際には同じです
違いは、「a1 a2」と a1 a2 です。引用符なしでは 2 つのノードですが、引用符があると 1 つのノードになります
つまり...引用符は実際には特殊文字用ですエスケープするには、この種の「a1」「a2」も