javascript - 提高长 javascript 字符串的可读性

Question

格式化以下内容的更好方法是什么，目前在一个运行线上：

$(this).siblings().last().append('<span class="territory"> ' + territory + ' <a href="#;" class="remove-territory delete" data-territory_code="' + territory + '" data-task_id="' + task_id + '">x</a>,</span>')

Answer 1

我个人更喜欢使用 jQuery 来创建标签和设置属性。

$(this).siblings().last().append($('<span>')
                                  .addClass('territory')
                                  .append(territory)
                                  .append($('<a>')
                                           .attr({ href: '#;', data-territory_code: territory, data-task_id: task_id })
                                           .addClass('remove-territory delete')
                                           .html('x'))
                                  .append(','));           

Answer 2

我更喜欢使用数组连接，因为它更容易阅读。

$(this)
    .siblings()
        .last()
            .append([
                '<span class="territory"> ',
                territory,
                ' <a href="#;" class="remove-territory delete" data-territory_code="',
                territory,
                '" data-task_id="',
                task_id,
                '">x</a>,</span>'
            ].join(''))

或者通过使用 jQuery 创建元素：

var $span = $('<span>')
                .addClass('territory')
                .text(' ' + territory),
    $link = $('<a>')
                .attr({
                    'href': '#',
                    'data-territory_code': territory,
                    'data-task_id': task_id
                })
                .addClass('remove-territory delete')
                .text('x');

$span.append($link).append(',');

$(this)
    .siblings()
        .last()
            .append($span);