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

【问题标题】：Shorten a method. Syntax better practices缩短方法。语法更好的做法
【发布时间】：2012-11-28 23:19:03
【问题描述】：

我一直在通过 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>')

【问题讨论】：

给你 -> FIDDLE -> 最优秀的解决方案？
您可以在一个变量和 items.push(myBigString); 中的多个 lins 上构建字符串

标签： javascript jquery syntax coding-style

【解决方案1】：

假设对象总是有正确的键/值：

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

http://jsfiddle.net/36Nyu/

【讨论】：

这假设 val 只拥有这些属性。您还应该使用 val.hasOwnProperty(i);
@Kurt 是的，必须做出假设；为什么需要hasOwnProperty？
所以它不查找原型链，最好更明确一点，以防在某处有讨厌的 Object.prototype.customFunc ;)
@ExplosionPills：你根本不需要做任何假设，因为你有hasOwnProperty。
@LightnessRacesinOrbit 我的意思是假设所有必需的值都已定义（例如，range 值没有丢失）。

【解决方案2】：

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

var str;

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

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

【讨论】：

这假设 val 只拥有这些属性。您还应该使用 val.hasOwnProperty(i);

【解决方案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);

【讨论】：

【解决方案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);

See demo

【讨论】：