一段好用的代码，瞬间解决html复用问题

本文旨在解决js中插入dom时的html复用问题

正文

如下图这样：

点击添加新成员按钮时，在页面中再插入一块成员表单，一般的做法可能是这样的

1
$('.box').append('<div class="row"><div class="col-xs-2 form-label">成员姓名</div><div class="col-xs-5"><input class="form-control" type="text" name="" ></div><div class="col-xs-5 tip J-tip"><div class="tip-box"><p class="J-tip-content"></p></div></div></div>');

尤其是内容很长并且还有动态变化的内容时，想想都头疼吧。

重点 重点 重点：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
window.tpl = (function () {
    var cache = {};
    return function tmpl(str, data) {
        var fn = !/\W/.test(str) ?
            cache[str] = cache[str] ||
                tpl(document.getElementById(str).innerHTML) :
            new Function("obj",
                "var p=[],print=function(){p.push.apply(p,arguments);};" +
                "with(obj){p.push('" +
                str
                    .replace(/[\r\t\n]/g, " ")
                    .split("<%").join("\t")
                    .replace(/((^|%>)[^\t]*)'/g, "$1\r")
                    .replace(/\t=(.*?)%>/g, "',$1,'")
                    .split("\t").join("');")
                    .split("%>").join("p.push('")
                    .split("\r").join("\\'")
                + "');}return p.join('');");
        return data ? fn(data) : fn;
    };
})();

这可是段神奇的代码，有了它js中再也见不到 html 的身影了。

用法：

将要复用的 html 写在 dom 流中，用 <script> 标签包上，定义一个非官方定义的 type 及 id，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<script type="tpl" id="memberTpl">
    <div class="block-box J-member-box">
        <a href="javascript:void(0);" class="delete-btn J-delete-member-btn" title="删除">&times;</a>
        <div class="row">
            <div class="col-xs-2 form-label">成员姓名</div>
            <div class="col-xs-5">
                <input class="form-control" type="text" name="" >
            </div>
            <div class="col-xs-5 tip J-tip">
                <div class="tip-box">
                    <p class="J-tip-content"></p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-2 form-label">成员职位</div>
            <div class="col-xs-5">
                <input class="form-control" type="text" name="" >
            </div>
            <div class="col-xs-5 tip J-tip">
                <div class="tip-box">
                    <p class="J-tip-content"></p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-2 form-label">个人简介</div>
            <div class="col-xs-5">
                <textarea class="form-control" name="" ></textarea>
            </div>
            <div class="col-xs-5 tip tip-h J-tip ">
                <div class="tip-box">
                    <p class="J-tip-content"></p>
                </div>
            </div>
        </div>
        <div class="row image">
            <div class="col-xs-2 form-label">个人头像</div>
            <div class="col-xs-5">
                <a href="javascript:void(0);" class="image-show J-upload-img-btn" id="memberImgPrev" data-target="memberImgInput">
                    <div class="upload-img-box">
                        <span>上传图片</span>
                    </div>
                </a>
                <p class="img-desc">支持小于2M，格式为jpg、png的图片，分辨率为540*300px</p>
                <input type="hidden">
            </div>
            <div class="col-xs-5 tip tip-h J-tip">
                <div class="tip-box">
                    <p class="J-tip-content"></p>
                </div>
            </div>
        </div>
    </div>
</script>

然后把那段重点代码贴到 js 中，并在 js 中调用定义好的 tpl 接口：

1
2
var tplHtml = tpl('memberTpl');      //生成html代码
$('.J-members-box').append(tplHtml);  //追加到dom块中

至此基本用法就完成了。
查看在线显示？ 戳戳戳
要源码？ 戳戳戳

升级用法

1
2
3
4
<div id="cityBox"></div>
<script type="tpl" id="cityModal">
    <input type="button"  data-id="<%=id%>" data-code="<%=code%>" value="<%=name%>"/>
</script>

如上<%=变量%>中的变量可以动态赋值；
这常用于使用 ajax 获取到多个想似的子资源后，动态渲染到页面上；
也常出现在for循环中；

1
2
var cityHtml = tpl('cityModal', {id: 0, code: 111, value: "北京"});
$('#cityBox').append(cityHtml);

优点：

  • 便于修改模板
  • 使 js 与 html 分离，代码清晰
  • 这还不够？对于追求美感的攻城狮来讲，可帮大忙了。。。

注意：

  • 定义的 html 模版中不能出现单引号，否则会报错
  • 变量也可以用 hash，如：
    1
    2
    3
    <script type="tpl" id="cityModal">
        <input type="button"  data-id="<%=city.id%>" data-code="<%=city.code%>" value="<%=city.name%>"/>
    </script>
blog
前端