«Top 10 custom JavaScript functions of all time» – под таким названием бестселлер Дастина Диаза, опубликованный 29 ноября 2005, обошёл мир. И сейчас вот это «...на все времена» гордо реет в топе Гугла. О, времена! О, нравы! Имеется в виду, конечно, не Дастин Диаз, а те, кто бесконечно перетаскивает с сайта на сайт чужой текст с чужим переводом. Гораздо интереснее ведь самому составить список топ-10. И, наверняка, у многих программистов списки будут сильно отличаться друг от друга. А вот те места, которые бы у всех совпали, и стали бы, пусть не топ-10, но хотя бы топ-5, и если не на все времена, то хотя бы на текущую пятилетку.
Итак, как сказано в первоисточнике, не отвлекаемся – и вот они, эти «великие» функции.
4-5 места в нашем хит-параде разделили функции чтения-записи куки и функции валидации формы. Да. Если бы ещё такие функции существовали в более-менее устойчивой, однообразной записи. Ну, приблизительно они могли бы выглядеть так.
Здесь во всех изученных нами вариантах есть одно общее место – вычисление даты действия куки, она занимает в нашем варианте 3 строки. Первые две строки мы добавили для запуска функции без передачи параметров, на случай если приходится динамически, в процессе исполнения Javascript, назначать элементам свойство типа el.onchange=setCookie;. А последняя строка – собственно запись куки.
Тут ни один из встреченных вариантов нам не понравился, так как сильно уж сложно всё делать предлагается. А кажется, эта функция должна быть проще функции записи:
После написания статьи мы обнаружили очень похожую функцию на torrents.ru. И даже благодаря ей нашли (и исправили) у себя ошибку: regexp, вычисляющий значение куки, должен начинаться не с "name+", а с какого-то ограничителя (начало строки или точка с запятой); иначе значение переменной name может совпасть с частью другого слова.
Мы уже писали о разных способах валидации полей HTML-формы. Поскольку все они более-менее связаны с содержанием поля, мы предлагали прямо рядом с полем выводить сообщения для пользователя (в случае каких-то нарушений). Это, так сказать, «нежёсткая модерация». Но в конце пользователь всё равно обязательно щёлкнет по кнопке «Отправить сообщение», и в этот момент могут оказаться незаполненными какие-то обязательные поля. Тогда можно проверить ВСЕ обязательные поля формы на простой предмет – есть там текст или нет, это несложно:
Функция проверяет все поля с атрибутом class="need". Если в поле меньше двух букв (это можно изменить), выдаётся сообщение об ошибке. Три опциональные строки служат для «украшения», для дополнительного удобства пользователя (тут тоже возможны варианты). Присоединяется функция ко всем формам, которые есть на странице, следующим кодом (должен быть в конце страницы или внутри функции window.onload):
6-7 места мы бы отдали функциям обработки строк: аналогу trim и strip_tags PHP. Сюда же можно до кучи добавить и стоящие у Дастина Диаза на 5-6 месте toggle() и insertAfter(). Если убрать оттуда ошибки (или то, что нам кажется ошибками).
Их, собственно, как-то и неловко называть функциями. Всего-то по одной-две строки:
Результат последней с раскомментированной строкой «для развлечения» будет выглядеть лучше, чем innerText ИЕ.
Последняя строка функции будет правильно работать, только если «видимый» способ отображения не был назначен элементу в какой-то другой функции Javascript (иначе нужно будет явно назначать el.style.display равным 'block', 'inline' или другому способу отображения). В функцию insertAfter() просились, на первый взгляд, очевидные исправления на тему «а что будет, если referenceNode.nextSibling не существует? Ну, если элемент referenceNode оказался самым последним в списке детей?». Функция, однако, каким-то чудом работает без ошибок, даже если убрать эти исправления:
Мы добавили лишь referenceNode && – и теперь функция вставляет node в конец списка детей parent, даже если никаких детей у parent вовсе нет.
2-3 места хитпарада пользовательских функций мы отдаём более сложным конструкциям, чем одинокая функция.
Этот скрипт был описан нами ранее в статье javascript. Он позволяет получить список свойств DOM для данного элемента с помощью Ctrl+Alt+Click (для этого элемент script с src="dom-javascript.js" следует добавить в конец страницы). Можно также получить списки свойств для объекта document – Ctrl+Alt+d, для объекта body – Ctrl+Alt+b и для объекта window – Ctrl+Alt+w. После удаления из Firefox'а встроенного ДОМ-инспектора (который и при жизни-то был туповатым) dom-javascript.js стал для нас практически незаменимым инструментом. Тем более, что он точно так же, как и в FF, работает в Опере, ИЕ, Гугл Хроме, Сафари и проч.
Вторая конструкция – замена громоздкого Ajax'а, функция асинхронного http-запроса через атрибут src элемента script.
Если функция должна обрабатывать разнородные запросы, переменную completed можно сделать массивом и отслеживать статус каждого отдельного потока запросов. В предложенном варианте функция рассчитана на обработку однотипных процессов, например, «живого» поиска по базе данных. В этом случае src может быть, например, таким: find.php?slovo=javascript. Серверный скрипт find.php, получив запрос, посылает ряд команд DOM-javascript на страницу: отображает найденные в базе данных результаты и, в конце, пишет completed=true;\n. Если «живой поиск», как чаще всего бывает, запускается по событию onkeyup элемента input, переменная completed будет ограничивать число обращений к серверу: пока серверный скрипт не отработает, completed будет равно false, функция scriptRequest не будет посылать новые запросы на сервер (и пользователь может сколько угодно молотить по полю поиска).
На первом месте хитпарада у нас ни фига не прототип-доллар, от которого буржуи паром писают, и который «принимает объекты, и даже строки» и возвращает их же, не обрабатывая ошибки. Приоритет изобретения такой «функции» переливания из пустого в порожнее принадлежит вовсе не буржуям, а Александру Ивановичу Корейко, открывшему в 1923 году промартель «Реванш» (две бочки, соединённые тонкой клистирной трубкой, «по которой, деловито журча, бежала жидкость»).
Нам бы что-нибудь попроще и пополезнее. И мы выбрали в королевы функцию исправления небрежностей серверного движка. Точнее, одной небрежности. Интернет прямо-таки наводнён сайтами, у которых на главной странице стоят ссылки «на себя»: в виде логотипа, или просто в виде пункта меню «Главная», или ещё в какой-либо форме, – но во всех случаях совершенно лишние, нарушающие достаточно очевидный принцип «не вводить пользователя в заблуждение» и не гонять его по кругу.
Вот он, наш советский доллар (запускать в конце HTML-кода страницы или по window.onload):
Ну, и для круглого счёта на 8-9 место можно поместить функции (точнее, системы) сортировки таблиц и фильтрации элементов списка.
Система сортировки HTML-таблиц («без перезагрузки страницы», как любят уточнять некоторые специалисты) описана нами в статье DHTML: сортировка таблиц. Система предельно проста для подключения: нужно назначить сортируемым таблицам <table class='sortable' ... и присоединить в конец кода страницы <script src='tabsort.js' .... Система не сложна для понимания: хранится в файле tabsort.js и занимает 100 с небольшим строк (с комментариями).
Идеология «живого» отбора элементов из видимого списка (вместо использования элемента select) была изложена нами в статье Пятый элемент. Вот учебный пример работы со списком. В Javascript-коде (файл listfilter.js) есть комментарии. Логика работы скрипта достаточно проста:
Использовать следующим образом:
И всё равно счёт не получается круглым. Тогда на 10-е место поставим ещё одну полезную функцию (она помогает сэкономить размер страницы) – дублирования элементов с трансформацией. Мы используем пока только одну её разновидность – из текстов ссылок сформировать элемент формы select.
Функция требуется в достаточно очевидном и частотном контексте: на странице справочника или каталога продукции почти всегда есть рубрикатор в виде списка ссылок, и на этой же странице вполне может быть (в форме добавления информации) элемент select, содержимое которого практически полностью совпадает с рубрикатором. В примере работы со списком (list.htm) внизу страницы есть элемент select, который как раз и сгенерирован данной функцией:
Функция list2select() принимает два параметра: список элементов (ссылок), из которого формируется новый элемент, и имя нового элемента select, в который будут переданы ссылки в качестве вложенных элементов option. Значение value для каждого элемента option извлекается из атрибута href каждой ссылки – это несколько цифр в конце (регулярное выражение /(\d+)$/). Так, разумеется, бывает нужно не всегда, в других случаях value придётся вычислять по-другому. И ещё одна «условность»: функция list2select() присоединяет сгенерированный элемент select к первой встреченной в документе форме (это, разумеется, тоже можно менять в строке document.forms[0].appendChild(el)).
Ну, и заодно добавим к десятому пункту совершенно необходимые пользовательские функции, для которых в Javascript нет встроенных аналогов – функции преобразования шестнадцатеричных чисел в десятичные и обратно. Масса программистов использует для этой цели какие-то чудовищные конструкции (например, с поиском остатка от деления на 16), функции же для данных преобразований могут быть предельно просты:
Такая простота, конечно, предполагает подачу правильных параметров на входе: в функцию hex2dec – обязательно String, а в функцию dec2hex – Number (только не перепутайте!). К этим двум преобразователям систем счисления непременно требуется ещё одна функция, которая вообще-то является одной из основных причин для первых двух (а не так, как обычно все делают: придумают «красивую» функцию Javascript, а потом сидят гадают, куда бы её присобачить). У нас цепочка, приведшая к потребности в dec-hex, была такая. Сидишь, бывало, и ковыряешь в башке: какой виртуальный код подставить в функцию keyup для отлавливания нажатия клавиши, допустим, w? Ну, посмотришь код в «Брэде», там – 77. Что это, блин, такое: десятичное или шестнадцатеричное? Ну, попреобразуешь туда-сюда, всё равно не работает. Вот тут-то и всплывает потребность просто щёлкнуть по нужной клавише – и увидеть её виртуальный код!
В топ-10 «на все времена», кстати, на 10-м месте стоит функция добавления события (addEvent). Сложно представить себе область её применения. То есть ту ситуацию, когда нельзя использовать простое выражение вида element.onmouseover=func1;. Фишка функции addEvent в том, что она не удаляет другие функции, связывающие данный элемент с тем же событием. То есть, например, при mouseover над заголовком текст становится красным. Но вдруг, в какой-то нестандартной ситуации, надо (при наведении на заголовок мыши) ешё и жёлтым фон сделать. Тогда, конечно, нельзя использовать простое выражение element.onmouseover=func2; (так как первая функция func1 будет отключена от данного элемента).
Опять же, если оформление заголовка при mouseover меняется от ситуации, ну поставь ты лишний if в единую функцию, мать твою. Если же принципиально не хочешь знать о том, существует ли уже функция обработки данного события, тогда уж будь последовательным и придумай заодно функцию удаления событий (removeEvent). А то, при возвращении ситуации к стандарту, – как с помощью этой извращённой буржуйской методики отменить пожелтение фона при mouseover, но оставить «стандартное» покраснение букв?
Вот система добавления новых действий к функции window.onload, приведённая в «классическом» Javascript-top-10, может действительно оказаться полезной. Когда, например, мы подсоединяем всё новые и новые элементы script к коду страницы, и в каждом скрипте может потребоваться обработка страницы по событию load. В изначальном top-10 сказано, что функция написана Саймоном Уиллисоном. Это единственная функция из списка Дастина Диаза, которую, пожалуй, мы готовы использовать «некритично» и «дословно». Вот её текст:
Неплохо:) http://portalfiles.ru/download.php?list.92