下面是花瓣的一个模板引擎，是不是先写成html再用什么工具能生成
(function(rt) {
var templates = rt.templates,
attrs = function() {
return rt.attrs.apply(rt, arguments)
}, _ = function() {
return rt._.apply(rt, arguments)
}, img = function() {
return rt.img.apply(rt, arguments)
}, imgURL = function() {
return rt.imgURL.apply(rt, arguments)
}, imgSize = function() {
return rt.imgSize.apply(rt, arguments)
}, avatar = function() {
return rt.avatar.apply(rt, arguments)
}, isVerified = function() {
return rt.isVerified.apply(rt, arguments)
}, url = function() {
return rt.url.apply(rt, arguments)
}, mkurl = function() {
return rt.mkurl.apply(rt, arguments)
}, GACampaignURL = function() {
return rt.GACampaignURL.apply(rt, arguments)
}, escape = function() {
return rt.escape.apply(rt, arguments)
}, __t = rt.templates,
emerge = function() {
return rt.renderSync.apply(rt, arguments)
};
__t["base/people_pins"] = function(locals) {
var buf = [];
with(locals || {}) {
var interp, __val__ = emerge("base/header");
buf.push(null == __val__ ? "" : __val__);
var __val__ = emerge("base/people_layout", {
req: req,
user: page.user,
ctx: "pins",
body_tpl: "base/people_pins_body",
page: page
});
buf.push(null == __val__ ? "" : __val__)
}
return buf.join("")
}, __t["base/chrome_callout"] = function(locals) {
var buf = [];
with(locals || {}) {
var interp;
buf.push("
<
div"), buf.push(attrs({
id: "chrome_callout",
style: "display: none;",
"class": "has-close phide"
})), buf.push(">
<div"), buf.push(attrs({
"class": "wrapper"
})), buf.push("><div"), buf.push(attrs({
"class": "intro sheet"
})), buf.push("><span>安装花瓣的chrome采集工具，你可以方便地收集网络上的图片，<br"), buf.push(attrs({})), buf.push("/>视频及网页截图，这是花瓣的精髓所在。</span><a"), buf.push(attrs({
target: "_blank",
href: "#",
onclick: "return false;",
"class": "install-extension btn btn18 rbtn"
})), buf.push("><strong> 安装花瓣Chrome扩展</strong><span></span></a><a"), buf.push(attrs({
"class": "close"
})), buf.push('></a></div></div></div><script>(function(){if(!Browser.chrome||Browser.version<18){document.id("chrome_callout").dispose();return}var a=Cookie.read("_hb_chrome_extention");!a&&!document.html.hasClass("hbChromeExtInstalled")&&document.id("chrome_callout").removeClass("has-close").show(),$$("#chrome_callout .close").addEvent("click",function(){Cookie.write("_hb_chrome_extention",!0,{duration:365}),document.id("chrome_callout").hide()}),$$("#chrome_callout .install-extension").addEvent("click",function(){return installHuabanChromeAddon(),document.id("chrome_callout").hide(),!1})})()</script>')
}
return buf.join("")
}, __t["base/header_main_menu"] = function(locals) {
var buf = [];
with(locals || {}) {
var interp, categories = settings.categories,
groups = [];
for (var i = 0, l = categories.length; i < l; i++) {
var category = categories[i];
if (category.display === !1) continue;
category.nav_link = "/favorite/" + category.id + "/", groups[category.group] = groups[category.group] || [], groups[category.group].push(category)
}
buf.push("<div"), buf.push(attrs({
id: "header_main_menu"
})), buf.push("><div"), buf.push(attrs({
"class": "inner clearfix"
})), buf.push("><div"), buf.push(attrs({
"class": "left-module"
})), buf.push("><a"), buf.push(attrs({
href: "/following/",
"class": "main-link bold following"
})), buf.push(">我的关注</a><a"), buf.push(attrs({
href: "/all/",
"class": "main-link bold all with-line"
})), buf.push(">最新采集</a><a"), buf.push(attrs({
href: "/design/?md=top",
"class": "main-link design"
})), buf.push(">花瓣设计</a><a"), buf.push(attrs({
href: "/ent/?md=top",
"class": "main-link ent"
})), buf.push(">花瓣娱乐<i"), buf.push(attrs({
"class": "new-icon"
})), buf.push("></i></a><a"), buf.push(attrs({
href: "/gift/?md=top",
"class": "main-link gift"
})), buf.push(">花瓣礼物</a><a"), buf.push(attrs({
href: "/weekly/",
"class": "main-link weekly"
})), buf.push(">周刊</a><a"), buf.push(attrs({
target: "_blank",
href: "http://visionblog.huaban.com/",
"class": "main-link visionblog with-line"
})), buf.push(">访谈</a><a"), buf.push(attrs({
target: "_blank",
href: "/apps/",
"class": "main-link apps"
})), buf.push(">移动应用</a></div><div"), buf.push(attrs({
"class": "right-module"
})), buf.push("><div"), buf.push(attrs({
"class": "row-0"
})), buf.push("><div"), buf.push(attrs({
"class": "group"
})), buf.push(">");
for (var $index = 0, $$l = groups[0].length; $index < $$l; $index++) {
var cat = groups[0][$index];
buf.push("<a"), buf.push(attrs({
href: cat.nav_link
})), buf.push(">" + escape((interp = cat.name) == null ? "" : interp) + "</a>")
}
buf.push("</div></div><div"), buf.push(attrs({
"class": "row-1"
})), buf.push("><div"), buf.push(attrs({
"class": "group"
})), buf.push(">");
for (var $index = 0, $$l = groups[1].length; $index < $$l; $index++) {
var cat = groups[1][$index];
buf.push("<a"), buf.push(attrs({
href: cat.nav_link
})), buf.push(">" + escape((interp = cat.name) == null ? "" : interp) + "</a>")
}
buf.push("</div><div"), buf.push(attrs({
"class": "group"
})), buf.push(">");
for (var $index = 0, $$l = groups[2].length; $index < $$l; $index++) {
var cat = groups[2][$index];
buf.push("<a"), buf.push(attrs({
href: cat.nav_link
})), buf.push(">" + escape((interp = cat.name) == null ? "" : interp) + "</a>")
}
buf.push("</div></div><div"), buf.push(attrs({
"class": "row-2"
})), buf.push("><div"), buf.push(attrs({
"class": "group"
})), buf.push(">");
for (var $index = 0, $$l = groups[3].length; $index < $$l; $index++) {
var cat = groups[3][$index];
buf.push("<a"), buf.push(attrs({
href: cat.nav_link
})), buf.push(">" + escape((interp = cat.name) == null ? "" : interp) + "</a>")
}
buf.push("</div><div"), buf.push(attrs({
"class": "group"
})), buf.push("><a"), buf.push(attrs({
href: "/all/videos/"
})), buf.push(">视频</a>");
for (var $index = 0, $$l = groups[4].length; $index < $$l; $index++) {
var cat = groups[4][$index];
buf.push("<a"), buf.push(attrs({
href: cat.nav_link
})), buf.push(">" + escape((interp = cat.name) == null ? "" : interp) + "</a>")
}
buf.push("</div>");
if (req.promotions && req.promotions.dropdown_icontxt_promotions && req.promotions.dropdown_icontxt_promotions.length) {
buf.push("<div"), buf.push(attrs({
"class": "group promotion"
})), buf.push(">");
for (var i = 0, $$l = req.promotions.dropdown_icontxt_promotions.length; i < $$l; i++) {
var promo = req.promotions.dropdown_icontxt_promotions[i];
i <= 6 && (buf.push("<a"), buf.push(attrs({
href: "" + promo.promotion_url + "",
target: promo.open_in_new_tab ? "_blank" : "_self",
"class": "brown-link"
})), buf.push(">" + escape((interp = promo.title) == null ? "" : interp) + "</a>"))
}
buf.push("</div>")
}
buf.push("</div></div></div><div"), buf.push(attrs({
"class": "bottom-bar"
})), buf.push("><a"), buf.push(attrs({
onclick: "app.switchHeaderTo('side');return false;",
href: "#",
"class": "to-side btn-with-icon btn"
})), buf.push("><i"), buf.push(attrs({
"class": "pin-icon"
})), buf.push("></i><span"), buf.push(attrs({
"class": "text"
})), buf.push("> 固定到左侧</span></a><div"), buf.push(attrs({
"class": "links"
})), buf.push("><a"), buf.push(attrs({
href: "/about/#goodies"
})), buf.push(">花瓣采集工具</a><a"), buf.push(attrs({
href: "/about/"
})), buf.push(">关于我们</a><a"), buf.push(attrs({
href: "/fm/joinus/"
})), buf.push(">加入我们</a><a"), buf.push(attrs({
href: "/pins/53553/"
})), buf.push(">用户反馈</a><a"), buf.push(attrs({
href: "/about/#links"
})), buf.push(">友情链接</a></div></div><div"), buf.push(attrs({
"class": "up-arrow"
})), buf.push('></div></div>
<script>((function(){if(location.hash){var a=$$("a[href="+location.hash+"]")[0];a&&(a.click(),docScroller.toElement(a))}})).delay(100)</script>')
}
return buf.join("")
}, __t["base/people_likes_boards"] = function(locals) {
var buf = [];
with(locals || {}) {
var interp, __val__ = emerge("base/header");
buf.push(null == __val__ ? "" : __val__);
var __val__ = emerge("base/people_layout", {
req: req,
user: page.user,
ctx: "likes",
body_tpl: "base/people_likes_boards_body",
page: page
});
buf.push(null == __val__ ? "" : __val__)
}
return buf.join("")
}
........
})(app);
确实是纯手写的，因为他们有一套自己的前端架构，或者称作框架，但是绝对不是jquery这种类型的东西。
推荐一篇文章，http://www.csdn.net/article/2013-04-19/2814961
你在这篇文章中挑一个框架（或者库）研究一下，就明白是怎么回事了。
这个是模版已经被编译成 Javascript 了，只需要一个运行时就可以做页面渲染。至于模版是不是先写成 HTML，这个不一定，要看模版引擎支持解析什么格式。模版引擎太多了，绝大多数都是这样来实现的，想找一个来试试或者研究的话，可以戳这里：http://garann.github.io/template-chooser/