自定义简单js模板

最新推荐文章于 2024-07-31 14:11:01 发布

QF_

最新推荐文章于 2024-07-31 14:11:01 发布

阅读量1.5k

点赞数

分类专栏：网页开发文章标签： javascript

本文链接：https://blog.csdn.net/qf0129/article/details/53129155

版权

网页开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

// 使用方法：
// {[name]}
// @if{[name]}
// @else
// @endif

var Template = function(templateId,data) {
      var template=document.getElementById(templateId).innerHTML;
      data = Array.isArray(data) ? data : [data];
      var html = "";

      data.forEach(function(el) {
        var tmpl = template.replace(/@if\{\[(\w+)\]\}([\s\S]+?)(@else([\s\S]+?))?@endif/g, function($, $1, $2, $3, $4) {
          return el[$1] ? $2 : ($3 ? $4 : "");
        });

        html += tmpl.replace(/\{\[(\w+)\]\}/g, function($, $1) {
          return ($1 in el) ? el[$1] : $;
        });
      });
      return html;
    };

举个栗子:

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
    <button class="btn">添加</button>
    <ul class="container"></ul>

    <!-- 定义一个模板 -->
    <script id="myTemplate" type="text/html">
        <li style="background:#aaa;padding:10px;margin:5px;display:block;float:left;">
            <div>姓名:{[name]}</div>
            @if{[tel]}
            <div>电话:{[tel]}</div>
            @endif
        </li>
    </script>

    <script type="text/javascript">
    $('.btn').click(function(){
        var tpl=Template("myTemplate",[{'name':'张三'},{'name':'李四','tel':'13166668888'}]);
        $('.container').append(tpl);
    });

    var Template = function(templateId,data) {
      var template=document.getElementById(templateId).innerHTML;
      data = Array.isArray(data) ? data : [data];
      var html = "";

      data.forEach(function(el) {
        var tmpl = template.replace(/@if\{\[(\w+)\]\}([\s\S]+?)(@else([\s\S]+?))?@endif/g, function($, $1, $2, $3, $4) {
          return el[$1] ? $2 : ($3 ? $4 : "");
        });

        html += tmpl.replace(/\{\[(\w+)\]\}/g, function($, $1) {
          return ($1 in el) ? el[$1] : $;
        });
      });
      return html;
    };
    </script>

</body>
</html>