Внутренняя работа этого скрипта jquery - PullRequest
2 голосов
/ 18 мая 2011

У меня есть скрипт 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

1 Ответ

3 голосов
/ 18 мая 2011

Требуется, по сути, три входа:

  • this - это объект jQuery, к которому вы его вызываете, например, если бы это было $("#my-id").sort(), то this было бы $("#my-id")
  • comparator - это функция сравнения того же типа, что и нативная версия JavaScript Array.prototype.sort
  • getSortable - это дополнительная функция преобразования, которая применяется к отсортированным элементам DOM до их фактической сортировки. Его поведение немного сбивает меня с толку; кажется, это будет работать, только если он вернет другой элемент DOM?

Он получает метод Array.prototype.sort по линии

var sort = [].sort;

Затем он использует ее вместе с функцией comparator, чтобы получить отсортированную версию объекта jQuery, который «похож на массив», поскольку у него есть свойства 0, 1, 2, ... и length свойство:

sort.call(this, comparator)

Затем он перебирает результат, вызывая placements[i] либо для самого элемента DOM (по умолчанию), либо для того, что getSortable возвращает при получении элемента DOM:

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

Итак, настоящее волшебство происходит при создании массива placements. Подумав немного, мы видим, что placements[i] - это функция, которая вставляет свои данные в то же место, где был i-й элемент this, до сортировки . Таким образом, вызов placement[i] с использованием элемента i th sorted в качестве входных данных приводит к размещению элемента i th sorted в i th "slot", т.е. где i th несортированный элемент был. Все дело с узлами «флага» внутри создания массива placements заключается в том, что он может отслеживать положение исходных «слотов» даже после того, как вы начнете заменять их новыми отсортированными элементами.

Также стоит отметить: он (скорее всего, IMO) оборачивается в немедленно выполняющуюся анонимную функцию, которая сама возвращает функцию, принимающую параметры comparator и getSortable. Таким образом, фактический результат, присвоенный jQuery.fn.sort, является двухпараметрической функцией.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...