10 лучших функций

Перевод популярного поста "Top 10 custom JavaScript functions of all time" от Dustin Diaz. Распространяется по лицензии Creative Commons, обязательно ставьте ссылку на оригинал и указывайте автора английского текста

Если бы существовал универсальный common.js объединяющий все JavaScript'ы на свете , вы бы отыскали в нём эти десять (плюс одна в подарок) функций. Это был бы швейцарский боевой нож, без которого ни один разработчик не выходил бы на дело. Эти функции, конечно же, прошли многократные испытания и доказана их полезность и то что они помогают всем, кто использовал их. Итак, не отвлекаемся, вот десять, я верю, самых великих пользовательских функций JavaScript употребляемых в наши дни.

Перед тем как продолжить читать статью, предлагаю вам использовать для неё альтернативный стиль с удалёнными пробелами и большими отступами. Это можно сделать, выбрав <Clean with Whitespace> в панели управления. (От переводчика: это замечание относиться к оригиналу статьи)

10) addEvent()

Конечно же, скрепка для прикрепления события! Неважно, какую версию вы используете, кем и когда она написана, эта функция делает то, что мы сказали. И конечно как вам могло быть известно, я соединил свою последнюю, вполне удобную версию addEvent () с небольшой помощью от победителя в споре и Марка Ваббена (Mark Wubben) плюс несколько незначительных синтаксических правок. Но просто, чтобы быть справедливым к Скоту Эндрю (Scott Andrew), вот оригинал, с которого всё началось.

Оригинальная функция addEvent() от Скота Эндрю

function addEvent(elm, evType, fn, useCapture) { if (elm.addEventListener) { elm.addEventListener(evType, fn, useCapture); return true; } else if (elm.attachEvent) { var r = elm.attachEvent('on' + evType, fn); return r; } else { elm['on' + evType] = fn; } }

9) addLoadEvent()

Изначально написанная Саймоном Виллисоном (Simon Willison) она была замечательно освоенна всеми остальными, как простой способ добавить события, запускающиеся после загрузки страницы. Функция, разумеется, прикрепляет все ваши события к обработчику события onload, которого некоторые всё ещё могут увидеть, если есть такая необходимость, и, тем не менее, функция делает ровно то, что от неё ожидается, и делает это хорошо.

addLoadEvent() от Саймона Виллисона

function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } }

Конечно, другой способ - это просто назначить множество перехватчиков событий (listeners) к окну (window) используя функцию addEvent() уже описанную в 10 пункте.

Назначение нескольких событий load к объекту window

addEvent(window,'load',func1,false); addEvent(window,'load',func2,false); addEvent(window,'load',func3,false);

8) getElementsByClass()

Представляет собой плод коллективного творчества. Несколько разработчиков реализовали свои собственные версии, и не было доказано, что какая-нибудь одна версия лучше, чем другая. Как вы могли ожидать, моя скромная особа попробовала превзойти всех остальных. Функция getElementsByClass порождена необходимостью веб-программистов изящно и быстро выбирать элементы по имени класса, и к удивлению разработчиков, она не является настоящим методом DOM, как они могли бы подумать: в конце концов, есть getElementById, getElementsByName(), getElementsByTagName, куда, к чертям, делась getElementsByClass??? Вот она, во всей своей славе:

getElementsByClass от Дастина Диаза (Dustin Diaz)

function getElementsByClass(searchClass,node,tag) { var classElements = new Array(); if ( node == null ) node = document; if ( tag == null ) tag = '*'; var els = node.getElementsByTagName(tag); var elsLen = els.length; var pattern = new RegExp(\"(^|\\s)\"+searchClass+\"(\\s|$)\"); for (i = 0, j = 0; i < elsLen; i++) { if ( pattern.test(els[i].className) ) { classElements[j] = els[i]; j++; } } return classElements; }

Просто напишите в начале функции имя класса, потом, если будет желание, второй и третий аргументы и свершится чудо!

7) cssQuery()

Функция, первоначально написанная Дином Эдвардсом для того, чтобы делать выборку из DOM по свойствам CSS; поддерживает множество селекторов. Однако со всей честностью скажу, эта функция больше походит на мини-библиотеку и хоть размером не очень-то мала, но она, всё же, обалденная функция. Из-за её длины (и CC лицензии) я не могу поместить её на этом сайте. Полную документацию можно найти на справочных и загрузочных страницах myCssQuery.

6) toggle()

Если быть полностью честным, вариантов этой функции существует более чем достаточно. По сути, история 'переключалки' происходит от скрытия\показа элемента как реакции на событие. Чтобы упростить дело, я тоже написал одну такую функцию. Я не имею в виду, что эта функция считается наилучшей функцией-'переключалкой', но в ней заложены основы показа и скрытия элемента.

toggle() слова народные

function toggle(obj) { var el = document.getElementById(obj); if ( el.style.display != 'none' ) { el.style.display = 'none'; } else { el.style.display = ''; } }

5) insertAfter()

Насколько я помню, вроде бы у Джереми Кейта (Jeremy Keith) всплыла такая идея, хотя можно было бы подумать и про эту функцию, что она является методом ядра DOM. Но, как и с getElementsByClass, это не так. Вместо того чтобы выписать функцию прямо из книги, я лучше предоставлю это вам: приобретите эту книжку сами. Взамен я списал один общедоступный простой метод:

insertAfter() всеобщее достояние

function insertAfter(parent, node, referenceNode) { parent.insertBefore(node, referenceNode.nextSibling); }

4) inArray()

Очень грустно, что и inArray не входит в ядро DOM. Но! Так специально сделано, чтобы существовали такие забавные статьи, как наша! Эта функция, однако, не совсем функция. Это прототип, который расширяет заданный в DOM объект Array. Помню, однажды я подумал про себя: <Несомненно, раз я могу сделать так на PHP, это должно быть в JavaScript>. Ну да, расширение inArray делает свою работу точно так, как вы и думали, если вы, конечно, PHP-программист. Вот версия с сайта EmbiMEDIA

inArray, прототип объекта Array от EmbiMedia

Array.prototype.inArray = function (value) { var i; for (i=0; i < this.length; i++) { if (this[i] === value) { return true; } } return false; };

3, 2, и 1) getCookie(), setCookie(), deleteCookie()

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

getCookie(), setCookie(), deleteCookie() - всеобщее достояние

function getCookie( name ) { var start = document.cookie.indexOf( name + '=' ); var len = start + name.length + 1; if ( ( !start ) && ( name != document.cookie. substring( 0, name.length ) ) ) { return null; } if ( start == -1 ) return null; var end = document.cookie.indexOf( ';', len ); if ( end == -1 ) end = document.cookie.length; return unescape( document.cookie.substring( len, end ) ); } function setCookie( name, value, expires, path, domain, secure ) { var today = new Date(); today.setTime( today.getTime() ); if ( expires ) { expires = expires * 1000 * 60 * 60 * 24; } var expires_date = new Date( today.getTime() + (expires) ); document.cookie = name+'='+escape( value ) + ( ( expires ) ? ';expires=' +expires_date.toGMTString() : '' ) + //expires.toGMTString() ( ( path ) ? ';path=' + path : '' ) + ( ( domain ) ? ';domain=' + domain : '' ) + ( ( secure ) ? ';secure' : '' ); } function deleteCookie( name, path, domain ) { if ( getCookie( name ) ) document.cookie = name + '=' + ( ( path ) ? ';path=' + path : '') + ( ( domain ) ? ';domain=' + domain : '' ) + ';expires=Thu, 01-Jan-1970 00:00:01 GMT'; }

Последняя, но не менее важная функция в подарок: прототип доллар-функции

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

Прототип функции $

function $() { var elements = new Array(); for (var i = 0; i < arguments.length; i++) { var element = arguments[i]; if (typeof element == 'string') element = document.getElementById(element); if (arguments.length == 1) return element; elements.push(element); } return elements; } // Sample Usage: var obj1 = document.getElementById('element1'); var obj2 = document.getElementById('element2'); function alertElements() { var i; var elements = $('a','b','c',obj1,obj2,'d','e'); for ( i=0;i < elements.length;i++ ) { alert(elements[i].id); } }

Скажите мне, разве это не прекрасно?! Коротко не только имя, но и описание. Функция принимает не только строки, но и объекты! Вы можете передать ей один аргумент, или же много! Безусловно, доллар-функция - моя любимая функция на всю жизнь, и она будет приносить пользу долгие, долгие годы.

И все они:

Надеюсь, этот краткий и полезный список функций JavaScript будет полезен вам, также как он был полезен мне. И, специально для вас, для того удобства скачивания все эти функции вложены вот в этот common.js.

По следам публикации

Добавлено после 30 комментариев: Хорошо, я могу понять всеобщую точку зрения, когда она гласит 'вот эти 10 самые лучшие'. Суть в том, что эта десятка самая лучшая сугубо по моему мнению. Если бы Дин Эдвардс написал свой список десяти самых лучших функций, я уверен, это список отличался бы от моего. Если бы Стюард Лэнгридж(Stuart Langridge) написал свой список, он тоже бы отличался. Мой список сфокусирован главным образом на DOM. Функции определения браузера всегда под рукой у разработчика. Функции Ajax, я полагаю, сложно оценить как <лучшие за все времена>, в основном, потому что Ajax переживает своё младенчество и всё-таки сначала должен впечатлить меня чем-то ошеломляюще полезным. Всем желающим просто вынести эти функции, и дополнить ими прототип в своих документах, флаг в руки и дополняйте себе прототип более чем 30 килобайтами, раз вы чувствуете, что это необходимо. Тем не менее, спасибо вам всем за доселе чудесные комментарии. Я продолжаю надеяться, что этот небольшой список будет полезен достаточно долго. Поверьте, есть сотни других замечательных функций, которые имели шансы попасть в этот список. Только то, что такой функции здесь нет, ещё не значит, что она нехорошая. Просто используйте ваше воображение. ;)