JavaScript 模板存放方法小结

Web开发时常常需要在页面种存放JavaScript需要使用到的html模板片段，这里是我使用过的三种方式，欢迎补充。

1.使用隐藏的div存放
如放一段{{ mustache }}的模板：

<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里。

<textarea style="display:none;">
// template 	
</textarea>

3.使用script标签指定浏览器不认识的type来存放
再后来，了解到浏览器当遇到不认识的script类型时就不会解析里面的内容，就慢慢习惯将模板内容放在script标签里，赋上一个浏览器不认识的类型(如: text/tpl)，这样连display:none的也省了。

<script type="text/tpl">
// template 	
</script>

当然，还有把模板压缩成JS字符串，使用一个js常量的来保存html模板。这种情况下一般需要借助外部工具来压缩成字符串，直接手工处理费时且容易出错。
-EOF-