Web开发时常常需要在页面种存放JavaScript需要使用到的html模板片段，这里是我使用过的三种方式，欢迎补充。
1.使用隐藏的div存放
如放一段{{ mustache }}的模板：
|
1 2 3 4 5 6 7 8 9 10 |
<div style="display:none;"> {{#items}} {{#first}} <li><strong>{{name}}</strong></li> {{/first}} {{#link}} <li><a href="{{url}}">{{name}}</a></li> {{/link}} {{/items}} </div> |
刚做web开发那会常使用这种方法来放html模板片段，但这种情况下里面的内容会被页面解析，特别是当img标签在里面的时候，由于src还没有被赋具体的URL，浏览器就会向服务器发一条无意义的请求，导致服务器产生不必要的404日志。
2.使用隐藏的textarea存放
后来想了个办法，既然textarea里的内容不会被解析，那可以把模板内容放到隐藏的textarea里。
|
1 2 3 |
<textarea style="display:none;"> // template </textarea> |
3.使用script标签指定浏览器不认识的type来存放
再后来，了解到浏览器当遇到不认识的script类型时就不会解析里面的内容，就慢慢习惯将模板内容放在script标签里，赋上一个浏览器不认识的类型(如: text/tpl)，这样连display:none的也省了。
|
1 2 3 |
<script type="text/tpl"> // template </script> |
当然，还有把模板压缩成JS字符串，使用一个js常量的来保存html模板。这种情况下一般需要借助外部工具来压缩成字符串，直接手工处理费时且容易出错。
-EOF-