如何优化和减少此函数中对 jQuery 的调用？答案

【问题标题】：How can I optimize and reduce the calls to jQuery in this function?如何优化和减少此函数中对 jQuery 的调用？
【发布时间】：2011-11-30 04:34:16
【问题描述】：

我的代码似乎不是最优的。我想将 Reorder 函数的内容减少为单个 jquery 函数。它可以做得更简单，或者这是一个好方法？

HTML：

<div id="sortable">
     <div class="i">
        @<input type="text" name="first" value="" />
     </div>
    <div class="i">
        @<input type="text" name="last" value="" />
    </div>
</div>
<a href="#" id="add_input">Add</a>

JS：

$(function(){
    $("#sortable").sortable({
        containment: "document",
        axis: "y",
        update: Reorder,
    });
    function Reorder()
    {        
        $("#sortable input").attr("name", function(i){
            //if(i==0){return "first";}
            //else{return "waypoint" + (i + 1); }
            return "middle" + i;
        });
        $("#sortable input:first").attr("name", "first");
        $("#sortable input:last").attr("name", "last");
    }
    $("#add_input").click(function () {
        var inputIndex = $("#sortable > .i").length;

        $("#sortable input:last").attr("name", function(){
            return "middle" + (inputIndex - 1);
        });

        if(inputIndex>1){
            var html = '<div class="i">';
            html += '@<input type="text" name="last" value="" /> ';
        }

        $("#sortable").append(html); 
        return false;
    });
});

演示：jsfiddle

【问题讨论】：

我认为你需要重新编辑你问题的顶部 - 它很难阅读......只是出于兴趣为什么你必须使用 name 属性并将 first / last 作为values - 为什么 jQuery 选择器 :first / :last 不适合你？哦，在你的标题上使用拼写检查器......
可以，但也许可以做得更好，或者有更好的方法。我需要稍后将中间元素作为位置数组。
感谢编辑，现在这篇文章完全表达了我的意思。
在javascript中使用lowerCamelCase命名也是一种编码约定。所以function Reorder() 将被命名为function reorder()。

标签： javascript jquery html optimization

【解决方案1】：

这里有一点优化的版本：

$(function(){

    var $sortable = $('#sortable');

     $sortable.sortable({
        containment: "document",
        axis: "y",
        update: Reorder,
    });

    function Reorder()
    {        
        var $inputs = $sortable.find('input');
        $inputs.each(function(i, elm) {
            this.name = 'middle' + i;
        });
        $inputs
            .filter(':first').attr('name', 'first')
            .end()
            .filter(':last').attr('name', 'last');
    }

    $("#add_input").click(function () {

        var inputIndex =  $sortable.children(".i").length;

        $sortable.find('input:last').attr('name', 'middle' + (inputIndex-1));

        if( inputIndex > 1)
        {
            $('<div class="i">@<input type="text" name="last" value="" /></div>')
                .appendTo($sortable);
        }

        return false;
    });
});

缓存您的 jquery 对象以避免重新查询同一件事：$('#sortable')
不需要使用.attr(string, function)来简单地连接一个字符串，使用.attr('name', 'middle' + (inputIndex-1))
jquery 是关于链接，滥用它：$inputs.filter().attr().end().filter().attr()

我制作了这个fiddle 来说明。

事件更优化：o)

你也可以这样写你的 Reorder() 函数。循环然后再次重新过滤似乎有点“愚蠢”。在循环中做所有事情：

function Reorder()
{        
    var $inputs = $sortable.find('input');

    $inputs.each(function(i, elm) {
        this.name = i == 0
            ? 'first'
            : i == ($inputs.length-1)
                ? 'last'
                : 'middle' + i;
    });
}

【讨论】：

非常感谢您的高度优化！ PS 现在我必须在我的其他函数中添加一个 jquery 对象缓存。

【解决方案2】：

您现有的重新排序功能没有太大问题。你可以像这样稍微改进一下：

function Reorder() {
    var sortableInput = $("#sortable input");
    sortableInput.attr("name", function(i) {
        //if(i==0){return "first";}
        //else{return "waypoint" + (i + 1); }
        return "middle" + i;
    });
    sortableInput.filter(":first").attr("name", "first");
    sortableInput.filter(":last").attr("name", "last");
}

这将#sortable input 的查找次数从三个减少到一个。

您也可以省略变量声明，将它们全部串在一起，如下所示：

function Reorder() {
    $("#sortable input").attr("name", function(i) {
        //if(i==0){return "first";}
        //else{return "waypoint" + (i + 1); }
        return "middle" + i;
    }).filter(":first").attr("name", "first").end().filter(":last").attr("name", "last");
}

就我个人而言，我觉得这比前面的例子更难阅读。

【讨论】：