是否有包装HTML的Javascript模板系统？
我想知道是否有类似于包装HTML的Javascript模板系统的东西，这样我们就不必直接处理HTML（是的，我知道这是个坏主意，但只是出于好奇） 因此，与其编写HTML，不如：是否有包装HTML的Javascript模板系统？,html,ruby,xml,json,templates,Html,Ruby,Xml,Json,Templates,我想知道是否有类似于包装HTML的Javascript模板系统的东西，这样我们就不必直接处理HTML（是的，我知道这是个坏主意，但只是出于好奇） 因此，与其编写HTML，不如： <body> <div id="title">Great work!</div> <span>My name is Peter</span> </body> 我知道这看起来有点奇怪，但我真的很喜欢一切都是一个物体：） 任何语言都有这样的实现
<body>
<div id="title">Great work!</div>
<span>My name is Peter</span>
</body>
看看他们的例子！太棒了 您也应该退房。很酷！它不是JSON，但其原理是相同的。你不必处理HTML。你也应该检查一下。很酷！它不是JSON，但其原理是相同的。您不必处理HTML。我刚刚编写了一个解析器的小示例，类似于您提到的，使用简单的旧JavaScript。我的代码有点脏（正如Casey Hope提到的，您不应该扩展
Object.prototypeObject.prototype.toHtml = function(options)
{
//Iterates over elements
var processElements = function(obj, handler)
{
//Stores found elements
var elements = [];
for (var elem in obj)
{
//Skips all 'derived' properties
if (!obj.hasOwnProperty(elem)) continue;
//Attribute
if (elem.indexOf("_") == 0)
{
elements.push({type: "attribute", name : /^_([a-z][0-9a-z]+)$/i(elem)[1], value : obj[elem]});
}
//Internal contents
else if (elem == "contents")
{
elements.push({type: "contents", value : obj[elem]});
}
//Text node
else if (elem == "text")
{
elements.push({type: "text", value : obj[elem]});
}
//Ordinary element
else
{
elements.push({type: "element", name : elem, value : obj[elem]});
}
}
//Returns parsed elements
return elements;
}
//Internal function to deal with elements
var toHtmlInternal = function(name, elements)
{
//Creates a new element by name using DOM
var element = document.createElement(name);
//Element children and attributes
var children = processElements(elements);
for (var i = 0; i < children.length; i++)
{
switch (children[i]["type"])
{
case "element":
element.appendChild(toHtmlInternal(children[i]["name"], children[i]["value"]));
break;
case "attribute":
element.setAttribute(children[i]["name"], children[i]["value"]);
break;
case "text":
element.appendChild(document.createTextNode(children[i]["value"]));
break;
case "contents":
for (var j = 0; j < children[i]["value"].length; j++)
{
var content = children[i]["value"][j];
if (typeof content == "string")
{
element.appendChild(document.createTextNode(content));
}
else if (typeof content == "object")
{
element.appendChild(content.toHtml().firstChild);
}
}
break;
}
}
//Returns it
return element;
}
//Initial element checkment
var initial = processElements(this);
//Generic wrapper
var wrapper = document.createElement("div");
for (var i = 0; i < initial.length; i++)
{
if (initial[i]["type"] == "element")
{
wrapper.appendChild(toHtmlInternal(initial[i]["name"], initial[i]["value"]));
}
}
//Returns wrapper
return wrapper;
};
我刚刚编写了一个解析器的小示例，类似于您提到的，使用简单的旧JavaScript。我的代码有点脏（正如Casey Hope提到的，您不应该扩展
Object.prototypeObject.prototype.toHtml = function(options)
{
//Iterates over elements
var processElements = function(obj, handler)
{
//Stores found elements
var elements = [];
for (var elem in obj)
{
//Skips all 'derived' properties
if (!obj.hasOwnProperty(elem)) continue;
//Attribute
if (elem.indexOf("_") == 0)
{
elements.push({type: "attribute", name : /^_([a-z][0-9a-z]+)$/i(elem)[1], value : obj[elem]});
}
//Internal contents
else if (elem == "contents")
{
elements.push({type: "contents", value : obj[elem]});
}
//Text node
else if (elem == "text")
{
elements.push({type: "text", value : obj[elem]});
}
//Ordinary element
else
{
elements.push({type: "element", name : elem, value : obj[elem]});
}
}
//Returns parsed elements
return elements;
}
//Internal function to deal with elements
var toHtmlInternal = function(name, elements)
{
//Creates a new element by name using DOM
var element = document.createElement(name);
//Element children and attributes
var children = processElements(elements);
for (var i = 0; i < children.length; i++)
{
switch (children[i]["type"])
{
case "element":
element.appendChild(toHtmlInternal(children[i]["name"], children[i]["value"]));
break;
case "attribute":
element.setAttribute(children[i]["name"], children[i]["value"]);
break;
case "text":
element.appendChild(document.createTextNode(children[i]["value"]));
break;
case "contents":
for (var j = 0; j < children[i]["value"].length; j++)
{
var content = children[i]["value"][j];
if (typeof content == "string")
{
element.appendChild(document.createTextNode(content));
}
else if (typeof content == "object")
{
element.appendChild(content.toHtml().firstChild);
}
}
break;
}
}
//Returns it
return element;
}
//Initial element checkment
var initial = processElements(this);
//Generic wrapper
var wrapper = document.createElement("div");
for (var i = 0; i < initial.length; i++)
{
if (initial[i]["type"] == "element")
{
wrapper.appendChild(toHtmlInternal(initial[i]["name"], initial[i]["value"]));
}
}
//Returns wrapper
return wrapper;
};
只需四处搜索那些寻找单独使用Javascript构建网站的方法的问题。这些似乎经常出现。可能的重复我不明白使用Javascript模板系统的目的。。。要么在没有启用Javascript的情况下切断用户的连接，要么每件事都要做两次……E4X有点与您的要求相反，但它使每件事都成为一个对象：@daniel。javascript引擎将在服务器端工作，将其转换为xhtml。它只是一个包装器，如果用户在浏览器上使用javascript，它不会受到影响。只需四处搜索那些寻找单独使用javascript构建网站的方法的问题。这些似乎经常出现。可能的重复我不明白使用Javascript模板系统的目的。。。要么在没有启用Javascript的情况下切断用户的连接，要么每件事都要做两次……E4X有点与您的要求相反，但它使每件事都成为一个对象：@daniel。javascript引擎将在服务器端工作，将其转换为xhtml。它只是一个包装器，如果用户在浏览器上打开javascript，它不会受到影响。这不是一回事。这就像编写HTML一样，但不必那么明确（没有结尾标记等）。但我的意思是用json代替xml，这是两码事。这就像编写HTML一样，但不必那么明确（没有结尾标记等）。但是我的意思是只使用json而不是xml。扩展
Object.prototype中的循环。我知道。代码只是一般思想的表达（这种解析器可能是什么样子的）。这段代码可以很容易地重写，以避免将来出现错误。不，我几个小时前为这个问题写了这段代码。如果您愿意，您可以在其他地方托管它。扩展对象.prototype
是一个非常糟糕的主意，因为它会中断中的循环。我知道。代码只是一般思想的表达（这种解析器可能是什么样子的）。这段代码可以很容易地重写，以避免将来出现错误。不，我几个小时前为这个问题写了这段代码。如果你愿意，你可以在别的地方举办。
//A simple testing template
var html = ({
//Element name is just a plain name here
body: {
//Nested element
div : {
//All attributes are prepended with underscore
_id : "title",
//Content of the element is represented by such construction
text : "Great work!"
},
span : {
text : "My name is Peter"
},
h1 : {
_class : "common",
//Elements can be defined using 'contents' notation also, so we could include text nodes
contents : ["This is my ", {a : {text: "beautiful"}} , " header"]
}
}
}).toHtml();
alert(html.innerHTML);