2つの質問は興味深いです、あなたはどのようなマイナスを見て、javascriptの同様の解決策を見ましたか？
各タグ（divなど）は、Htmls.div関数として表示されます。
出力ではHTMLElementを返し、入力では任意の数の型の引数を受け取ります。
1）オブジェクト-属性を定義するために使用されます。
2）文字列-テキスト
3）HTMLElement-ネストされたタグ
4）配列-テキストとタグのリスト。
2つの例
例1
私たちは持っています
var items = [ "x" , "y" ];
取得したい
< div >
< div id ="some" class ="some-class" >
some div
</ div >
some text
< div > x </ div >
< div > y </ div >
</ div >
結果には、必要なものが含まれています。
var result;
with (Htmls) {
result = div(
div({ id: "some" , class : "some-class" },
"some div" ),
"some text" ,
items.map( function (i) {
return div(i);
}))
.outerHTML;
}
* This source code was highlighted with Source Code Highlighter .
上記のトピックの例2
data = {
title: 'C pocket reference' ,
type: 'PDF Document' ,
tag: 'programming' ,
created_at: '5.31.2010'
}
with (Htmls) {
var tagUrl = "tags/" + data.tag;
var result = tr(
td(data.title),
td(data.type),
td(a({href: tagUrl}, data.tag)),
td(data.created_at))
.outerHTML;
}
* This source code was highlighted with Source Code Highlighter .
プレーンコード
Htmls = ( function () {
function initTag(tag, args) {
for ( var i = 0; i < args.length; i++) {
var arg = args[i];
if (arg.constructor == String) {
tag.innerHTML += arg;
}
else if (arg instanceof HTMLElement) {
tag.appendChild(arg);
}
else if (arg.constructor == Array) {
initTag(tag, arg);
}
else if (arg.constructor == Object) {
for ( var j in arg) {
tag.setAttribute(j, arg[j]);
}
}
}
return tag;
}
function createTag(name, args) {
return initTag( document .createElement(name), args);
}
return {
div: function () {
return createTag( "div" , arguments);
}
//
}
})();
* This source code was highlighted with Source Code Highlighter .