Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Сортировка значений с помощью JavaScript

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)

Списки и таблицы часто являются лучшим способом отображения данных в Интернете; но вам не придется беспокоиться о том, чтобы сортировать эту информацию вручную. В сегодняшнем учебнике мы будем создавать плагин jQuery, который поместит всех ваших уток подряд с легкостью JavaScript!


Предисловие

Итак, как именно сортировка работает в JavaScript? Это не слишком сложно: любой объект массива имеет метод сортировки. Если вы не передадите ему никаких параметров, он преобразует объекты в массив в строки, сортирует их в псевдо-алфавитном порядке и возвращает назад. Обычно это выглядит ужасно; рассмотрите сортировку чисел 0 - 10 в алфавитном порядке. Вы получите следующее: [0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9]. К счастью, мы можем передать функцию методу сортировки. Эта функция должна принимать два параметра (два элемента для сравнения): затем она будет возвращать 0, если они равны, отрицательное число, если первый параметр имеет приоритет, или положительное число если второй параметр должен быть первым. Таким образом, цифры на самом деле - самая простая вещь для сортировки «вручную»:

Очевидно, что это вернет 0, если числа равны, отрицательное число, если a должно быть первым, и положительное число, если b должно быть первым.

Мы рассмотрим сортировку нескольких разных типов данных, в нескольких форматах; но все это будет намного полезнее, если мы обернем ее в плагин jQuery, так что начнем с создания этой оболочки!

Плагин-оболочка

You still can't crate a jQuery Plugin

Если вы не знакомы с написанием плагинов jQuery, посмотрите скринкаст «Джеффри Вэй» «Вы все еще не можете создать плагин jQuery?» Он определенно вам поможет чувствовать себя удобнее, работая с jQuery! (истинное признание: я бы никогда не написал плагин).

Мы создадим наш плагин, называемый datasort, таким образом: мы передадим ему массив элементов для сортировки; мы можем указать четыре параметра.

  • datatype (тип данных, которые вы сортируете)
  • sortElement (дочерний элемент, который вы хотите сортировать по желанию)
  • sortAttr (атрибут, который вы хотите сортировать, по желанию)
  • reverse (направление, в котором они должны сортироваться)

Таким образом, полностью модифицированный вызов к нашему плагину может выглядеть следующим образом:

Вот оболочка плагина:

Итак, вот как это будет работать: мы будем устанавливать все переменные в начале. Затем, если параметр datatype является строкой, мы найдем соответствующую функцию сортировки в объекте datatypes и отсортируем его; если параметр datatype является функцией, мы будем сортировать ей. Наконец, если для параметра reverse установлено значение true, мы изменим порядок отсортированных элементов (поскольку объекты jQuery не являются истинными массивами JavaScript, функция reverse не будет работать на них, поэтому мы можем использовать $.makeArray( ), чтобы превратить одно в другое, а затем, как только все будет в обратном порядке, мы снова обернем это в jQuery!).

Немного черновой работы

На самом низком уровне вы можете сортировать практически любые типы данных одним из двух способов: в алфавитном порядке и численно. Давайте создадим эти две функции как свойства вашего базового объекта.

Довольно просто, да? Просто нормализовать два значения, сравнить и вернуть. Сложная часть - синтаксический анализ данных, которые мы хотим отправить этим функциям; вот что мы будем делать сейчас. Однако есть еще одна вещь.

При сортировке элементов в массиве мы, возможно, не хотим сортировать просто по тексту самого элемента. Для этого используются параметры sortElement и sortAttr нашего плагина. Например, мы, скорее всего, захотим отсортировать строки таблицы на основе определенного столбца ячеек таблицы. В этом случае мы будем использовать $('table tr').datasort({sortElement: 'td.price'}). Или, возможно, мы хотим отсортировать список изображений по их атрибутам alt: $('ul li').datasort({sortElement: 'img', sortAttr: 'alt'}). Для всего этого нам нужно добавить еще одну функцию к нашему базовому объекту:

Это может показаться сложным, но на самом деле это не так. Мы просто создаем объект jQuery с каждым элементом; если параметр sortElement установлен, мы используем метод children() для получения нужных элементов. Затем, если setAttr установлен, мы получаем его значение; если нет, мы получаем текст элемента.  Мы установили все это для внутренней функции и возвращаем объект с двумя свойствами; эти свойства являются значениями, которые мы должны проанализировать и отправить в соответствующую функцию базовой сортировки.

Вероятно, это было похоже на большую подготовительную работу, но то, что мы действительно делали, - это абстрагирование как можно большего количества кода. Таким образом, будет намного меньше дублирования, потому что важные действия были объединены как функции.

Сортировка слов и чисел

Мы наконец здесь: интересная часть! Мы начнем с создания двух простых функций для нашего объекта datatypes. Они будут просто передавать значения в base.extract(), а затем передавать эти возвращаемые значения в соответствующий класс сортировки.

Наш алфавитный сортировщик должен быть очевиден. Сортировщик чисел делает немного больше: перед передачей извлеченных значений он вырезает знак доллара спереди. Я сохранил это регулярное выражение простым, но вы могли бы разобрать много разных форматов здесь, если бы хотели получить что-то более сложное. Давайте уже опробуем наш плагин; создайте базовую страницу html:

Я включил таблицу и два списка (и я кратко их описал). Обратите внимание на наши вызовы плагинов: мы используем тип данных по умолчанию для таблицы, но сортируем по ячейкам таблицы с классом last; попробуйте изменить это на «td.first». Затем мы сортируем списки численно и меняем один из них. Вот доказательство наших трудов:

Sorting Alphabetically and Numerically

Довольно приятно, но это были относительно простые ценности; что, если мы хотим иметь возможность сортировать несколько форматов для одного типа?

Сортировка дат

Существует множество способов записи дат, что делает их довольно сложными для анализа для сортировки. Однако мы можем охватить большинство из них следующим образом:

Итак, что мы здесь делаем? Во-первых, вот логика: если все даты отформатированы YYYYMMDD, они будут корректно сортироваться с численной сортировкой. Наш парсер может сортировать следующие форматы даты:

  • YYYY-MM-DD
  • YYYYMMDD
  • DD/MM/YYYY
  • month DD, YYYY

Сначала мы вырезаем тире, что делает YYYY-MM-DD готовыми к парсингу. Затем мы заменяем имя месяца или аббревиатуру на его числовое значение. Наконец, мы должны переместить числа для DD/MM/YYYY и month DD, YYYY. Вот что делают последние два выражения. Чтобы попробовать, вставьте этот список в наш HTML:

И вызовите это следующим образом:

Sorting Dates

Является ли это идеальным парсером даты? Ни в коем случае; мы не можем сортировать DD/MM/YY, потому что нет способа узнать, в каком веке это происходит. Кроме того, мы не можем отличить DD/MM/YY и MM/DD/YY, поэтому нам просто нужно выбрать один.

Сортировка времени

Сортировка значений времени должна быть одним из самых сложных заданий для сортировки: мы должны иметь возможность принимать 12-часовое время, 24-часовое время и значения с или без тегов AM/PM и секунды. Я думаю, что проще отсортировать время по алфавиту, хотя оно и содержит только числа. Почему? Рассмотрим эти две временные метки: 00:15:37 и 12:15. Первый должен быть первым, но если мы отсортируем их по номеру, они будут проанализированы как плавающие, и в итоге появятся 1537 и 1215. Теперь второе значение будет первым. Кроме того, при сортировке в алфавитном порядке нам не нужно вынимать двоеточия (parseFloat() уберет их). Итак, вот как это делается.

Давайте рассмотрим это по строкам.

Начнем с наших переменных: извлеченных значений и регулярного выражения для проверки метки PM.

Затем мы начнем цикл for, пройдя каждое из значений, которые мы сортируем; во-первых, мы разбиваем его на массив в двоеточиях. Мы создаем простой способ добраться до последних элементов массива: нашу «последнюю» переменную. Затем мы проверяем наше регулярное выражение PM на последнем элементе нашего массива; если он возвращает true, это значение имеет тег PM. Поэтому мы добавим 12 к первому элементу в нашем массиве, который будет значением часа; мы делаем это, потому что нам нужны все значения, которые будут отформатированы в формате 24 часов. (Обратите внимание, что для этого мы должны преобразовать его в число, добавить 12, а затем вернуть его обратно в строке). Наконец, мы снова используем регулярное выражение PM, чтобы удалить эту метку из последнего элемента массива.

В этом последнем фрагменте мы проверяем значение часа для двух условий: оно меньше 10? и имеет ли строка только один символ? Это важно, потому что значение типа 08 будет анализироваться как 8 и быть меньше 10; но мы пытаемся увидеть, нужно ли нам добавить ноль к началу. Если строка имеет только один символ, то мы добавляем нуль, поэтому 3 становится 03. Это будет приводить числа в порядок!

Перед присоединением к массиву мы удалим любые метки AM. Так что теперь это...

... можно сортировать с этим...

И готово! Вот плоды нашего труда:

Sorting Time

Дополнительные случайные значения

Мы создали наш плагин jQuery, чтобы пользователи могли передавать функции сортировки в качестве параметра типа данных. Это позволяет нам легко расширять плагин, хотя у нас нет доступа к базовому «классу» из вызова плагина. Мы можем легко написать функцию для сортировки псевдо-рейтингов:

Это использует простейшие регулярные выражения для сортировки списка:

Итог!

Теперь вы знаете: сортировка значений в JavaScript действительно не так сложна, как вы могли бы подумать. Вы можете представить, что это полезно для сортировки таблицы с чем-то вроде этого:

(Попробуйте заменить код jQuery для таблицы в первом примере этим!)

Конечно, мы могли бы улучшить этот плагин; например, мы могли бы проверить его атрибут rel atttribute для типа данных, если он не указан как параметр, и использовать по умолчанию alpha, если нет rel. Но это уже не относится к сортировке.

В общем, для сортировки с JavaScript мы выполняем следующие шаги:

  1. Определите различные форматы, которые вы хотите сортировать.
  2. Определите, в каком формате вы хотите сортировать.
  3. Сортируйте массив элементов с методом sort(), передавая функцию, которая преобразует два элемента в желаемый формат, прежде чем сравнивать их

Есть ли еще какой тип данных для добавления в наш плагин? Есть лучший способ сортировки? Давайте обсуждать это в комментариях!

  • Следуйте за нами в Твиттере или подпишитесь на Nettuts + RSS Feed для лучших учебных пособий по веб-разработке в Интернете.


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.