ホームページ >ウェブフロントエンド >htmlチュートリアル >CirruScript を使用した HTML_html/css_WEB-ITnose のレンダリング
初期の頃は、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'
また、e06a435748547c66ddc39f1f79f69b67 に入力するときにエスケープする必要はありません。これはグラフィカル インターフェイスなので、それが正常です
然后为了表示字符串, 我动起来歪脑筋, 对, 用冒号 :
冒号开头的就是字符串了, 没有特殊字符的时候还可以少一个字符
: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.