Curru ScriptでHTMLをレンダリングする

早い時はCurru文法で直接HTMLを生成するの後にもCurru文法でJavaScriptのテンプレートを生成します。の効果を試したことがあります.主に勉強の効果です.後にReactがあれば、もういいです.でも、将来は静的な資源をロードします.HTMLが必要です.面倒くさいと思って、何かを作ってきます.
stir-template
このモジュールは何回かの進化を経て、最終的にはReactとして定型化されています.https://github.com/mvc-works/stir-templateコードは低バージョンのCuruScriptで書いています.APIもCoffee Scriptで呼び出すことができます.

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 Curruのインデント
http://script.cirru.org/
私の個人プロジェクトはCrruScriptをたくさん使いました.ランキングを計算します.https://github.com/mvc-works/webpack-workflow CrruScriptはまずES 5にコンパイルしたコードジェネレータです.次にテンプレート言語として使います.Coffee Scriptにカンマが多すぎると思います.バックしてbugがあります.楽しくない時は常にCuruScriptでstir-mplateと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の構造は大体見られます.続いて文法です.

字下げ

Currruはまず多くの文法によって機能する言語ではなく、全体のコードをインデントすることによってまず木に解析されます.この木こそ後から実行するポイントです.少なくとも私はコードを書く時に、彼の木はどのようなものですか?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))

そこで私は,を導入しました.その役割は1階のインデントを取り除くことです.

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

そして、インデントの書き方をすると、エラーを解析できなくなります.

set a
  f1 a
  , b
  f2

上の3つの規則によって、Curru文法のインデントは圧倒的に多くのプログラミングニーズを表します.式の最初の操作符の中でかっこを使います.どの言語に入れても正常な方法はありません.
CurruScriptの操作子
CurruScriptのコンパイラは、式の最初のオペレータを識別してASTを変換するvarなど、対応する式または文として認識されるASTの他のreturnのような、対応するオペレータがないと、関数呼出しとして処理される.divオペレータは、オブジェクトを生成するために使用されています.パラメータはすべてキー値です.これはobjectがあります.もっと慣れていると思います.結局、括弧は見覚えのある{}オペレータと同じ意味です.配列を生成するために使用されます.そのパラメータは元素です.arrayがあります.空配列は[]と表現されます.
文字の量と識別子はここの辺の([]) nullで自動的に識別され、数字も処理されました.またtrueのように、メンバー表現のASTで処理されました.
この中にはちょっと変なのがあります.例えばdata.mainは{}~です.でも、この正確な名前は***解構賦価値**です.ちょっとおかしい文法です.http://script.cirru.orgまで見てください.具体的なASTは何ですか?
CurruScriptの文字列
文字列は変なことです.Curruは図形エディタから退化したものです.退化しています.自然にあるものです.図形は正常です.テキストで表してもおかしくなります.Curruの文法にはobject~とaとがあります.引用符が付いていません.実は同じではありません."a"と"a1 a2"です.引用符がないのは2つのノードです.あるのは一つのためです.引用符は実際に特殊な文字の変換のために使われています.これもあります.a1 a2に"a1\" a2"にあります.