Question

我有一个Jquery脚本，它依赖于这个Script 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，{{ 1}}，...和2属性：

length

然后遍历结果，在DOM元素本身（默认）上调用sort.call(this, comparator)或在给定DOM元素时返回placements[i]返回：

getSortable

因此真正的魔法发生在sort.call(this, comparator).each(function(i){ placements[i].call(getSortable.call(this)); });数组的创建中。经过一番思考后，我们发现placements是一个函数，它将其输入插入到placements[i]的{{1}}元素所在的同一位置，在排序之前发生。因此，使用i 排序元素作为输入调用this会导致将placement[i] 排序元素放入{{1 }“slot”，即i 未排序元素所在的位置。 i数组创建中的“标志”节点的整个业务是这样的，即使在您开始用新的排序元素替换它们之后，它也可以跟踪原始“槽”的位置。

另外值得注意的是：它（相当不必要的IMO）将自己包装在一个立即执行的匿名函数中，该函数本身返回一个带有i和i参数的函数。因此，分配给placements的实际结果是双参数函数。

这个jquery脚本的内部工作

1 个答案: