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-