[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"content-how_to_design_front_end_template_engine":3,"$f1owio7kthm4sw":22},{"id":4,"type":5,"slug":6,"title":7,"date":8,"category":9,"tags":10,"body_markdown":13,"permalink":14,"excerpt_src":15,"media_type":15,"media_title":15,"media_author":15,"media_url":15,"rating":15,"layout":15,"pv":16,"admin_only":16,"created_at":17,"updated_at":17,"deleted_at":15,"status":18,"html":19,"excerpt":20,"cover":21},160,"article","how_to_design_front_end_template_engine","如何设计一个前端模板引擎","2013-08-25 09:55:24","web",[11,12],"模板引擎","Template","\n前端模板引擎现在已经被广泛应用于前端开发了，几乎每个项目都会使用。微博上甚至出现了“不写个模板引擎就没办法在前端界混了”的言论。当然，这是玩笑话，却也能在一定程度上反映前端模板的普及程度。如果你还没有了解过前端模板引擎，赶紧去补补课吧。\n\n本文其实算不上是一篇讲模板引擎设计的文章，写这篇文章的动力来自于自己使用过一些模板引擎（jQuery Tmpl、jade、ejs、artTemplate以及ThinkPHP自带后端模板引擎）之后的心得，所以可能不会涉及到模板引擎设计的方方面面，更多地是讲模板引擎之间的一些有差异的细节以及我的思考和取舍。\n\n## 来历\n\n```javascript\nvar tempHtml = '\u003Ctable>' +\n    '     \u003Ctr>' +\n    '       \u003Cth>Hello\u003C\u002Fth>' +\n    '       \u003Cth>World\u003C\u002Fth>' +\n    '       \u003Cth>!\u003C\u002Fth>' +\n    '     \u003C\u002Ftr>' +\n    '     \u003Ctr>' +\n    '       \u003Ctd>' + myData.col1 + '\u003C\u002Ftd>' +\n    '       \u003Ctd>' + myData.col2 +'\u003C\u002Ftd>' +\n    '       \u003Ctd>' + (myData.col3 === 'yes'?'!':'?') + '\u003C\u002Ftd>' +\n    '     \u003C\u002Ftr>' +\n    '   \u003C\u002Ftable>';\n\ndocument.querySelector('#myDiv').innerHTML = tempHtml;\n```\n\n相信上面的代码对哪怕做过一点点涉及界面开发的都应该很熟悉吧。当我们想把一段结构和一段数据组合起来，再放到页面上时，就会常常面临这样一段复杂的代码。\n\n这段代码相信不用我说你也会觉得它实在有点复杂：要处理结构中字符串本身的拼接，还要注意结构与数据的拼接，处理数据拼接时还要注意运算优先级（尤其在使用`?:`三元运算符时），还要为了可读性考虑纠结的缩进……\n\n当然，最麻烦的还不是这里，当我们想要对一个数据循环遍历并输出时，居然还要自己去写循环，再一圈一圈地把这些结构拼起来，最后再拼上首尾的结构。而当数据为空时，又要自己去写一个“暂无数据”之类的占位符……\n\n\u003C!-- more -->\n\n为了解决这些问题，前端模板引擎应运而生。\n\n使用了模板引擎之后，上面的例子可能是类似这样：\n\n```javascript\nvar tmpl = '\u003Ctable>' +\n    ......\n    '   \u003Ctd>{%col1}\u003C\u002Ftd>' +\n    '   \u003Ctd>{%col2}\u003C\u002Ftd>' +\n    '   \u003Ctd>{{if col3===\"yes\"}}!{{else}}?{{end if}}' +\n    ......\n\ndocument.querySelector('#myDiv').innerHTML = template(tmplHtml,myData);\n```\n\n这个例子看起来跟上面也没啥区别呀？字符串拼接一点没见少。没错，但这里有了一个变化，即字符串拼接不再是必须行为（为了可读性而换行拼接另算），因此将这段模板存放到别的地方成为可能，比如直接放入HTML中，使用时用js提取过来即可。这样，代码的复杂度就大大降低了。\n\n## 职责\n\n上面的例子我们看到了模板引擎带来的好处，可以极大简化代码的编写，自然也可以减少出错的可能性。那具体说来，模板引擎到底应该做些什么事情？套用一下重构中的结构、表现、行为分离的概念，模板引擎在做的事情也无非是几个分离，但对应的对象是结构、数据、逻辑和表现：\n\n- 结构：最终要展现出来的结构框架，也即“模板”本身，比如上例中的表格。\n- 数据：不用多解释，要展现出来的数据。\n- 逻辑：即业务逻辑代码，不包含可能存在于模板引擎中的逻辑处理。\n- 表现：数据的具体表现，比如日期可以有各种不同的格式。\n\n### 数据和结构分离\n\n这是一个模板引擎最最基本的功能，即将结构框架和要展现的数据完全独立开来，不让它们直接进行拼接。比如上例中，在使用了模板引擎之后，`tmpl`和`myData`就已经不存在直接拼接的行为，而是最后使用模板引擎将它们两者组合起来。如果这一点做不到，实在不能称为“模板引擎”。\n\n### 数据和逻辑分离\n\n所谓数据和逻辑分离，是指数据处理应该和业务逻辑分离开来。业务逻辑应该只专业于数据读写、用户交互等与业务具体相关的事情，至于数据展现上的一些抉择，比如这里是显示“Yes”还是显示“是”，应该交给处理数据的部分来进行。这样的分工可以有效保持数据处理部分的完整性，使业务逻辑和数据处理部分的耦合减少。对这两部分来说，都是既便于复用，也便于后期维护。\n\n#### 分支逻辑\n\n在上例中，我们可以看到在处理的处理中有一个分支逻辑，用于判断`col3`的值是否为`yes`，然后生成不同的内容。很明显的是，这个逻辑是因为数据而存在，因而应该被放到数据处理部分，因而上例将它写入了模板中。\n\n反过来，如果我们使用了一个无逻辑模板引擎，即逻辑引擎无力处理这种简单的逻辑，我们就只能将这个判断写到业务逻辑中，先判断`col3 === yes`，然后根据这个结构在`myData`中写入一个新的值`col3Display`。这样的话很不利于维护，比如如果`col3`改成了`col3`，首先想到的是需要在模板中更改名，然后需要在模板处理的部分改名，除了这些之处，还需要修改处理`col3Display`的地方，而这个地方是存在于业务逻辑中的。这种耦合也让业务逻辑和模板分别复用变成几乎不可能的事情。\n\n一般而言，模板中需要支持的逻辑主要为分支逻辑和遍历逻辑（下面会提及）即可，其它复杂的逻辑使用得并不普遍。当前市面上的模板引擎几乎100%包含这些简单逻辑的处理，如上面举的例子，这是非常合理的。\n\n#### 数据遍历\n\n基于上面数据和逻辑分离的思想，除了分支逻辑之外，模板引擎还应该支持一个更为基础的功能，即数据自动遍历。也就是说，当我们传入一个数据数组的时候，模板引擎应该能够对数组中的元素自动遍历，对每个数据生成组合后的html片段再组合起来返回给用户，比如：\n\n```javascript\nvar tmplStr = '\u003Cli>My Name is {%name%}, I\\'m {%age%} years old.\u003C\u002Fli>';\n\nvar arr = [{\n    name:'TooBug',\n    age:18\n},{\n    name:'ThreeBug',\n    age:18.1\n}];\n\nvar html1 = template(tmplStr,arr);\n\u002F\u002F 结果：\n\u002F\u002F \u003Cli>My Name is TooBug, I\\'m 18 years old.\u003C\u002Fli>\n\u002F\u002F \u003Cli>My Name is ThreeBug, I\\'m 18.1 years old.\u003C\u002Fli>\n```\n\n如果模板没有自动遍历的功能，那么开发者又只好把用于数据处理的逻辑写入业务代码了：\n\n```javascript\nvar tmplHtml = '';\narr.forEach(function(dataItem){\n\n  tmplHtml += template(tmplStr,dataItem);\n\n});\n```\n\n早期的artTemplate就不支持自动遍历，要么采用上面的方法在业务代码中做，要么在业务代码中把数组再包装成一个对象，在模板中写遍历的代码。这是一件很纠结的事情。（to 糖饼：特此吐槽。）\n\n### 表现与逻辑分离\n\n数据的最佳存储方式与数据的最佳表现方式很多时候并不一致。比如时间类型的数据，最佳的存储方式无疑是时间戳（如`1377399298`），而最佳的表现方式则是我们最为熟悉的年月日的表示方式（如`2013年8月25日`）。此时就需要在数据展现前进行一些格式化。\n\n数据的格式化不像分支逻辑或者遍历逻辑那么简单，它是一个五花八门的工作。比如就时间而言，就有无数种格式，有时候需要`2013年8月25日`，有时候需要`2013-08-25`，有时候需要`11:03`，有时候需要`2 mins ago`……更别说其它更多的数据类型了。因此，做数据格式化往往有一些专门的逻辑，简单一点的可能是一个小函数，复杂一点的则可能是类似moment.js之类的库。\n\n于是，如何处理格式化库、业务逻辑、模板引擎的关系就成为一个很重要的问题。\n\n按照我崇尚的逻辑分离的思想，格式化代码不应该出现在业务代码中，最理想的方式是作为一个单独的文件外挂进来，然后由模板引擎直接调用。拿moment.js为例，最理想的方式就是可以直接在模板中写类似这样的代码：\n\n```html\n......\n\u003Ctd>moment(pubDate).format('YYYY-MM-DD')\u003C\u002Ftd>\n......\n```\n\n事实上，目前大部分模板也是允许这样操作的。但也有部分模板引擎选择了封闭了外部变量的访问，以artTemplate为典型。封闭对外部变量的访问最大的考量就在于阻止在模板中意外修改外部变量。因此，artTemplate在封闭对外部变量访问的同时，提供了另一种方案，即辅助方法机制。用户可以为模板引擎指定一些辅助方法，模板引擎可以访问这些辅助方法。如：\n\n```javascript\ntemplate.helper('myFormat', helper.myFormat);\n```\n\n加了这句代码之后就可以在artTemplate的模板中使用moment库来做日期时间的格式化。\n\n就上面这个例子来说，与直接使用外挂js中的格式化方法唯一的区别只是是否有`helper`这个全局命名空间的区别（artTemplate理想的方式是辅助方法不占用全局命名空间）。但我觉得，“辅助方法”这个概念又增加了不少的学习门槛，想必作者也为此接到了不少咨询。作为模板用户应该知道它所编写的代码会产生怎样的后果，作为模板引擎不应该以易用性和可维护性为代价来保障这个有点牵强的安全性。\n\n在处理格式化方法的问题时，还有一种方案，以jQuery tmpl为代表，在调用`tmpl`方法时可以传入一个对象，对象中的成员函数都可以直接在模板中使用。这种方案与artTemplate的辅助方法机制有些类似，但jQuery tmpl中的辅助方法只对本次渲染的模板有效。\n\n```javascript\n$('myTest').tmpl({\n  myFormat:function(val){\n    return val;\n  }\n},myData);\n```\n\n这种方案其实有点难评价是好是坏。它的就地编写就地使用的方式用起来还是很方便的，而且方法直接写在渲染语句中，也不会给维护带来特别大的问题。但丢一大堆方法在渲染参数中还是多少会有些不爽。算是一种折衷的方案吧。\n\n## 易用性\n\n易用性是衡量一个模板引擎是否优秀的重要指标，因为它的目的就是简化前端开发工作，如果引入模板引擎反而使得代码更加复杂难懂，则有些得不偿失，毕竟模板引擎也是有学习和性能成本的。\n\n### 简化还是繁化\n\n如果一个模板写得人头昏眼花，也许应该回过头来想一下这个模板引擎设计是不是有问题。看一段代码：\n\n```html\n\u003C%if(myData.testArr){%>\n  \u003C%for(var i=0;i\u003CmyData.testArr.length;i++){%>\n    \u003Cinput type=\"checked\"\u003C%if(myData.testArr[i].checked){%> checked\u003C%}%>\u002F>\n  \u003C%}%>\n\u003C%}%>\n```\n\n上面这段代码简化自某个项目的真实代码，一眼看去会不会觉得非常繁杂？其实代码很简单，无非是判断一个数组是否存在，然后对数组元素遍历输出checkbox。但看起来就是觉得头疼，各种符号穿插其中，各种符号鱼龙混杂，甚至连编辑器高亮都可能完全失效。\n\n我觉得这个模板引擎的语法设计是有如下问题的：\n\n- 为降低学习成本使用原生JS语法，这个想法是好的，但这个做法却在客观上增加了代码的复杂性，比如需要用户自己管理临时变量，需要自己管理代码的开始与结束（大括号）。\n- 对JS原生语法的支持有限，比如对于数组的遍历，并不支持使用原生的`forEach`方法，进一步加大代码复杂性。\n- 没有较好地处理“逻辑插值”的问题。（所谓“逻辑插值”是指标记中的某个部分需要按分支逻辑来处理的情况。）导致了在标签属性部分的代码十分复杂。而更为严重的是，尖括号`\u003C>`会严重干扰到编辑器的语法解析过程，导致语法高亮出现错误。\n\n来看jade的处理方法：\n\n```jade\n- if(myData.testArr)\n  - each dataItem in myData.testArr\n    input(type=\"checked\",checked=dataItem.checked)\n```\n\n再来看一下上面提到的三个问题：\n\n- 学习成本：上面的jade代码相信你可以秒懂，既然如此，学习成本便不是问题。\n- 原生语法：jade通过`-`来区分逻辑与标记，在逻辑代码中，随意使用任何原生js语法。\n- 逻辑插值：jade使用`checked=true\u002Ffalse`的方式处理布尔属性，避免了大部分逻辑插值的情况，虽然不能完全解决问题，但已经足够好读了。\n\n此外，jade还有同时适用于对象和数组的each语法，遍历起来十分方便。\n\n看完上面的例子，应该不用多说了，模板如果不能简化开发工作，反而使代码变得复杂和难以维护，那么我个人认为宁可不要。\n\n### 模板标记的选用\n\n在模板标记的选用上，各个引擎可谓是八仙过海各显神通。在这个问题上，也确实没有很多可以拿来比较的东西，但还是有些小点值得一说。\n\n#### 模板标记与页面重构\n\n按照[彪叔](http:\u002F\u002Fwww.twinsenliang.net)的观点，模板标记应该选用“看起来像文本”的标记，比如尖括号就应该避免，因为这样可以让重构同学在做页面的时候大概预览到模板标记所在处的效果，而不是被隐藏掉。\n\n不过，这其实是个不折不扣的伪命题。举个例子，`\u003C%=var%>`这种语法来自ASP，而这种语法在浏览器中并不会被隐藏掉，而是原样显示，因此并不会影响预览效果。至于编码时，则更没区别了，只是敲不同的键而已。既然如此，那么所谓“被隐藏掉”是在哪里呢？答案其实是——DreamWeaver的可视化界面……面对已经被边缘掉的DW，这个问题的的确确可以被彻底忽视了。\n\n当然，如果你坚持使用DW的话，我仍然要说这是个伪命题，因为时至今日，已经很少有人再把模板标记放到正常的文档流中了，因此不管选择什么样的标记，这些不在文档流中的模板都始终不会被看到。\n\n#### 避免与后端语言模板冲突\n\n这倒是一个很值得考虑的问题。在使用jQuery tmpl与ThinkPHP时，由于两者的模板机制均有使用`$`符号，因此经常导致前端模板标记被后端解析，从而导致页面异常。最终只能通过后端强制指定不解析模板来解决问题。\n\n考虑到这个问题的话，在选用前端模板标记时其实也没办法做到尽善尽美，因为后端模板的标记也不少，很难避免所有可能冲突的情况。但我们可以适当做些考虑，避开一些常用的后端模板。比如我会更倾向于使用`{%raw%}{%var%}{%endraw%}`的方式（虽然我也没法证明它是一个更好的选择）。\n\n#### 美观\n\n呵呵。美观是个很主观的话题，所以作者觉得哪个好看就用哪个吧……\n\n不过，除了输出变量之外，其它的模板标记其实更多的是一种语法设计，在这方面，确实要考虑美观的事情，上面说过，如果一个模板写出来异常复杂就不好了。\n\n#### 模板标记转义\n\n其实这个问题与模板标记本身关系不大，主要是指如何让模板强制不解析某个模板标记，原样输出它。一般比较理想的方式是对标记进行转义，但转义也有两个层次的含义：\n\n- 在HTML级别的转义，比如我要输出`\u003C%=var%>`，则直接在模板中写转义后的`<%=var%>`。\n- 在模板级别的转义，比如我要在jade中输出`#{var}`，则在模板中写入`\\#{var}`即可。\n\n对于这两种转义，我更看重的是第二种，因为一个模板应当要有输出任何字符的能力，包括它用到的模板标记本身。（注意在HTML级别转义的话，输出的结果文本是不一样的。）\n\n### 模板位置及提取\n\n在文章开头的例子中，我们把模板写到了JS中，随后也做了说明，模板文本是可以写到HTML中的。接下来就来看看将模板放到HTML中的几种主要方法。（还有更多的方法，玉伯有一篇文章中有详述，由于原文被墙，可以到CSDN转载的页面查看：[《[浅析]淘宝详情页的BigRender优化的最佳方式》](http:\u002F\u002Fwww.csdn.net\u002Farticle\u002F2011-09-27\u002F304989)）\n\n#### 直接放入文档流中的DOM\n\n将模板直接放到DOM中是一种比较原始的方案，这种方法会在写HTML时直接将模板写进去，然后使用JS动态从父容器中取出进行渲染，最后将生成的HTML字符串再写回父容器中。这种方案的弊端很多：\n\n- 模板会被渲染出来，这是开发者不希望看到的。而如果使用css来隐藏的话又在项目中添加了没有意义的代码。\n- 模板存在被修改的可能。一旦DOM节点被渲染后就无法保证它不被修改，有可能等我们用JS去取模板时，它已经被改得面目全非甚至都不在文档中了。（外部JS库、UI库、开发框架如jQuery Mobile、浏览器插件都可能修改页面中的DOM。）\n\n后来，在前辈们的探索下，找到了一种比较完美的方式：放到`textarea`中，这种方案在很大程度上避开了以上问题，只需要处理`textarea`本身即可。取用的时候只要取`textarea`的值即可。\n\n#### 放入script标签\n\n将模板标记放到`textarea`中，虽然使得模板本身避免了被渲染和修改，但`textarea`本身还是需要隐藏。后来，前辈们又发现一个更NB的方案：将模板放到`type`属性不为`script`(以及一堆同义词)的`script`标签中，这个script是一个标准的DOM元素，但又不会受到其它的影响，浏览器也会直接忽略它，并不渲染。\n\n现在一个常见的模板放到`script`标签中可能是这样：\n\n```html\n\u003Cscript type=\"text\u002Ftmpl\" id=\"myTmpl\">\n  模板放这里\n  ......\n\u003C\u002Fscript>\n```\n\n这是一种比较完美的方式，也是现在比较主流的方式。\n\n#### template元素\n\n鉴于模板引擎的广泛使用，web components组件规范中直接定义了一个`template`元素，专门用来存放模板。\n\n```html\n\u003Ctemplate id=\"myTmpl\">\n  模板放这里\n  ......\n\u003C\u002Ftemplate>\n```\n\n目前Chrome和Firefox均已支持这个元素（移动端暂没有浏览器支持）。\n\n#### 模板提取方式\n\n好吧，上面三小节基本是在吹水，其实模板本身放哪里跟模板引擎的关系并不太大，模板引擎只要接受模板字符串进行处理就好了。但说回来，如果模板引擎能辅助用户进行模板的自动提取，则无疑是在易用性上的一个很好的亮点。\n\n目前jQuery tmpl和artTemplate都做了这些方面的努力。在jQuery tmpl中，直接在（经jQuery包裹后的）包含模板的元素上调用`.tmpl`方法即可，jQuery tmpl会自动去页面中提取出模板字符串并进行处理：\n\n```javascript\n$('#myTmpl').tmpl(myData);\n```\n\n而artTemplate允许通过指定包含模板的元素ID的方式自动提取模板：\n\n```javascript\ntemplate.render('myTmpl',myData);\n```\n\n## 性能\n\n任何JS库、框架都逃不开性能这个命题，模板引擎自然也不例外。但模板引擎的性能一直是一个争议不断的话题。\n\n### 性能是否是伪命题\n\n我们来看一个性能测试的页面\u003Chttp:\u002F\u002Faui.github.io\u002FartTemplate\u002Ftest\u002Ftest-speed.html>，其实结果很有意思，看完才知道，原来不同的模板引擎之间的性能差异真的如此巨大！\n\n不过更有意思的是，测试完成后，作者写了一句话：“测试已完成，请不要迷恋速度。”这其实是句很有意思的话，之前也有跟作者聊过性能方面的问题，作者也认为“性能是个伪命题”的观点。原因是这个测试的数据量是100*10000=100W。也即在百万级别的数据渲染时，才有几秒钟的性能差异。\n\n回到我们的日常web开发，单次渲染数据量上千就已经差不多是极限了，此时模板引擎之间的性能差异微乎其微，几乎无法被用户感知。\n\n另外还有一个特别值得注意的地方，模板引擎做的工作只是“模板+数据=包含数据的HTML字符串”，而这些HTML字符串真正显示在页面上还要经过一道DOM操作，而这个DOM操作在数据量大时比模板引擎本身的计算所要消耗的时间要大得多！如果100W条数据显示在DOM上，我觉得即使是Chrome也很难逃脱卡死的命运。\n\n这样看来，模板引擎的性能问题还真可能是个伪命题。那是否可以忽略这一问题呢？我认为也不可取，模板引擎还是要关注性能的，因为你不知道用户会怎么使用你的引擎。比如我就曾经为了偷懒，在一个页面上渲染了6000条数据，此时模板引擎在IE下的表现也可以差到用户可感知的程度。\n\n### 有关预编译\n\n在[《高性能JavaScript模板引擎原理解析》](http:\u002F\u002Fcdc.tencent.com\u002F?p=5723)一文中，artTemplate作者解释了其高性能来源于针对模板的预编译。即在首次渲染时会根据模板解析的结果生成一个用于拼接数据的函数，后续调用时直接使用这个函数而不需要再次解析模板。这是个非常好的思路，目前也有越来越多的模板引擎采用了预编译的方式，所以我猜测一下，上面的测试如果换用最新版、并引入更多的模板引擎再做一次的话，差异应该不会那么明显。\n\n关于预编译的时机，目前的模板引擎基本都放在浏览器端首次调用时进行预编译。artTemplate是我见到的第一个尝试把模板预编译过程放在构建阶段的模板引擎，它可以在发布前对产品中用到的模板进行预处理，最后发出去的直接是拼接字符串的函数。详细详情可以在[这里](https:\u002F\u002Fgithub.com\u002Fcdc-im\u002Fatc)查看。\n\n这其实是个很不错的思路，尤其是在前端编译的概念有燎原之势的这个时机，只要集成方便，还是很有前途的。不过略遗憾的是，目前artTemplate的预编译工具还没有提供Grunt.js的插件，需要单独编译。\n\n顺序发散一下，如果我们在引入jQuery的项目发布前，扫描一下调用的API，然后把jQuery也在发布前预编译一遍会怎样？其实想象空间还挺大的。\n\n## 功能\n\n前面已经说过，一个模板引擎最主要的功能就是实现数据和逻辑、结构的分离，简化开发工作。因此一些剩下的功能就被放到了最后，这些并不是模板引擎的主要考量因素，但如果做好，也会成为很不错的亮点。\n\n### 异常处理\n\n模板引擎都有一套特定的语法，当我们写的模板无法按照这套语法进行解析或者是在处理数据时发生错误时便会产生错误。有一部分模板引擎在产生错误时不会做过多的处理，此时错误被直接抛出，但产生错误的代码行却往往是模板引擎本身，一定程度上会给调试带来困难。\n\nartTemplate在错误处理上有一些尝试，出错时会带上出错的模板本身，这样开发者可以定位到出错的模板代码。而jade则更进一步，直接能定位到出错的位置所在的字符。\n\n当然，这些辅助信息并不一定100%准确，因为很可能错误产生于真正报错之前，这是几乎所有的语言调试过程中面临的一个问题。不过，有了这些辅助信息还是能提升开发者的调试效率的。\n\n### 包含、mixin复用\n\n在后端模板的世界中，模板之间的相互包含是一件非常普遍的事情，因为后端模板往往是以页为单位来进行输出渲染，而相对来讲，前端模板的应用场景则会显示更碎片化。因此个人觉得前端模板中的模板相互包含、引用并不是一个非常普遍的需求。不过，也有不少的模板为了与在后端（Node.js）的使用方式保持一致，也为前端提供了模板包含功能。\n\n除了使用包含来完成模板复用外，jade还提供了一种叫作`mixin`的方式来复用模板：\n\n```jade\nmixin article(title)\n  .article\n    .article-wrapper\n      h1= title\n      if block\n        block\n      else\n        p No content provided\n\n+article('Hello world')\n\n+article('Hello world')\n  p This is my\n  p Amazing article\n```\n\n会编译成：\n\n```html\n\u003Cdiv class=\"article\">\n  \u003Cdiv class=\"article-wrapper\">\n    \u003Ch1>Hello world\u003C\u002Fh1>\n    \u003Cp>No content provided\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"article\">\n  \u003Cdiv class=\"article-wrapper\">\n    \u003Ch1>Hello world\u003C\u002Fh1>\n    \u003Cp>This is my\u003C\u002Fp>\n    \u003Cp>Amazing article\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n这种方式其实已经非常接近[Shadow DOM](https:\u002F\u002Fwww.toobug.net\u002Farticle\u002Fwhat_is_shadow_dom.html)中对DOM的封装思路。（当然，如果你玩过LESS、SASS之类的CSS预处理语言，也会觉得这个mixin的概念似曾相识。）\n\n个人以为，相对模板包含而言，这种mixin的复用方式其实是对前端模板而言更为友好的方式。\n\n## 结\n\n洋洋洒洒地码了这么多，其实仍然没有去讲怎么设计一个模板引擎，只是提出了自己使用模板引擎过程中看到的一些差异和一些值得思考的点。真正设计一个工业级的模板引擎还是颇费工夫的。\n\n至于模板引擎的实现，则完全是编码的硬功夫了，除了编译原理外也没啥好说的了，就不打算说了。（装下B，真实原因是我也没写过……Wahaha……）\n\n> 2013-12-04：感谢Barret Lee在评论中给出一篇好文[《javascript模板引擎原理，几行代码的事儿》](http:\u002F\u002Fbarretlee.com\u002Fprinciple-of-javascript-template\u002F)，这是一篇真正在讲如何用js实现一个模板引擎的文章，推荐阅读。\n","\u002Farticle\u002Fhow_to_design_front_end_template_engine.html",null,0,"2026-08-28 04:37:17","published","\u003Cp>前端模板引擎现在已经被广泛应用于前端开发了，几乎每个项目都会使用。微博上甚至出现了“不写个模板引擎就没办法在前端界混了”的言论。当然，这是玩笑话，却也能在一定程度上反映前端模板的普及程度。如果你还没有了解过前端模板引擎，赶紧去补补课吧。\u003C\u002Fp>\n\u003Cp>本文其实算不上是一篇讲模板引擎设计的文章，写这篇文章的动力来自于自己使用过一些模板引擎（jQuery Tmpl、jade、ejs、artTemplate以及ThinkPHP自带后端模板引擎）之后的心得，所以可能不会涉及到模板引擎设计的方方面面，更多地是讲模板引擎之间的一些有差异的细节以及我的思考和取舍。\u003C\u002Fp>\n\u003Ch2>来历\u003C\u002Fh2>\n\u003Cpre>\u003Ccode>var tempHtml = '<table>' +\n    '     <tr>' +\n    '       <th>Hello<\u002Fth>' +\n    '       <th>World<\u002Fth>' +\n    '       <th>!<\u002Fth>' +\n    '     <\u002Ftr>' +\n    '     <tr>' +\n    '       <td>' + myData.col1 + '<\u002Ftd>' +\n    '       <td>' + myData.col2 +'<\u002Ftd>' +\n    '       <td>' + (myData.col3 === 'yes'?'!':'?') + '<\u002Ftd>' +\n    '     <\u002Ftr>' +\n    '   <\u002Ftable>';\n\ndocument.querySelector('#myDiv').innerHTML = tempHtml;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>相信上面的代码对哪怕做过一点点涉及界面开发的都应该很熟悉吧。当我们想把一段结构和一段数据组合起来，再放到页面上时，就会常常面临这样一段复杂的代码。\u003C\u002Fp>\n\u003Cp>这段代码相信不用我说你也会觉得它实在有点复杂：要处理结构中字符串本身的拼接，还要注意结构与数据的拼接，处理数据拼接时还要注意运算优先级（尤其在使用\u003Ccode>?:\u003C\u002Fcode>三元运算符时），还要为了可读性考虑纠结的缩进……\u003C\u002Fp>\n\u003Cp>当然，最麻烦的还不是这里，当我们想要对一个数据循环遍历并输出时，居然还要自己去写循环，再一圈一圈地把这些结构拼起来，最后再拼上首尾的结构。而当数据为空时，又要自己去写一个“暂无数据”之类的占位符……\u003C\u002Fp>\n\u003Cp>为了解决这些问题，前端模板引擎应运而生。\u003C\u002Fp>\n\u003Cp>使用了模板引擎之后，上面的例子可能是类似这样：\u003C\u002Fp>\n\u003Cpre>\u003Ccode>var tmpl = '<table>' +\n    ......\n    '   <td>{%col1}<\u002Ftd>' +\n    '   <td>{%col2}<\u002Ftd>' +\n    '   <td>{{if col3==="yes"}}!{{else}}?{{end if}}' +\n    ......\n\ndocument.querySelector('#myDiv').innerHTML = template(tmplHtml,myData);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>这个例子看起来跟上面也没啥区别呀？字符串拼接一点没见少。没错，但这里有了一个变化，即字符串拼接不再是必须行为（为了可读性而换行拼接另算），因此将这段模板存放到别的地方成为可能，比如直接放入HTML中，使用时用js提取过来即可。这样，代码的复杂度就大大降低了。\u003C\u002Fp>\n\u003Ch2>职责\u003C\u002Fh2>\n\u003Cp>上面的例子我们看到了模板引擎带来的好处，可以极大简化代码的编写，自然也可以减少出错的可能性。那具体说来，模板引擎到底应该做些什么事情？套用一下重构中的结构、表现、行为分离的概念，模板引擎在做的事情也无非是几个分离，但对应的对象是结构、数据、逻辑和表现：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>结构：最终要展现出来的结构框架，也即“模板”本身，比如上例中的表格。\u003C\u002Fli>\n\u003Cli>数据：不用多解释，要展现出来的数据。\u003C\u002Fli>\n\u003Cli>逻辑：即业务逻辑代码，不包含可能存在于模板引擎中的逻辑处理。\u003C\u002Fli>\n\u003Cli>表现：数据的具体表现，比如日期可以有各种不同的格式。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>数据和结构分离\u003C\u002Fh3>\n\u003Cp>这是一个模板引擎最最基本的功能，即将结构框架和要展现的数据完全独立开来，不让它们直接进行拼接。比如上例中，在使用了模板引擎之后，\u003Ccode>tmpl\u003C\u002Fcode>和\u003Ccode>myData\u003C\u002Fcode>就已经不存在直接拼接的行为，而是最后使用模板引擎将它们两者组合起来。如果这一点做不到，实在不能称为“模板引擎”。\u003C\u002Fp>\n\u003Ch3>数据和逻辑分离\u003C\u002Fh3>\n\u003Cp>所谓数据和逻辑分离，是指数据处理应该和业务逻辑分离开来。业务逻辑应该只专业于数据读写、用户交互等与业务具体相关的事情，至于数据展现上的一些抉择，比如这里是显示“Yes”还是显示“是”，应该交给处理数据的部分来进行。这样的分工可以有效保持数据处理部分的完整性，使业务逻辑和数据处理部分的耦合减少。对这两部分来说，都是既便于复用，也便于后期维护。\u003C\u002Fp>\n\u003Ch4>分支逻辑\u003C\u002Fh4>\n\u003Cp>在上例中，我们可以看到在处理的处理中有一个分支逻辑，用于判断\u003Ccode>col3\u003C\u002Fcode>的值是否为\u003Ccode>yes\u003C\u002Fcode>，然后生成不同的内容。很明显的是，这个逻辑是因为数据而存在，因而应该被放到数据处理部分，因而上例将它写入了模板中。\u003C\u002Fp>\n\u003Cp>反过来，如果我们使用了一个无逻辑模板引擎，即逻辑引擎无力处理这种简单的逻辑，我们就只能将这个判断写到业务逻辑中，先判断\u003Ccode>col3 === yes\u003C\u002Fcode>，然后根据这个结构在\u003Ccode>myData\u003C\u002Fcode>中写入一个新的值\u003Ccode>col3Display\u003C\u002Fcode>。这样的话很不利于维护，比如如果\u003Ccode>col3\u003C\u002Fcode>改成了\u003Ccode>col3\u003C\u002Fcode>，首先想到的是需要在模板中更改名，然后需要在模板处理的部分改名，除了这些之处，还需要修改处理\u003Ccode>col3Display\u003C\u002Fcode>的地方，而这个地方是存在于业务逻辑中的。这种耦合也让业务逻辑和模板分别复用变成几乎不可能的事情。\u003C\u002Fp>\n\u003Cp>一般而言，模板中需要支持的逻辑主要为分支逻辑和遍历逻辑（下面会提及）即可，其它复杂的逻辑使用得并不普遍。当前市面上的模板引擎几乎100%包含这些简单逻辑的处理，如上面举的例子，这是非常合理的。\u003C\u002Fp>\n\u003Ch4>数据遍历\u003C\u002Fh4>\n\u003Cp>基于上面数据和逻辑分离的思想，除了分支逻辑之外，模板引擎还应该支持一个更为基础的功能，即数据自动遍历。也就是说，当我们传入一个数据数组的时候，模板引擎应该能够对数组中的元素自动遍历，对每个数据生成组合后的html片段再组合起来返回给用户，比如：\u003C\u002Fp>\n\u003Cpre>\u003Ccode>var tmplStr = '<li>My Name is {%name%}, I\\'m {%age%} years old.<\u002Fli>';\n\nvar arr = [{\n    name:'TooBug',\n    age:18\n},{\n    name:'ThreeBug',\n    age:18.1\n}];\n\nvar html1 = template(tmplStr,arr);\n\u002F\u002F 结果：\n\u002F\u002F <li>My Name is TooBug, I\\'m 18 years old.<\u002Fli>\n\u002F\u002F <li>My Name is ThreeBug, I\\'m 18.1 years old.<\u002Fli>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>如果模板没有自动遍历的功能，那么开发者又只好把用于数据处理的逻辑写入业务代码了：\u003C\u002Fp>\n\u003Cpre>\u003Ccode>var tmplHtml = '';\narr.forEach(function(dataItem){\n\n  tmplHtml += template(tmplStr,dataItem);\n\n});\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>早期的artTemplate就不支持自动遍历，要么采用上面的方法在业务代码中做，要么在业务代码中把数组再包装成一个对象，在模板中写遍历的代码。这是一件很纠结的事情。（to 糖饼：特此吐槽。）\u003C\u002Fp>\n\u003Ch3>表现与逻辑分离\u003C\u002Fh3>\n\u003Cp>数据的最佳存储方式与数据的最佳表现方式很多时候并不一致。比如时间类型的数据，最佳的存储方式无疑是时间戳（如\u003Ccode>1377399298\u003C\u002Fcode>），而最佳的表现方式则是我们最为熟悉的年月日的表示方式（如\u003Ccode>2013年8月25日\u003C\u002Fcode>）。此时就需要在数据展现前进行一些格式化。\u003C\u002Fp>\n\u003Cp>数据的格式化不像分支逻辑或者遍历逻辑那么简单，它是一个五花八门的工作。比如就时间而言，就有无数种格式，有时候需要\u003Ccode>2013年8月25日\u003C\u002Fcode>，有时候需要\u003Ccode>2013-08-25\u003C\u002Fcode>，有时候需要\u003Ccode>11:03\u003C\u002Fcode>，有时候需要\u003Ccode>2 mins ago\u003C\u002Fcode>……更别说其它更多的数据类型了。因此，做数据格式化往往有一些专门的逻辑，简单一点的可能是一个小函数，复杂一点的则可能是类似moment.js之类的库。\u003C\u002Fp>\n\u003Cp>于是，如何处理格式化库、业务逻辑、模板引擎的关系就成为一个很重要的问题。\u003C\u002Fp>\n\u003Cp>按照我崇尚的逻辑分离的思想，格式化代码不应该出现在业务代码中，最理想的方式是作为一个单独的文件外挂进来，然后由模板引擎直接调用。拿moment.js为例，最理想的方式就是可以直接在模板中写类似这样的代码：\u003C\u002Fp>\n\u003Cpre>\u003Ccode>......\n<td>moment(pubDate).format('YYYY-MM-DD')<\u002Ftd>\n......\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>事实上，目前大部分模板也是允许这样操作的。但也有部分模板引擎选择了封闭了外部变量的访问，以artTemplate为典型。封闭对外部变量的访问最大的考量就在于阻止在模板中意外修改外部变量。因此，artTemplate在封闭对外部变量访问的同时，提供了另一种方案，即辅助方法机制。用户可以为模板引擎指定一些辅助方法，模板引擎可以访问这些辅助方法。如：\u003C\u002Fp>\n\u003Cpre>\u003Ccode>template.helper('myFormat', helper.myFormat);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>加了这句代码之后就可以在artTemplate的模板中使用moment库来做日期时间的格式化。\u003C\u002Fp>\n\u003Cp>就上面这个例子来说，与直接使用外挂js中的格式化方法唯一的区别只是是否有\u003Ccode>helper\u003C\u002Fcode>这个全局命名空间的区别（artTemplate理想的方式是辅助方法不占用全局命名空间）。但我觉得，“辅助方法”这个概念又增加了不少的学习门槛，想必作者也为此接到了不少咨询。作为模板用户应该知道它所编写的代码会产生怎样的后果，作为模板引擎不应该以易用性和可维护性为代价来保障这个有点牵强的安全性。\u003C\u002Fp>\n\u003Cp>在处理格式化方法的问题时，还有一种方案，以jQuery tmpl为代表，在调用\u003Ccode>tmpl\u003C\u002Fcode>方法时可以传入一个对象，对象中的成员函数都可以直接在模板中使用。这种方案与artTemplate的辅助方法机制有些类似，但jQuery tmpl中的辅助方法只对本次渲染的模板有效。\u003C\u002Fp>\n\u003Cpre>\u003Ccode>$('myTest').tmpl({\n  myFormat:function(val){\n    return val;\n  }\n},myData);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>这种方案其实有点难评价是好是坏。它的就地编写就地使用的方式用起来还是很方便的，而且方法直接写在渲染语句中，也不会给维护带来特别大的问题。但丢一大堆方法在渲染参数中还是多少会有些不爽。算是一种折衷的方案吧。\u003C\u002Fp>\n\u003Ch2>易用性\u003C\u002Fh2>\n\u003Cp>易用性是衡量一个模板引擎是否优秀的重要指标，因为它的目的就是简化前端开发工作，如果引入模板引擎反而使得代码更加复杂难懂，则有些得不偿失，毕竟模板引擎也是有学习和性能成本的。\u003C\u002Fp>\n\u003Ch3>简化还是繁化\u003C\u002Fh3>\n\u003Cp>如果一个模板写得人头昏眼花，也许应该回过头来想一下这个模板引擎设计是不是有问题。看一段代码：\u003C\u002Fp>\n\u003Cpre>\u003Ccode><%if(myData.testArr){%>\n  <%for(var i=0;i<myData.testArr.length;i++){%>\n    <input type="checked"<%if(myData.testArr[i].checked){%> checked<%}%>\u002F>\n  <%}%>\n<%}%>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>上面这段代码简化自某个项目的真实代码，一眼看去会不会觉得非常繁杂？其实代码很简单，无非是判断一个数组是否存在，然后对数组元素遍历输出checkbox。但看起来就是觉得头疼，各种符号穿插其中，各种符号鱼龙混杂，甚至连编辑器高亮都可能完全失效。\u003C\u002Fp>\n\u003Cp>我觉得这个模板引擎的语法设计是有如下问题的：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>为降低学习成本使用原生JS语法，这个想法是好的，但这个做法却在客观上增加了代码的复杂性，比如需要用户自己管理临时变量，需要自己管理代码的开始与结束（大括号）。\u003C\u002Fli>\n\u003Cli>对JS原生语法的支持有限，比如对于数组的遍历，并不支持使用原生的\u003Ccode>forEach\u003C\u002Fcode>方法，进一步加大代码复杂性。\u003C\u002Fli>\n\u003Cli>没有较好地处理“逻辑插值”的问题。（所谓“逻辑插值”是指标记中的某个部分需要按分支逻辑来处理的情况。）导致了在标签属性部分的代码十分复杂。而更为严重的是，尖括号\u003Ccode><>\u003C\u002Fcode>会严重干扰到编辑器的语法解析过程，导致语法高亮出现错误。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>来看jade的处理方法：\u003C\u002Fp>\n\u003Cpre>\u003Ccode>- if(myData.testArr)\n  - each dataItem in myData.testArr\n    input(type="checked",checked=dataItem.checked)\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>再来看一下上面提到的三个问题：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>学习成本：上面的jade代码相信你可以秒懂，既然如此，学习成本便不是问题。\u003C\u002Fli>\n\u003Cli>原生语法：jade通过\u003Ccode>-\u003C\u002Fcode>来区分逻辑与标记，在逻辑代码中，随意使用任何原生js语法。\u003C\u002Fli>\n\u003Cli>逻辑插值：jade使用\u003Ccode>checked=true\u002Ffalse\u003C\u002Fcode>的方式处理布尔属性，避免了大部分逻辑插值的情况，虽然不能完全解决问题，但已经足够好读了。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>此外，jade还有同时适用于对象和数组的each语法，遍历起来十分方便。\u003C\u002Fp>\n\u003Cp>看完上面的例子，应该不用多说了，模板如果不能简化开发工作，反而使代码变得复杂和难以维护，那么我个人认为宁可不要。\u003C\u002Fp>\n\u003Ch3>模板标记的选用\u003C\u002Fh3>\n\u003Cp>在模板标记的选用上，各个引擎可谓是八仙过海各显神通。在这个问题上，也确实没有很多可以拿来比较的东西，但还是有些小点值得一说。\u003C\u002Fp>\n\u003Ch4>模板标记与页面重构\u003C\u002Fh4>\n\u003Cp>按照\u003Ca href=\"http:\u002F\u002Fwww.twinsenliang.net\">彪叔\u003C\u002Fa>的观点，模板标记应该选用“看起来像文本”的标记，比如尖括号就应该避免，因为这样可以让重构同学在做页面的时候大概预览到模板标记所在处的效果，而不是被隐藏掉。\u003C\u002Fp>\n\u003Cp>不过，这其实是个不折不扣的伪命题。举个例子，\u003Ccode><%=var%>\u003C\u002Fcode>这种语法来自ASP，而这种语法在浏览器中并不会被隐藏掉，而是原样显示，因此并不会影响预览效果。至于编码时，则更没区别了，只是敲不同的键而已。既然如此，那么所谓“被隐藏掉”是在哪里呢？答案其实是——DreamWeaver的可视化界面……面对已经被边缘掉的DW，这个问题的的确确可以被彻底忽视了。\u003C\u002Fp>\n\u003Cp>当然，如果你坚持使用DW的话，我仍然要说这是个伪命题，因为时至今日，已经很少有人再把模板标记放到正常的文档流中了，因此不管选择什么样的标记，这些不在文档流中的模板都始终不会被看到。\u003C\u002Fp>\n\u003Ch4>避免与后端语言模板冲突\u003C\u002Fh4>\n\u003Cp>这倒是一个很值得考虑的问题。在使用jQuery tmpl与ThinkPHP时，由于两者的模板机制均有使用\u003Ccode>$\u003C\u002Fcode>符号，因此经常导致前端模板标记被后端解析，从而导致页面异常。最终只能通过后端强制指定不解析模板来解决问题。\u003C\u002Fp>\n\u003Cp>考虑到这个问题的话，在选用前端模板标记时其实也没办法做到尽善尽美，因为后端模板的标记也不少，很难避免所有可能冲突的情况。但我们可以适当做些考虑，避开一些常用的后端模板。比如我会更倾向于使用\u003Ccode>{%raw%}{%var%}{%endraw%}\u003C\u002Fcode>的方式（虽然我也没法证明它是一个更好的选择）。\u003C\u002Fp>\n\u003Ch4>美观\u003C\u002Fh4>\n\u003Cp>呵呵。美观是个很主观的话题，所以作者觉得哪个好看就用哪个吧……\u003C\u002Fp>\n\u003Cp>不过，除了输出变量之外，其它的模板标记其实更多的是一种语法设计，在这方面，确实要考虑美观的事情，上面说过，如果一个模板写出来异常复杂就不好了。\u003C\u002Fp>\n\u003Ch4>模板标记转义\u003C\u002Fh4>\n\u003Cp>其实这个问题与模板标记本身关系不大，主要是指如何让模板强制不解析某个模板标记，原样输出它。一般比较理想的方式是对标记进行转义，但转义也有两个层次的含义：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>在HTML级别的转义，比如我要输出\u003Ccode><%=var%>\u003C\u002Fcode>，则直接在模板中写转义后的\u003Ccode><%=var%>\u003C\u002Fcode>。\u003C\u002Fli>\n\u003Cli>在模板级别的转义，比如我要在jade中输出\u003Ccode>#{var}\u003C\u002Fcode>，则在模板中写入\u003Ccode>\\#{var}\u003C\u002Fcode>即可。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>对于这两种转义，我更看重的是第二种，因为一个模板应当要有输出任何字符的能力，包括它用到的模板标记本身。（注意在HTML级别转义的话，输出的结果文本是不一样的。）\u003C\u002Fp>\n\u003Ch3>模板位置及提取\u003C\u002Fh3>\n\u003Cp>在文章开头的例子中，我们把模板写到了JS中，随后也做了说明，模板文本是可以写到HTML中的。接下来就来看看将模板放到HTML中的几种主要方法。（还有更多的方法，玉伯有一篇文章中有详述，由于原文被墙，可以到CSDN转载的页面查看：\u003Ca href=\"http:\u002F\u002Fwww.csdn.net\u002Farticle\u002F2011-09-27\u002F304989\">《[浅析]淘宝详情页的BigRender优化的最佳方式》\u003C\u002Fa>）\u003C\u002Fp>\n\u003Ch4>直接放入文档流中的DOM\u003C\u002Fh4>\n\u003Cp>将模板直接放到DOM中是一种比较原始的方案，这种方法会在写HTML时直接将模板写进去，然后使用JS动态从父容器中取出进行渲染，最后将生成的HTML字符串再写回父容器中。这种方案的弊端很多：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>模板会被渲染出来，这是开发者不希望看到的。而如果使用css来隐藏的话又在项目中添加了没有意义的代码。\u003C\u002Fli>\n\u003Cli>模板存在被修改的可能。一旦DOM节点被渲染后就无法保证它不被修改，有可能等我们用JS去取模板时，它已经被改得面目全非甚至都不在文档中了。（外部JS库、UI库、开发框架如jQuery Mobile、浏览器插件都可能修改页面中的DOM。）\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>后来，在前辈们的探索下，找到了一种比较完美的方式：放到\u003Ccode>textarea\u003C\u002Fcode>中，这种方案在很大程度上避开了以上问题，只需要处理\u003Ccode>textarea\u003C\u002Fcode>本身即可。取用的时候只要取\u003Ccode>textarea\u003C\u002Fcode>的值即可。\u003C\u002Fp>\n\u003Ch4>放入script标签\u003C\u002Fh4>\n\u003Cp>将模板标记放到\u003Ccode>textarea\u003C\u002Fcode>中，虽然使得模板本身避免了被渲染和修改，但\u003Ccode>textarea\u003C\u002Fcode>本身还是需要隐藏。后来，前辈们又发现一个更NB的方案：将模板放到\u003Ccode>type\u003C\u002Fcode>属性不为\u003Ccode>script\u003C\u002Fcode>(以及一堆同义词)的\u003Ccode>script\u003C\u002Fcode>标签中，这个script是一个标准的DOM元素，但又不会受到其它的影响，浏览器也会直接忽略它，并不渲染。\u003C\u002Fp>\n\u003Cp>现在一个常见的模板放到\u003Ccode>script\u003C\u002Fcode>标签中可能是这样：\u003C\u002Fp>\n\u003Cpre>\u003Ccode><script type="text\u002Ftmpl" id="myTmpl">\n  模板放这里\n  ......\n<\u002Fscript>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>这是一种比较完美的方式，也是现在比较主流的方式。\u003C\u002Fp>\n\u003Ch4>template元素\u003C\u002Fh4>\n\u003Cp>鉴于模板引擎的广泛使用，web components组件规范中直接定义了一个\u003Ccode>template\u003C\u002Fcode>元素，专门用来存放模板。\u003C\u002Fp>\n\u003Cpre>\u003Ccode><template id="myTmpl">\n  模板放这里\n  ......\n<\u002Ftemplate>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>目前Chrome和Firefox均已支持这个元素（移动端暂没有浏览器支持）。\u003C\u002Fp>\n\u003Ch4>模板提取方式\u003C\u002Fh4>\n\u003Cp>好吧，上面三小节基本是在吹水，其实模板本身放哪里跟模板引擎的关系并不太大，模板引擎只要接受模板字符串进行处理就好了。但说回来，如果模板引擎能辅助用户进行模板的自动提取，则无疑是在易用性上的一个很好的亮点。\u003C\u002Fp>\n\u003Cp>目前jQuery tmpl和artTemplate都做了这些方面的努力。在jQuery tmpl中，直接在（经jQuery包裹后的）包含模板的元素上调用\u003Ccode>.tmpl\u003C\u002Fcode>方法即可，jQuery tmpl会自动去页面中提取出模板字符串并进行处理：\u003C\u002Fp>\n\u003Cpre>\u003Ccode>$('#myTmpl').tmpl(myData);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>而artTemplate允许通过指定包含模板的元素ID的方式自动提取模板：\u003C\u002Fp>\n\u003Cpre>\u003Ccode>template.render('myTmpl',myData);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>性能\u003C\u002Fh2>\n\u003Cp>任何JS库、框架都逃不开性能这个命题，模板引擎自然也不例外。但模板引擎的性能一直是一个争议不断的话题。\u003C\u002Fp>\n\u003Ch3>性能是否是伪命题\u003C\u002Fh3>\n\u003Cp>我们来看一个性能测试的页面\u003Ca href=\"http:\u002F\u002Faui.github.io\u002FartTemplate\u002Ftest\u002Ftest-speed.html\">http:\u002F\u002Faui.github.io\u002FartTemplate\u002Ftest\u002Ftest-speed.html\u003C\u002Fa>，其实结果很有意思，看完才知道，原来不同的模板引擎之间的性能差异真的如此巨大！\u003C\u002Fp>\n\u003Cp>不过更有意思的是，测试完成后，作者写了一句话：“测试已完成，请不要迷恋速度。”这其实是句很有意思的话，之前也有跟作者聊过性能方面的问题，作者也认为“性能是个伪命题”的观点。原因是这个测试的数据量是100*10000=100W。也即在百万级别的数据渲染时，才有几秒钟的性能差异。\u003C\u002Fp>\n\u003Cp>回到我们的日常web开发，单次渲染数据量上千就已经差不多是极限了，此时模板引擎之间的性能差异微乎其微，几乎无法被用户感知。\u003C\u002Fp>\n\u003Cp>另外还有一个特别值得注意的地方，模板引擎做的工作只是“模板+数据=包含数据的HTML字符串”，而这些HTML字符串真正显示在页面上还要经过一道DOM操作，而这个DOM操作在数据量大时比模板引擎本身的计算所要消耗的时间要大得多！如果100W条数据显示在DOM上，我觉得即使是Chrome也很难逃脱卡死的命运。\u003C\u002Fp>\n\u003Cp>这样看来，模板引擎的性能问题还真可能是个伪命题。那是否可以忽略这一问题呢？我认为也不可取，模板引擎还是要关注性能的，因为你不知道用户会怎么使用你的引擎。比如我就曾经为了偷懒，在一个页面上渲染了6000条数据，此时模板引擎在IE下的表现也可以差到用户可感知的程度。\u003C\u002Fp>\n\u003Ch3>有关预编译\u003C\u002Fh3>\n\u003Cp>在\u003Ca href=\"http:\u002F\u002Fcdc.tencent.com\u002F?p=5723\">《高性能JavaScript模板引擎原理解析》\u003C\u002Fa>一文中，artTemplate作者解释了其高性能来源于针对模板的预编译。即在首次渲染时会根据模板解析的结果生成一个用于拼接数据的函数，后续调用时直接使用这个函数而不需要再次解析模板。这是个非常好的思路，目前也有越来越多的模板引擎采用了预编译的方式，所以我猜测一下，上面的测试如果换用最新版、并引入更多的模板引擎再做一次的话，差异应该不会那么明显。\u003C\u002Fp>\n\u003Cp>关于预编译的时机，目前的模板引擎基本都放在浏览器端首次调用时进行预编译。artTemplate是我见到的第一个尝试把模板预编译过程放在构建阶段的模板引擎，它可以在发布前对产品中用到的模板进行预处理，最后发出去的直接是拼接字符串的函数。详细详情可以在\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fcdc-im\u002Fatc\">这里\u003C\u002Fa>查看。\u003C\u002Fp>\n\u003Cp>这其实是个很不错的思路，尤其是在前端编译的概念有燎原之势的这个时机，只要集成方便，还是很有前途的。不过略遗憾的是，目前artTemplate的预编译工具还没有提供Grunt.js的插件，需要单独编译。\u003C\u002Fp>\n\u003Cp>顺序发散一下，如果我们在引入jQuery的项目发布前，扫描一下调用的API，然后把jQuery也在发布前预编译一遍会怎样？其实想象空间还挺大的。\u003C\u002Fp>\n\u003Ch2>功能\u003C\u002Fh2>\n\u003Cp>前面已经说过，一个模板引擎最主要的功能就是实现数据和逻辑、结构的分离，简化开发工作。因此一些剩下的功能就被放到了最后，这些并不是模板引擎的主要考量因素，但如果做好，也会成为很不错的亮点。\u003C\u002Fp>\n\u003Ch3>异常处理\u003C\u002Fh3>\n\u003Cp>模板引擎都有一套特定的语法，当我们写的模板无法按照这套语法进行解析或者是在处理数据时发生错误时便会产生错误。有一部分模板引擎在产生错误时不会做过多的处理，此时错误被直接抛出，但产生错误的代码行却往往是模板引擎本身，一定程度上会给调试带来困难。\u003C\u002Fp>\n\u003Cp>artTemplate在错误处理上有一些尝试，出错时会带上出错的模板本身，这样开发者可以定位到出错的模板代码。而jade则更进一步，直接能定位到出错的位置所在的字符。\u003C\u002Fp>\n\u003Cp>当然，这些辅助信息并不一定100%准确，因为很可能错误产生于真正报错之前，这是几乎所有的语言调试过程中面临的一个问题。不过，有了这些辅助信息还是能提升开发者的调试效率的。\u003C\u002Fp>\n\u003Ch3>包含、mixin复用\u003C\u002Fh3>\n\u003Cp>在后端模板的世界中，模板之间的相互包含是一件非常普遍的事情，因为后端模板往往是以页为单位来进行输出渲染，而相对来讲，前端模板的应用场景则会显示更碎片化。因此个人觉得前端模板中的模板相互包含、引用并不是一个非常普遍的需求。不过，也有不少的模板为了与在后端（Node.js）的使用方式保持一致，也为前端提供了模板包含功能。\u003C\u002Fp>\n\u003Cp>除了使用包含来完成模板复用外，jade还提供了一种叫作\u003Ccode>mixin\u003C\u002Fcode>的方式来复用模板：\u003C\u002Fp>\n\u003Cpre>\u003Ccode>mixin article(title)\n  .article\n    .article-wrapper\n      h1= title\n      if block\n        block\n      else\n        p No content provided\n\n+article('Hello world')\n\n+article('Hello world')\n  p This is my\n  p Amazing article\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>会编译成：\u003C\u002Fp>\n\u003Cpre>\u003Ccode><div class="article">\n  <div class="article-wrapper">\n    <h1>Hello world<\u002Fh1>\n    <p>No content provided<\u002Fp>\n  <\u002Fdiv>\n<\u002Fdiv>\n<div class="article">\n  <div class="article-wrapper">\n    <h1>Hello world<\u002Fh1>\n    <p>This is my<\u002Fp>\n    <p>Amazing article<\u002Fp>\n  <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>这种方式其实已经非常接近\u003Ca href=\"https:\u002F\u002Fwww.toobug.net\u002Farticle\u002Fwhat_is_shadow_dom.html\">Shadow DOM\u003C\u002Fa>中对DOM的封装思路。（当然，如果你玩过LESS、SASS之类的CSS预处理语言，也会觉得这个mixin的概念似曾相识。）\u003C\u002Fp>\n\u003Cp>个人以为，相对模板包含而言，这种mixin的复用方式其实是对前端模板而言更为友好的方式。\u003C\u002Fp>\n\u003Ch2>结\u003C\u002Fh2>\n\u003Cp>洋洋洒洒地码了这么多，其实仍然没有去讲怎么设计一个模板引擎，只是提出了自己使用模板引擎过程中看到的一些差异和一些值得思考的点。真正设计一个工业级的模板引擎还是颇费工夫的。\u003C\u002Fp>\n\u003Cp>至于模板引擎的实现，则完全是编码的硬功夫了，除了编译原理外也没啥好说的了，就不打算说了。（装下B，真实原因是我也没写过……Wahaha……）\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>2013-12-04：感谢Barret Lee在评论中给出一篇好文\u003Ca href=\"http:\u002F\u002Fbarretlee.com\u002Fprinciple-of-javascript-template\u002F\">《javascript模板引擎原理，几行代码的事儿》\u003C\u002Fa>，这是一篇真正在讲如何用js实现一个模板引擎的文章，推荐阅读。\u003C\u002Fp>\n\u003C\u002Fblockquote>\n","\u003Cp>前端模板引擎现在已经被广泛应用于前端开发了，几乎每个项目都会使用。微博上甚至出现了“不写个模板引擎就没办法在前端界混了”的言论。当然，这是玩笑话，却也能在一定程度上反映前端模板的普及程度。如果你还没有了解过前端模板引擎，赶紧去补补课吧。\u003C\u002Fp>\n\u003Cp>本文其实算不上是一篇讲模板引擎设计的文章，写这篇文章的动力来自于自己使用过一些模板引擎（jQuery Tmpl、jade、ejs、artTemplate以及ThinkPHP自带后端模板引擎）之后的心得，所以可能不会涉及到模板引擎设计的方方面面，更多地是讲模板引擎之间的一些有差异的细节以及我的思考和取舍。\u003C\u002Fp>\n\u003Ch2>来历\u003C\u002Fh2>\n\u003Cpre>\u003Ccode>var tempHtml = '<table>' +\n    '     <tr>' +\n    '       <th>Hello<\u002Fth>' +\n    '       <th>World<\u002Fth>' +\n    '       <th>!<\u002Fth>' +\n    '     <\u002Ftr>' +\n    '     <tr>' +\n    '       <td>' + myData.col1 + '<\u002Ftd>' +\n    '       <td>' + myData.col2 +'<\u002Ftd>' +\n    '       <td>' + (myData.col3 === 'yes'?'!':'?') + '<\u002Ftd>' +\n    '     <\u002Ftr>' +\n    '   <\u002Ftable>';\n\ndocument.querySelector('#myDiv').innerHTML = tempHtml;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>相信上面的代码对哪怕做过一点点涉及界面开发的都应该很熟悉吧。当我们想把一段结构和一段数据组合起来，再放到页面上时，就会常常面临这样一段复杂的代码。\u003C\u002Fp>\n\u003Cp>这段代码相信不用我说你也会觉得它实在有点复杂：要处理结构中字符串本身的拼接，还要注意结构与数据的拼接，处理数据拼接时还要注意运算优先级（尤其在使用\u003Ccode>?:\u003C\u002Fcode>三元运算符时），还要为了可读性考虑纠结的缩进……\u003C\u002Fp>\n\u003Cp>当然，最麻烦的还不是这里，当我们想要对一个数据循环遍历并输出时，居然还要自己去写循环，再一圈一圈地把这些结构拼起来，最后再拼上首尾的结构。而当数据为空时，又要自己去写一个“暂无数据”之类的占位符……\u003C\u002Fp>\n","",{"total":23,"totalRoots":24,"comments":25,"pv":16},10,5,[26,33,39,45,51,57,61,67,71,75],{"id":27,"content":28,"user_id":29,"nick":30,"link":21,"date":31,"rid":16,"vote_up":16,"vote_down":16,"visible":32},58,"\u003Cp>好文！\u003C\u002Fp>",37,"basecss","2013-08-29 10:01:43",true,{"id":34,"content":35,"user_id":36,"nick":37,"link":21,"date":38,"rid":16,"vote_up":16,"vote_down":16,"visible":32},59,"\u003Cp>赞!!\u003C\u002Fp>",38,"jun","2013-09-02 02:44:41",{"id":40,"content":41,"user_id":42,"nick":43,"link":21,"date":44,"rid":16,"vote_up":16,"vote_down":16,"visible":32},60,"\u003Cp>呵呵，我昨天也写了一篇类似的文章。 \u003Ca href=\"http:\u002F\u002Fbarretlee.com\u002Fprinciple-of-javascript-template\u002F\" rel=\"nofollow noopener\" title=\"http:\u002F\u002Fbarretlee.com\u002Fprinciple-of-javascript-template\u002F\">http:\u002F\u002Fbarretlee.com\u002Fprinci...\u003C\u002Fa>\u003C\u002Fp>",39,"小胡子哥","2013-12-04 02:44:20",{"id":46,"content":47,"user_id":48,"nick":49,"link":21,"date":50,"rid":40,"vote_up":16,"vote_down":16,"visible":32},61,"\u003Cp>好文！你的文章在讲如何实现，而我是在讲实现中的边角料，哈哈。已在文章中添加链接。\u003C\u002Fp>",2,"TooBug","2013-12-04 03:21:41",{"id":52,"content":53,"user_id":54,"nick":55,"link":21,"date":56,"rid":16,"vote_up":16,"vote_down":16,"visible":32},62,"\u003Cp>目前为止看过的讲得**最清楚**，**最好理解**的*前端模板引擎*的文章……非常感谢楼主赐教……\u003C\u002Fp>",40,"Hux","2014-04-10 09:00:56",{"id":58,"content":59,"user_id":48,"nick":49,"link":21,"date":60,"rid":52,"vote_up":16,"vote_down":16,"visible":32},63,"\u003Cp>这个评价，受宠若惊，非常感谢您的赏识和鼓励！\u003C\u002Fp>","2014-04-10 09:18:51",{"id":62,"content":63,"user_id":64,"nick":65,"link":21,"date":66,"rid":16,"vote_up":16,"vote_down":16,"visible":32},64,"\u003Cp>jade其实不算前端模版了，所以才有mixin、include之类的特性\u003C\u002Fp>",41,"Xiaoming Bian","2014-06-10 08:42:54",{"id":68,"content":69,"user_id":48,"nick":49,"link":21,"date":70,"rid":62,"vote_up":16,"vote_down":16,"visible":32},65,"\u003Cp>为何不算呢？\u003C\u002Fp>","2014-06-10 09:04:01",{"id":72,"content":73,"user_id":64,"nick":65,"link":21,"date":74,"rid":68,"vote_up":16,"vote_down":16,"visible":32},66,"\u003Cp>jade是给node环境设计的，我觉得相当于后端模版，虽然这货是js写的\u003C\u002Fp>","2014-06-11 07:08:11",{"id":76,"content":77,"user_id":48,"nick":49,"link":21,"date":78,"rid":72,"vote_up":16,"vote_down":16,"visible":32},67,"\u003Cp>但是放在前端用一样可以的呀，只是体积稍大比较难接受。但很多概念是相当好的，也能在前端正常使用。而且那个mixin我感觉就非常适合前端复用组件的场景。\u003C\u002Fp>","2014-06-11 07:18:24"]