基于前端模板的数据、结构分离开发方式

imPony 发布于：2017-11-24 17:52:19

传统方式：

直观
方便
不易扩展
难维护

前端模板方式：

数据复杂时，可大大减少代码
易开发、易维护
效率高
有学习成本

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>前端模板演示</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/blueimp-JavaScript-Templates/3.11.0/js/tmpl.min.js"></script>
</head>
<body>

<div id="js_list"></div>

<script type="text/x-tmpl" id="js_tmpl_person">
    <h1>{%=o.title%}</h1>
    <ul>
        {% for (var i = 0; i < o.person.length; i++) { %}
        <li>
            {%=o.person[i].name%}
            {%=o.person[i].gender%}
            {% if (o.person[i].name == '雪梨') { %}
                CEO
            {% } %}
        </li>
        {% } %}
    </ul>
</script>

<script>
$(document).ready(function () {
    var data = {
        title: '人员列表',
        person: [
            {
                name: '雪梨',
                gender: 'male'
            },
            {
                name: '员工一',
                gender: 'male'
            },
            {
                name: '员工二',
                gender: 'female'
            },
            {
                name: '员工三',
                gender: 'female'
            },
            {
                name: '员工四',
                gender: 'male'
            }
        ]
    };
    var tmplPerson = tmpl('js_tmpl_person', data);
    $('#js_list').html(tmplPerson);
});
</script>
</body>
</html>

觉得有用请点个赞吧！

1 612

99元开通年度会员！
1000+模块代码随便下载！

基于前端模板的数据、结构分离开发方式

最新