JavaScript развивается с огромной скоростью. Большая волна новых технологий накрывает камни громоздких задач, которые еще вчера казались неприступными и угрожающими.

В данном уроке мы приводим 10 полезных скриптов, которые помогут вам сохранить время при решении общих задач. Большинство из приведенных скриптов можно просто скопировать в свой проект, но лучше проделать аналитическую работу, чтобы адаптировать код наилучшим образом.

1. Максимальная высота или ширина в наборе элементов

Очень полезный скрипт для выравнивания высоты или ширины колонок.

Вариант для высоты:

Var getMaxHeight = function ($elms) { var maxHeight = 0; $elms.each(function () { // В некоторых случаях можно использовать outerHeight() var height = $(this).height(); if (height > maxHeight) { maxHeight = height; } }); return maxHeight; };

Использование:

$(elements).height(getMaxHeight($(elements)));

Чтобы использовать скрипт для ширины нужно заменить все включения height и Height на width и Width соответственно.

2. Эффективная проверка дат

Инструментарий JavaScript для работы с датами очень прост и не достаточен для форматирования дат. Хотя существует множество библиотек которые существенно облегчают обработку дат, часто нужно просто проверять дату в строке. Для такого случая отлично подходит следующий скрипт. Он позволяет проверить дату с любым разделителем и годом, указанным 4-мя цифрами.

Function isValidDate(value, userFormat) { // Используем формат по умолчанию, если ничего не указано userFormat = userFormat || "mm/dd/yyyy"; // Находим разделитель исключая символы месяца, дня и года (в английском варианте - m, d, y) var delimiter = /[^mdy]/.exec(userFormat); // Создаем массив из месяца, дня и года, // то есть мы знаем порядок формата var theFormat = userFormat.split(delimiter); // Создаем массив из даты пользователя var theDate = value.split(delimiter); function isDate(date, format) { var m, d, y, i = 0, len = format.length, f; for (i; i < len; i++) { f = format[i]; if (/m/.test(f)) m = date[i]; if (/d/.test(f)) d = date[i]; if (/y/.test(f)) y = date[i]; } return (m > 0 && m < 13 && y && y.length === 4 && d > 0 && // Проверяем правильность дня месяца d <= (new Date(y, m, 0)).getDate()); } return isDate(theDate, theFormat); }

Использование:

Следующая строка вернет false , так как в ноябре 30 дней:

[yt=JaAWdljhD5o]

Демонстрация использования кода

9. Уменьшаем размер текста

Данный скрипт похож на функцию excerpt в WordPress. Он обрезает текст по количеству слов и добавляет специальный элемент для указания сокращения текста. Работает с текстом, в котором имеются другие встроенные теги (например, такие как strong или em или ссылки).

Function excerpt(str, nwords) { var words = str.split(" "); words.splice(nwords, words.length-1); return words.join(" ") + (words.length !== str.split(" ").length ? "…" : ""); }

Демонстрация использования кода

10. Создаем динамическое меню

Создаем любое меню динамически. Простой скрипт с большим потенциалом.

Function makeMenu(items, tags) { tags = tags || ["ul", "li"]; // Теги по умолчанию var parent = tags; var child = tags; var item, value = ""; for (var i = 0, l = items.length; i < l; i++) { item = items[i]; // Разделяем пункты и значения, если они имеются if (/:/.test(item)) { item = items[i].split(":"); value = items[i].split(":"); } // Оборачиваем пункт в тег items[i] = "<"+ child +" "+ (value && "value=""+value+""") +">"+ // Добавляем значение, если оно есть item +""; } return "<"+ parent +">"+ items.join("") +""; }

Использование:

// Выпадающий список месяцев makeMenu(["January:JAN", "February:FEB", "March:MAR"], // пункт:значение ["select", "option"]); // Список бакалеи makeMenu(["Carrots", "Lettuce", "Tomatos", "Milk"], ["ol", "li"]);