获取HTML模版字符串

在JavaScript进行模版填充的时候，一个必须的步骤就是获取HTML模版字符串。获取的方法有多种：

1）在JavaScript代码中直接定义；

优点：直接定义直接用

缺点：1、当模版复杂时，为了保持良好的HTML格式，通常要拆分成多行字符串相加的形式。

　　　2、重构需要修改DOM结构时，较为麻烦，增加重构与JS耦合。

2）在HTML添加注释结点，在注释结点内定义模版，然后获取；

注释结点HTML模版通常定义为：

<!--TPL.myTemplate
<li>{key}<li>
TPL.myTemplate-->

获取HTML模版：

document.body.innerHTML.split('<!--TPL.myTemplate')[1].split('TPL.myTemplate-->')[0];

优点：1、在HTML页面上定义模版，可保持良好的HTML结构，不用拼接字符串。

　　　2、降低重构与JS耦合度。

缺点：获取HTML模版时效率不高。

3）在结点<script id="template" type="customType"></script>内部定义模版；

获取HTML模版：

document.getElementById('template').innerHTML

此方法需要注意，type值要是浏览器不能识别的类型，这样浏览器就会忽略它。

哪些类型是浏览器可以识别的呢？

YUI3的demo中，type值为text/x-template，建议采用该值。

4）在节点<xmp id="xmpTemplate" style="display:none"></xmp>内定义模版；

xmp标签，可以防止HTML标签转义，不过要设其display为none。

获取HTML模版：

document.getElementById('xmpTemplate').innerHTML;

普通节点设其display为none，但不适合当模版容器的原因，是因为其内部标签可能被转义。

不知有没有其他更好办法，欢迎讨论。

posted @ 2012-07-28 11:21 realwall 阅读(1288) 评论(0) 编辑收藏举报

realwall