无限滚动加载数据问题

Question

做移动端程序的时候，经常会遇到无限滚动的功能，通常实现无限滚动的方式是页面滚动到底部后出发一个ajax请求，后端返回数据然后动态追加DOM，但是如果DOM结构很复杂，追加的时候拼接HTML会很复杂，比如之前做过的一段程序，如下：

$.each(response.data, function(key, task){
                      var html =  '<div class="card facebook-card">';
                      html +=   '<div class="card-header no-border">';
                      html +=     '<div class="facebook-avatar">';
                      html +=       '<img src="' + task.user_avatar + '" />';
                      html +=     '</div>';
                      html +=     '<div class="facebook-name">';
                      html +=       '<span class="content-author">';
                      html +=         task.user_nickname;
                      html +=       '</span>';
                      html +=       '<span class="content-tag">';
                      html +=         task.category_name
                      html +=       '</span>';
                      html +=     '</div>';
                      html +=     '<div class="facebook-date">';
                      html +=       task.city
                      html +=     '</div>';
                      html +=   '</div>';
                      html +=   '<div class="card-content">';
                      html +=     '<a class="content-title" href="' + site_domain + '/home/task/detail_auth/task_id/' + task.id + '/type/' +type + '/category_id/' + category_id + '/city/' + city + '">';
                      html +=       task.title;
                      html +=     '</a>';
                      html +=     '<div class="content-detail">';
                      html +=       '<a class="content-title" href="' + site_domain + '/home/task/detail_auth/task_id/' + task.id + '/type/' + type + '/category_id/' + category_id + '/city/' + city + '">';
                      html +=         task.detail
                      html +=       '</a>';
                      html +=     '</div>';
                      html +=     '<div class="content-bottom">';
                      html +=       '<span class="content-date">';
                      html +=         '截止时间:' + task.deadline
                      html +=       '</span>';
                      if (task.openid == openid) {
                        html +=       '<span class="content-delete" data-id="task.id">';
                        html +=         '删除';
                        html +=       '</span>';
                      }
                      if (task.is_expired == 1) {
                        html +=       '<span class="content-expired">';
                        html +=         '已过期';
                        html +=       '</span>';
                      }
                      html +=     '</div>';
                      html +=   '</div>';//
                      html += '</div>';
                      html += '<div class="card-divider"></div>';
                      $('.task-container').append(html);
                    });

对于这种HTML结构封装的时候必须得非常小心，如果漏掉了某个标签，造成标签未闭合，很可能就造成整个页面样式错乱(自己都觉得这段代码太烂了)。
对于这种情况，大家有什么比较方便的方法么？

Answer 1

angularjs, react, vue

Answer 2

前后端分离 用列表渲染json

Answer 3

把另一个问题下的答案粘贴过来，我是怎么干的

<template id="template">
    <tr><td></td><td></td><td></td><td><img class="img" > </td></tr>
</template>
<script>
    var json = [{id:1,name:'aa',key:233},.....]
    var temp = $($('#template').html());
    $(json).each(function(){
        temp.find('td').eq(0).text(this.id);
        temp.find('td').eq(1).text(this.name);
        temp.find('td').eq(2).text(this.key);
        temp.find('.img').attr('src',this.img)
    });
</script>

Answer 4

克隆元素，然后填充数据，最好用docuemnt.createDocumentFragment()，最后一次性插入，来减少DOM的重排

Answer 5

第一种：使用ES6 模板字符串
//在es6语法中有一个模板字符串 可以使用该功能 代码如下
//详细使用请查看http://es6.ruanyifeng.com/#docs/string
//10:模板字符串

$.each(response.data, function(key, task) {
    $('.task-container').append(
        `<div class="card facebook-card">
            <div class="card-header no-border">
                <div class="facebook-avatar">
                    <img src="${task.user_avatar}" />
                </div>
            </div>
        </div>`);
});

第二种：依次创建对象 而不是拼接字符串

//类似这样
$.each(response.data, function(key, task) {

    var html = $('<div class="card facebook-card"></div>');
    $('<div class="card-header no-border"></div>').appendTo(html);
    $('.task-container').append(html);
});

第三种：使用第三方模板插件 JsRender.js

Answer 6

给你两种方案：

1. 如果需要从后端传出参数，可以采用React.js等View层框架进行DOM的参数写入，使用非常方便。

2. 还可以从后端直接输出已经写入参数的HTML内容，而不是参数本身的，这样通过后端的模板引擎进行参数的写入，也可以达到效果。

Answer 7

见题主代码得知还停留在使用jQuery阶段，然后也看到比较多人建议使用框架，但是基于jQuery也能简单解决问题。

可以使用简单的模板处理underscore.template。
然后把模板写到页面上

<template id="task-item">
<ui>
    <li>
        <div class="avatar">
            <img src="<%- task.user_avatar %>" alt="<%- task.user_nickname %>">
            <br>
            <span><%- task.user_nickname %></span>
        </div>
        <div class="content">
            <%- task.detail %>
        </div>
    </li>
</ui>
</template>

下面是使用例子：

var template = _.template($('#task-item').html());
$.each(response.data, function(key, task){
   $('.task-container').append(template(task)); 
});

这样就能简单解决题主问题，但是从效率和维护角度，还是建议使用一些MVVM框架比较好，目前推荐react的比较多，小应用我推荐vue。