jquery - 这个 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() 那么 this 将是 $("#my-id")
• comparator 是与JavaScript's native Array.prototype.sort 接受的相同类型的比较函数。
• getSortable 是一个可选的转换函数，在实际排序之前应用于已排序的 DOM 元素。它的行为对我来说仍然有点令人困惑；看来只有返回另一个 DOM 元素才有效？

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

var sort = [].sort;

然后将其与 comparator 函数一起使用来获取 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 的实际结果是双参数函数。