这个 jquery 脚本的内部工作原理

Question

我有一个 Jquery 脚本，它依赖于此脚本 Sort.js 。任何人都可以吗？这是如何工作的

jQuery.fn.sort = (function(){

    var sort = [].sort;

    return function(comparator, getSortable) {

        getSortable = getSortable || function(){return this;};

        var placements = this.map(function(){

              var sortElement = getSortable.call(this),               
                parentNode = sortElement.parentNode,                      
                // Since the element itself will change position, we have
                // to have some way of storing it's original position in
                // the DOM. The easiest way is to have a 'flag' node:
                nextSibling = parentNode.insertBefore(
                    document.createTextNode(''),
                    sortElement.nextSibling
                );

            return function() {

                if (parentNode === this) {
                    throw new Error(
                        "You can't sort elements if any one is a descendant of another."
                    );
                }

                // Insert before flag:
                parentNode.insertBefore(this, nextSibling);
                // Remove flag:
                parentNode.removeChild(nextSibling);

            };

        });

        return sort.call(this, comparator).each(function(i){
            placements[i].call(getSortable.call(this));
        });

    };

})();

我从这个链接 http:// /qd9.co.uk/projects/jQuery-Plugins/sort/demo.html

Answer 1

它本质上需要三个输入：

• this 是您调用它的 jQuery 对象，例如，如果它是 $("#my-id").sort() 那么 < code>this 将是 $("#my-id")
• comparator 是与 JavaScript 的原生 Array.prototype.sort
• getSortable< /code> 是一个可选的转换函数，在实际排序之前应用于已排序的 DOM 元素。它的行为对我来说仍然有点令人困惑；看来只有返回另一个 DOM 元素才有效？

它通过该行获取 Array.prototype.sort 方法，

var sort = [].sort;

然后将其与比较器函数一起使用来获取 jQuery 对象的排序版本，该版本是“类似数组” " 因为它具有属性 0、1、2、... 和 length 属性：

sort.call(this, comparator)

然后循环通过结果，在 DOM 元素本身（默认）或给定 DOM 元素时返回的任何 getSortable 上调用 placements[i]：

sort.call(this, comparator).each(function(i){
        placements[i].call(getSortable.call(this));
    });

所以真正的魔力发生在创建过程中placements 数组的。经过一番思考，我们发现 placements[i] 是一个函数，它将其输入插入到 this 的第 i 元素所在的位置是，在排序发生之前。因此，使用第 isorted 元素作为输入来调用 placement[i] 会导致放置第 i >已排序元素位于第i“槽”中，即第i未排序元素所在的位置。在 placements 数组创建中使用“标志”节点的整个过程是这样的，即使在您开始用新的排序元素替换它们之后，它也可以跟踪原始“槽”的位置。

另外值得注意的是：它（在我看来是不必要的）将自身包装在一个立即执行的匿名函数中，该函数本身返回一个采用 comparator 和 getSortable 参数的函数。因此，分配给 jQuery.fn.sort 的实际结果是二参数函数。