如何改善或减少此javascript的冗余?

时间:2013-01-17 01:37:01

标签: javascript jquery performance

我正在尝试连接表单中某些输入的字符串,并使用该字符串填充另一个输入。我已将下面的脚本包含在内,并链接到js小提琴。

我认为each()中条件内的代码太冗余了,但我似乎无法让它以任何其他方式工作。任何建议都表示赞赏。

var $namers = $(".namer");
$namers.on('change', function () {
    var length = $namers.length - 1;
    var nameString = "";
    $namers.each(function (i) {
        var delimiter = "";
        if ($(this).find(":selected").attr('value')) {
            if (i < length) delimiter = ": ";
            thisVal = $(this).find(":selected").text();
            nameString = nameString + thisVal + delimiter;
        } else if ($(this).is("input") && $(this).val()) {
            if (i < length && $(this).hasClass("from")) delimiter = "-";
            thisVal = $(this).val();
            nameString = nameString + thisVal + delimiter;
        }
    });
    $("#summary").val(nameString);
});

这是我原来的: http://jsfiddle.net/3HsQW/

第一次尝试使用阵列来改善事物,我不确定它会好得多。 http://jsfiddle.net/3HsQW/1/

3 个答案:

答案 0 :(得分:0)

我还没有完全测试过,但是这样的事情也应该有效:

var $namers = $('.namer');

$namers.on('change', function () {
    var nameString = '';

    $namers.each(function(i) {
        var $this = $(this);
        var $selected = $this.find(':selected');

        if ($selected.attr('value')) {
            nameString += $selected.val() + ': ';
        } else if ($this.is('input') && $this.val()) {
            nameString += $this.val() + $this.hasClass('from') ? '-' : '';
        }
    });

    $('#summary').val(nameString);
});

i < length条件始终为false,因此您可以删除该代码。

答案 1 :(得分:0)

这是jquery阻碍的极少数情况之一。我建议像:

$("option").each( function() { this.value = $(this).text(); } );
$namers = $(".namer");
$names.on('change', function () {
    var length = $namers.length - 1;
    var nameString = "";
    $namers.each(function (i) {
        nameString += this.value;
        if (this.tagName == 'SELECT') nameString += ':';
        if (this.className == 'from') nameString += '-';
    });
    $("#summary").val(nameString);
});

答案 2 :(得分:0)

我尝试了其他两个答案,但都没有奏效。我还了解到我应该使用http://codereview.stackexchange.com

我最终决定了这一点(虽然我对这是否有助于其他人有所保留):

var $namers = $(".namer");
$namers.on('change', function () {
    var length = $namers.length - 1;
    var nameString = "";
    var names = [];
    $namers.each(function (i) {
        var delimiter = "";
        if (i < length) delimiter = ": ";
        if ($(this).find(":selected").attr('value')) {
            names[i] = $(this).find(":selected").text() + delimiter;
        } else if ($(this).is("input") && $(this).val()) {
            if ($(this).hasClass("from")) delimiter = "-";
            names[i] = $(this).val() + delimiter;
        }
        if (names[i]) nameString += names[i];
    });
    $("#summary").val(nameString);
});