简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

CirruScript を使用した HTML_html/css_WEB-ITnose のレンダリング

WBOY
リリース： 2016-06-24 11:38:27
オリジナル
1014 人が閲覧しました

初期の頃は、Cirru 構文を使用して HTML を直接生成しようとしました
その後、Cirru 構文を使用して JavaScript テンプレートを生成しようとしました
その効果は、主に学習目的で、ほとんど十分ではありませんでした。その後、React では、単にそうするだけになりました。使わないでください
でも、将来ロードされるでしょう 静的リソースにはまだ HTML が必要なので、面倒だと思って思いつきました

stir-template

いくつかの進化を経て、このモジュールは最終的に に非常によく似た書き方になりました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 を広範囲に使用してきました...これはランキングの向上と見なすことができます

https://github.com/mvc-works/webpack-workflow

CirruScript は、最初に ES5 用のコード ジェネレーターにコンパイルされ、次にテンプレート言語として使用されます

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 の構造がまだ確認できます。そして、構文があります...



インデント

    Cirru は依存する言語ではありません。多くの構文を使用しますが、インデントに依存します
  • コード全体が最初にツリーに解析され、このツリーがその後の実行の焦点になります

    少なくとも私は書いています コーディングするとき、私は常に彼のツリーがどのようになるかを考えます。デモを見ることができます:

    http://repo.cirru.org/parser/


ドル記号$

    ドル記号は問題を解決するために使用されます。これはクラスのインデントによって導入されます。たとえば、次のようになります。コード: 
  • (set a (f1 (f2 (f3 x))))
    ログイン後にコピー

    インデントを考えるととても疲れます。このようになります。括弧を使用する方が良いです。

    set a  f1    f2      f3 x
    ログイン後にコピー
    • $ を導入すると、問題は簡単になります。次のように書くことができます。 
    set a $ f1 $ f2 $ f3 x
    ログイン後にコピー

comma,

そして、カンマも一種の状況を解決するために導入されており、その意味はおそらく $ の逆です このようなコード 
    (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 の演算子

CirruScript のコンパイラは、式の最初の演算子を識別することによって AST を変換します

たとえば、var return が次のようになるとします。対応する式またはステートメント AST

another div として認識されます。対応する演算子がない場合は、オブジェクトの生成に使用される関数呼び出し

オブジェクト演算子として処理されます。そのパラメーターはキーと値のペアです。これには {} というエイリアスがあり、中括弧は依然としてよく知られていると思います。配列演算子は配列を生成するために使用されます。エイリアスは [] です。空の配列は ([]) として記述され、式として表現されます。

コードの記述を容易にするために、リテラルと識別子にいくつかの処理が行われています。

ここでの null tr​​ue は自動的に認識されます。数値も処理されます

さらに、data.main もメンバー式の AST を通じて処理されます

ここには、{}~ など、実際にはオブジェクト~であるなど、いくつかの奇妙な点があります

でも、これは正しいです。名前は次のようになります。 : **割り当ての構造化**、ちょっと奇妙です。奇妙な構文については、http://script.cirru.org にアクセスしてください。具体的な AST が何であるかを確認できます。だって、Cirruはグラフィックエディタから退化しているから…

退化してる…当たり前だけど、元のグラフィックは普通だけど、それをテキストで表現するのはおかしい
Cirruの構文では、aと「a」の有無は関係ない。引用符は、実際には同じです
違いは、「a1 a2」と a1 a2 です。引用符なしでは 2 つのノードですが、引用符があると 1 つのノードになります
つまり...引用符は実際には特殊文字用ですエスケープするには、この種の「a1」「a2」も