使用EJS(模板引擎)动态绑定页面中的数据

前端主要的绑定页面中的数据的方式有两种：

1.JS代码中进行字符串拼接 

2.使用模板引擎(Mustache.js  或者 ejs.js) 来动态绑定页面中的数据

 

一、JS代码中进行字符串拼接 

这种方式属于完全的前后端分离，在JS中获取到服务器端返回的数据后，把之前在HTML页面中写好的标签，一句句的复制到JS中，用字符串拼接的方式，把标签和数据拼接在一起，最后再把拼接完成的字符串插入到页面中指定的位置。使用这种方式处理简单的字符串拼接还可以，处理复杂的，非常的恶心，我们接下来看一下：

var str = '';
if (jsonData) {
    var data = jsonData["data"];
    $.each(data, function (key, curAry) {
        str += '<div class="matchDate" time="' + key + '">';
        str += '<h2 class="date">' + key.myFormatTime("{1}月{2}日") + '</h2>';
        str += '<ul class="matchList">';
            $.each(curAry, function (index, curData) {
                var linkURL;
                str += '<li>';
                    str += '<div class="left">';
                        str += '<span class="time">' + curData["startTime"].myFormatTime("{3}:{4}") + '</span>';
                        str += '<span class="type">' + curData["matchDesc"] + '</span>';
                        str += '</div>';
                    str += '<div class="middle">';
                str += '</li>';
            });
            str += '</ul>';
        str += '</div>';
    });
}
$match.children("div").eq(0).html(str);
$myScroll.refresh();

这样，不仅拼接字符串的时候浪费时间，后期改动的话也不好改，而且JS代码会非常的混乱； 此外我看了一些项目中，还有使用动态创建元素节点来实现的，这样做和字符串拼接一样，JS中的代码混乱，不易于后期的维护，此外使用动态创建元素节点的方式，还会引发多次的DOM回流，影响页面的性能。