随着前端领域的发展和社会化分工的需要，继前端攻城湿之后，又一重要岗位横空出世&&重构攻城湿！所谓的重构攻城湿，他们的一大特点之一，就是精通CSS配置文件的编写。。。前端攻城湿跟重构攻城湿是一对好基友，你写逻辑来，我写样式。
好吧，本文并不是介绍重构攻城湿这个职业的，而是通过一个简单的场景来说说：
1. 在用前端模板之前，我们是肿么动态创建节点的
2. 为什么要使用前端模板
一个简单的场景
下面这张图片看着应该很眼熟吧？没错，是从mac QQ的好友列表里面截出来的。作为一名前端攻城湿，相信不少童鞋的第一反应是：需要用什么样的html结构来标识它？样式要怎么写？
好吧，就假设我们可以用下面的dom结构来标识这个&好友&，不考虑其合理性，同时，样式部分我们华丽丽地直接忽略
&img src="/img/bg.png" /&
&h3&小卡的测试号&/h3&
&div&大家好，我是个性签名&/div&
大家知道，我们的QQ好友列表是不固定的，于是必须得进行&动态创建&。我们通常会肿么做呢？
老湿说：createElement神马的是王道
老湿曾经谆谆教诲我们说，不要通过innerHTML来创建节点，因为那会让代码变得混乱不堪。好歹也拿过优秀少先队员的称号，当然得听老湿话了，于是我乖乖地写下如下代码：
var card = document.createElement('div');
var avatar = document.createElement('img');
avatar.src = '/img/header.png';
card.appendChild(avatar);
var nick = document.createElement('h3');
var nickTxt = document.createTextNode('小卡的测试号');
nick.appendChild(nickTxt);
card.appendChild(nick);
var signature = document.createElement('div');
// 个性签名
var signatureTxt = document.createTextNode('大家好，我是个性签名');
signature.appendChild(signatureTxt);
card.appendChild(signature);
createElement的问题
筋疲力竭地敲完上面地代码，我露出了满足地微笑：老湿你坑我哪！ 就这么几个破节点，让我敲这么多代码？
好吧，后来我才知道我错怪老湿了，他让我用createElement地方式来创建节点，但没说过让我人肉敲啊。人类进步的源动力之一就是懒，计算机存在的很大价值就是为了解放生产力，干嘛不换个思路，让代码来帮我们生成代码呢？代码生成代码？听着好玄乎，其实并不难，请看
好吧，即使我们真的做到了&让代码为我们写代码&，看看上面人肉敲的那坨东西，有没有发现什么问题？
自言自语神马的最讨论了，最大的问题在于：dom结构很不直观，你压根不知道你创建出来的节点结构是神马样子的！！
换别人接手你的代码，第一件事就是得把上面的代码跑一遍，然后耐着性子打开控制台把dom结构翻一遍，才能知道你上面那坨代码究竟造了个什么鬼东西出来。好吧，那我改。。。
总结下：费体力，不直观
那些年，我们一起用过的innerHTML
毛少将说过：innerHTML是个好属性！看看换做innerHTML我们会肿么做？
var card = document.createElement('div');
card.innerHTML = '&img src="/img/bg.png" /&' +
'&h3&小卡的测试号&/h3&' +
'&div&大家好，我是个性签名&/div&';
哇！只需要几行代码就搞定了，麻麻再也不用担心我加班了！写代码，so easy！
一切似乎很美好，但是，慢着！假如我们现在要创建一批节点呢？上面把资料都写死了不通用啊！
很简单嘛，把动态变化的那几个字段提取出来不就得了，如下代码所示，瞬间高档大气上档次
function createCard(avatarURL, nick, signature){
var card = document.createElement('div');
card.innerHTML = '&img src="'+ avatarURL +'" /&' +
'&h3&'+ nick +'&/h3&' +
'&div&'+ signature +'&/div&';
createCard('/img/bg.png', '小卡的测试号', '大家好，我是个性签名');
innerHTML的问题
很好，字符串相加，一堆引号，似乎看出点问题来了。上面的场景算是很简单的，动态变化的内容不过就头像、昵称、个性签名三个，但现实世界远比我们预料的要复杂得多。如果我们想把显示的好友资料再扩展以下，加上在线状态、是否会员、是否手机在线，那么，上面的代码可能变成这样（只是yy的）
function createCard(avatarURL, nick, signature, onlineState, isVIP, isMobileOnline){
var onlineTxt = '';
switch(onlineState){
onlineTxt = '在线';
onlineTxt = '离线';
onlineTxt = '忙碌';
onlineTxt = '在线';
var card = document.createElement('div');
// 有性能洁癖的兄弟看到下面的代码表拿砖头砸我
card.innerHTML = '&img src="'+ avatarURL +'" /&' +
'&h3&'+ nick +'&/h3&' +
'&div&'+ onlineTxt +'&/div&' +
// 在线状态
'&div&'+ (isVIP ? '会员' : '非会员') +'&/div&';
// 是否会员
if(isMobileOnline){
card.innerHTML += '&div&'+ (isMobileOnline ? '手机在线' : '') +'&/div&';
// 是否手机在线
card.innerHTML += '&div&'+ signature +'&/div&';
// 个性签名
显然，代码开始变得有点混乱了，再加上id、class以及其他属性，相信我，绝对会很壮观。。。
缺点总结：可维护性较差（解决方案在后文会说到）
重构的童鞋说：我不想看你的代码！
上面简单对比了createElement、innerHTML创建节点的两种方式，细心的童鞋不难看出笔者的倾向性&&innerHTML。
随着前端领域的发展和社会化分工的需要，继前端攻城湿之后，又一重要岗位横空出世&&重构攻城湿！所谓的重构攻城湿，他们的一大特点之一，就是精通CSS配置文件的编写。。。
前端攻城湿跟重构攻城湿是一对好基友，你写逻辑来，我写样式。
&&重构的兄弟说：把你的HTML交出来！
于是，我把之前的那段代码给他，就是这货
var card = document.createElement('div');
card.innerHTML = '&img src="'+ avatarURL +'" /&' +
'&h3&'+ nick +'&/h3&' +
'&div&'+ signature +'&/div&';
&&重构的兄弟：。。。谁要看你的代码，我要看HTML结构！！
&&我：。。。要命有一条～～要不你把createCard 调用一下？
&&重构的兄弟怒了：想试试千年杀？！!
&&我：？？！！擦，别～～你骚等～～～
于是，我简单倒腾了一下，给了它下面这东西，还是最开头的那段HTML，只不过把所有动态变化的内容，用$XX的形式代替了
&div id="my_tmpl"&
&img src="${avatar}" /&
&h3&${nick}&/h3&
&div&${signature}&/div&
重构的童鞋拿到他要的东西，心满意足的就回去写他的CSS去了，那我们呢？也很简单，原来拼字符串，现在正则换变量，如下
var data = {
avatar: '/img/bg.png',
nick: '小卡的测试号',
signature: '大家好，我是个性签名'
var html = document.getElementById('my_tmpl').innerHTML;
html = html.replace(/\$\{(.+?)\}/g, function(all, $1){ // 将${XX}替换成data[XX]
return data[$1];
这里我们已经隐约看到了前端模板的身影了，结构、样式与逻辑分离的第一步已经实现了，重构的童鞋根据约定好的HTML模板写CSS样式，前端的童鞋负责往模板里填内容、更新内容，绑定事件，处理用户交互等，这样做的好处很明显：
1. 结构、表现、逻辑分离，便于重构、前端童鞋的分工配合
2. 更好的可维护性，再也不用被一堆createElement，或破碎的字符串之间绕晕了
原来就是这货：前端模板引擎的本质
看着前面的${avatar}、${nick}等，很多童鞋应该有似曾相似之感。没错，这里用的替换标识，跟jQuery Tmpl的变量替换标识是一样的，可参考
前端模板引擎的本质，就是变量替换而已。
看到这里，你是不是觉得：原来这货就是前端模板引擎啊，不过如此嘛！如果你有这种感觉，那么：
1. 你以为前端模板引擎有多玄乎啊，本来绕来绕去，最终就是变量替换那么回事
2. Too young，to simple，sometimes, too naive. 前端模板引擎做的事情，除了变量替换之外，还要处理逻辑判断、循环、模板嵌套、预渲染预处理等一堆东东，光有变量替换，实在不好意思说是前端模板引擎。。
好了，之前还有个问题等着解决，ctrl+f找到下面这段代码
if(isMobileOnline){
card.innerHTML += '&div&'+ (isMobileOnline ? '手机在线' : '') +'&/div&';
// 是否手机在线
这其实就是逻辑判断要做的事情，假设用的是jQuery Tmpl，下面这样写就可以了
{{if isMobileOnLine}}手机在线{{/if}}
jQuery Tmpl的用法，这里不打算展开，可参考：
jQuery Tmpl的源码剖析，请见后续文章～～
本文通过一个场景的场景，引出我们为什么要使用前端模板，至于前端模板的设计这里暂时不提及，留待后续文章展开。
想到哪写到哪，逻辑略凌乱，包涵～码字不易，请随手点推荐～～
阅读(...) 评论()帮我解释下这段HTML代码.
此段代码功能：在一张图片的相应3个区域定义3个超链接：插入图片，并调取元素中的ID标识。定义一个多边形（3角），相邻两个数字分别为三个点的坐标。定义一个圆，前丙个数字为圆心的坐标，后一个数字为其半径。定义一个矩形，定义了左上、右下两个点的坐标。
为您推荐：
扫描下载二维码Jquery中把一段html代码动态写入到DIV中（简单实例）
print?nav1 = &&div style='width:145height:62float:background:url(login_image/index/on_1.jpg);font-size:18color:line-height:65' id='left_tab& +& &&/div&&&
&&&&&&&&&&&&&&&&&&&&&&& nav1 = &&div style='width:145height:62float:background:url(login_image/index/on_1.jpg);font-size:18color:line-height:65' id='left_tab& +& &&/div&&[javascript] view plaincopyprint? $(&#top_1&).html(nav1);&
&$(&#top_1&).html(nav1);
说明：top_1是body中的一个div的ID！
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467142',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'