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

Question

我有一个似乎不是最佳的代码。我想将 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

Answer 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;
    });
}

Answer 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 的查找次数从 3 次减少到 1 次。

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

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");
}

就我个人而言，我发现这比前面的示例更难阅读。