jquery - 在 Jquery 中附加大块 HTML

Question

我的用户界面使用 REST API 并以 json 形式获取数据。我将这些数据附加到 HTML 中，如下所示，但我的脚本文件非常大且可读性低。

所以我正在寻找一种将 json 数据导入 HTML 的新方法。有什么方法可以用 jQuery 做到这一点吗？

我听说了某事。使用 AngularJS，但我没有时间学习另一个固件或库。如果可能的话，我想用 jQuery 来实现。

function publish_survey() {
    $.ajax({
        url : URL_API + URL_POLL,
        type : 'get',
        data : {'user_id' : user_id},
        dataType: 'json',
        success : function (response) {
            console.log(response);
            var html = '';
            for (var i = 0; i < response.data.length; i++) {
                var date = new Date(response.data[i].created_at);
                var formatted_date = date.getDay() + ' ' + G_MONTHS[date.getMonth()] + ', ' + date.getFullYear();

                html += '<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">' +
                            '<div class="mt-card-item" onclick="">' +
                                '<div class="mt-card-avatar mt-overlay-1">' +
                                    '<img src="' + PATH_LAYOUT_IMAGES + '/poll_bg.png" />' +
                                    '<div class="mt-overlay">' +
                                        '<ul class="mt-info">' +
                                            '<li>' +
                                                '<a class="btn default btn-outline" href="javascript:void(0);" onclick="previewPoll(\''+response.data[i].id+'\');">' +
                                                    '<i class="fa fa-eye"></i>' +
                                                '</a>' +
                                            '</li>' +
                                        '</ul>' +
                                    '</div>' +
                                '</div>' +
                                '<div class="mt-card-content">' +
                                    '<h3 class="mt-card-name">' + response.data[i].title + '</h3>' +
                                    '<p style="font-size:10px;">' + formatted_date + '</p>' +
                                    '<div class="mt-card-social">' +
                                        '<button class="btn blue-hoki btn-block" onclick="selectPoll(this, \''+response.data[i].id+'\');">'+LANG.option.select+'</button>' +
                                    '</div>' +
                                '</div>' +
                            '</div>' +
                        '</div>';

            }

            $('#poll-publish > .row').append(html);
        }
    });
}

Answer 1

很大程度上取决于您必须与哪些浏览器保持兼容。您可以采取一些措施来改进现有代码，但最好的解决方案需要更新的浏览器(或转译器)。

首先，我建议您使用提取方法技术将服务器查询逻辑与格式化逻辑分开。 (这适用于任何浏览器。)这样做的原因是，它至少将代码的“make HTML”部分与代码的“query-the-server”部分隔离开来，并且可以使代码更清晰，即使它还相当长。所以考虑这个重构:

function publish_survey() {
    $.ajax({
        url : URL_API + URL_POLL,
        type : 'get',
        data : {'user_id' : user_id},
        dataType: 'json',
        success : function (response) {
            console.log(response);
            var html = '';
            for (var i = 0; i < response.data.length; i++) {
                html += make_html_for_card(response.data[i]);
            }

            $('#poll-publish > .row').append(html);
        }
    });
}

function make_html_for_card(card) {
    var date = new Date(card.created_at);
    var formatted_date = date.getDay() + ' ' + G_MONTHS[date.getMonth()] + ', ' + date.getFullYear();

    return '<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">' +
        '<div class="mt-card-item" onclick="">' +
            '<div class="mt-card-avatar mt-overlay-1">' +
                '<img src="' + PATH_LAYOUT_IMAGES + '/poll_bg.png" />' +
                '<div class="mt-overlay">' +
                    '<ul class="mt-info">' +
                        '<li>' +
                            '<a class="btn default btn-outline" href="javascript:void(0);" onclick="previewPoll(\''+card[i].id+'\');">' +
                                '<i class="fa fa-eye"></i>' +
                            '</a>' +
                        '</li>' +
                    '</ul>' +
                '</div>' +
            '</div>' +
            '<div class="mt-card-content">' +
                '<h3 class="mt-card-name">' + card[i].title + '</h3>' +
                '<p style="font-size:10px;">' + formatted_date + '</p>' +
                '<div class="mt-card-social">' +
                    '<button class="btn blue-hoki btn-block" onclick="selectPoll(this, \''+card[i].id+'\');">'+LANG.option.select+'</button>' +
                '</div>' +
            '</div>' +
        '</div>' +
    '</div>';
}

这并没有从根本上改变代码的行为；它只是让 publish_survey() 更容易阅读和推理，因为它更短:所有 HTML 格式化垃圾都在一个函数中，该函数仅仅负责格式化 HTML 和不做任何其他事情。如果您经常这样做，您可以将所有 HTML 格式化函数移动到一起，甚至将它们移动到单独的 JavaScript 文件中，以便实际上将应用程序逻辑与表示代码分开。

虽然该解决方案确实将 HTML 移开，但该解决方案没有解决如何使嵌入的 HTML 本身看起来不那么难看:编码的 HTML 很丑陋，而且工作起来很痛苦与并维持。当然一定有更好的方法，我认为这正是您的问题所在。

现代 JavaScript (ES6) 包括新的 template literal (或模板字符串)，一个新的 JavaScript 功能，旨在解决这个问题。您可以使用反引号 (`) 来包裹字符串，而不是撇号或双引号。在模板字符串中，您可以正常使用换行符，并且可以使用花括号嵌入内容。因此，如果您支持模板文字，则 make_html_for_card() 函数会变成这样:

function make_html_for_card(card) {
    var date = new Date(card.created_at);
    var formatted_date = date.getDay() + ' ' + G_MONTHS[date.getMonth()] + ', ' + date.getFullYear();

    return `
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
            <div class="mt-card-item" onclick="">
                <div class="mt-card-avatar mt-overlay-1">
                    <img src="{PATH_LAYOUT_IMAGES}/poll_bg.png" />
                    <div class="mt-overlay">
                        <ul class="mt-info">
                            <li>
                                <a class="btn default btn-outline" href="javascript:void(0);" onclick="previewPoll('{card[i].id}');">
                                    <i class="fa fa-eye"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="mt-card-content">
                    <h3 class="mt-card-name">{card[i].title}</h3>
                    <p style="font-size:10px;">{formatted_date}</p>
                    <div class="mt-card-social">
                        <button class="btn blue-hoki btn-block" onclick="selectPoll(this, '{card[i].id}');">{LANG.option.select}</button>
                    </div>
                </div>
            </div>
        </div>
    `;
}

生成的代码明显不那么令人不愉快:它只是纯 HTML，用反引号 (`) 括起来，并在嵌入内容周围有 {花括号}。

遗憾的是，并非所有浏览器都支持此功能。值得注意的是，IE 不支持，但 Edge 13+ 以及 Chrome 41+、Firefox 34+ 和 Safari 9.1+ 支持。 (浏览器支持的完整列表可查看here。)

如果您必须向后兼容不支持模板文字的浏览器，那么真正清理代码的唯一机会就是使用转译器(例如 BabelJS )，它允许您编写使用模板文字等内容的现代 JS 代码，然后转译器会自动将代码转换为“旧”JS 代码，以适应无法处理新功能的浏览器。