文章 | TooBug

2013年11月11日

印象西湖

2013年11月1日

【电影】孙子从美国来

2013年10月30日

遇见未知的自己

2013年10月29日

如何设计一个前端模板引擎

2013年8月25日

前端模板引擎现在已经被广泛应用于前端开发了，几乎每个项目都会使用。微博上甚至出现了“不写个模板引擎就没办法在前端界混了”的言论。当然，这是玩笑话，却也能在一定程度上反映前端模板的普及程度。如果你还没有了解过前端模板引擎，赶紧去补补课吧。

本文其实算不上是一篇讲模板引擎设计的文章，写这篇文章的动力来自于自己使用过一些模板引擎（jQuery Tmpl、jade、ejs、artTemplate以及ThinkPHP自带后端模板引擎）之后的心得，所以可能不会涉及到模板引擎设计的方方面面，更多地是讲模板引擎之间的一些有差异的细节以及我的思考和取舍。

来历

javascript

var tempHtml = '<table>' +
    '     <tr>' +
    '       <th>Hello</th>' +
    '       <th>World</th>' +
    '       <th>!</th>' +
    '     </tr>' +
    '     <tr>' +
    '       <td>' + myData.col1 + '</td>' +
    '       <td>' + myData.col2 +'</td>' +
    '       <td>' + (myData.col3 === 'yes'?'!':'?') + '</td>' +
    '     </tr>' +
    '   </table>';

document.querySelector('#myDiv').innerHTML = tempHtml;

var tempHtml = '<table>' +
    '     <tr>' +
    '       <th>Hello</th>' +
    '       <th>World</th>' +
    '       <th>!</th>' +
    '     </tr>' +
    '     <tr>' +
    '       <td>' + myData.col1 + '</td>' +
    '       <td>' + myData.col2 +'</td>' +
    '       <td>' + (myData.col3 === 'yes'?'!':'?') + '</td>' +
    '     </tr>' +
    '   </table>';

document.querySelector('#myDiv').innerHTML = tempHtml;