zoukankan      html  css  js  c++  java
  • 获取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值要是浏览器不能识别的类型,这样浏览器就会忽略它。

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

    传送门:http://www.iana.org/assignments/media-types/index.html

    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,但不适合当模版容器的原因,是因为其内部标签可能被转义。

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

  • 相关阅读:
    shell 实现word count
    jvm 参数调优
    Java注解处理器(转)
    JVM -XX: 参数介绍(转)
    如何在Linux下重命名多个文件
    Kafka学习之broker配置(0.8.1版)(转)
    linux 历史命令用法(转)
    hive-site.xml 参数设置
    Hadoop-2.2.0 + Hbase-0.96.2 + Hive-0.13.1(转)
    正则表达式通过Unicode属性匹配
  • 原文地址:https://www.cnblogs.com/realwall/p/2612936.html
Copyright © 2011-2022 走看看