ホームページ >ウェブフロントエンド >htmlチュートリアル >CirruScript を使用した HTML_html/css_WEB-ITnose のレンダリング

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

WBOY
WBOYオリジナル
2016-06-24 11:38:271051ブラウズ

初期の頃は、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'

また、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.

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。