javascript - 怎么实现HTML复用?

问题描述

问 题

问题：在主页上链接到不同的介绍网页，每个介绍网页都有图片和文字介绍，介绍网页的HTML结构是一模一样的，只是图片和介绍文字不一样，不想重复的复制粘贴应该怎么处理？（图片和介绍都是本地的，静态）有哪位前辈可以提供一下建议？非常感谢！！

解决方案

建议你用前端模板引擎，常用的有：baiduTemplate(百度)、artTemplate（腾讯）、juicer（淘宝）、jquery template; 个人认为 juicer 比较轻、速度快，用起来也比较简单，下面介绍一下 juicer ：

HTML 代码:

<script id="tpl" type="text/template">
    <ul>
        {@each list as it,index}
            <li>${it.name} (index: ${index})</li>
        {@/each}
        {@each blah as it}
            <li>
                num: ${it.num} <br />
                {@if it.num==3}
                    {@each it.inner as it2}
                        ${it2.time} <br />
                    {@/each}
                {@/if}
            </li>
        {@/each}
    </ul>
</script>

Javascript 代码:

var data = {
    list: [
        {name:' guokai', show: true},
        {name:' benben', show: false},
        {name:' dierbaby', show: true}
    ],
    blah: [
        {num: 1},
        {num: 2},
        {num: 3, inner:[
            {'time': '15:00'},
            {'time': '16:00'},
            {'time': '17:00'},
            {'time': '18:00'}
        ]},
        {num: 4}
    ]
};

var tpl = document.getElementById('tpl').innerHTML;
var html = juicer(tpl, data);

这篇关于javascript - 怎么实现HTML复用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！