Question

我一直在通过jQuery学习如何缩短内容。我想知道这个脚本是否可以用一种不那么冗长的方式表达出来？我不喜欢一切都在一条巨大的线上。

   items.push('<li id="' + key + '">' + ' (key: ' + key + ')(value: ' + val.value +         ')(type: ' + val.type + ') (range: ' + val.range + ') (clone: ' + val.clone + ') (archive: ' + val.archive + ') (access: ' + val.access + ')</li>')

Answer 1

假设对象始终具有正确的键/值：

str = '';
for (var item in val) {
   str += '(' + item + ': ' + val[item] + ')';
}
$("<li>").attr('id', key).text(' (key: ' + key + ')' + str);

http://jsfiddle.net/36Nyu/

Answer 2

如果items是另一个元素，你可以这样做。

var str;

for(var i in val)
    str += '('+ i +': '+ val[i] +')';

$('<li>', {
    id: key,
    text: str
}).appendTo(items);

Answer 3

你可以使用jquery tmpl或类似的东西：

var template = '(key: ' + key + ')(value: {{value}})(type: {{type}}) (range: {{range}}) (clone: {{clone}}) (archive: {{archive}}) (access: {{access}})';
$('<li />').attr('id', key).html($.tmpl(template, val));

或者，使用string.Format等价物：

String.prototype.format = function () {
    var args = arguments;
    return this.replace(/\{\{|\}\}|\{(\d+)\}/g, function (m, n) {
        /* Allow escaping of curly brackets with {{ or }} */
        if (m === '{{') { return '{'; } else if (m === '}}') { return '}'; }
        return typeof args[n] != 'undefined' ? args[n] : '{' + n + '}';
    });
};
var text = '(key: {0})(value: {1})(type: {2}) (range: {3}) (clone: {4}) (archive: {5}) (access: {6})'.format(key, val.type, val.range, val.clone, val.archive, val.access);

Answer 4

假设您在val对象中追加所有键/值对，那么执行此类操作将非常易于维护：

var liPrefix = '<li id="' + key + '">(key: ' + key + ')',
    liSuffix = '</li>',
    liData = '';

$.each(val, function(k, v) {
    liData += ' (' + k + ': ' + v + ')';
});

items.push(liPrefix + liData + liSuffix);

缩短方法。语法更好的做法

4 个答案:

See demo