Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
10 лучших пользовательских функций JavaScript
Перевод популярного поста "Top 10 custom JavaScript functions of all time" от Dustin Diaz. Распространяется по лицензии Creative Commons, обязательно ставьте ссылку на оригинал и указывайте автора английского текста.
Если бы существовал универсальный common.js объединяющий все JavaScript'ы на свете, вы бы отыскали в нём эти десять (плюс одна в подарок) функций. Эти функции, конечно же, прошли многократные испытания, доказана их полезность и то, что они помогают всем, кто использовал их. Итак, не отвлекаемся, вот десять самых великих пользовательских функций JavaScript, употребляемых в наши дни.
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 = '';
}
}Элегантный вариант для современных браузеров:
(function() {
var toggle = document.querySelector("#flexy-nav__toggle");
var nav = document.querySelector("#flexy-nav__items");
toggle.addEventListener("click", function(e) {
e.preventDefault();
nav.classList.contains("flexy-nav__items--visible") ? nav.classList.remove("flexy-nav__items--visible") : nav.classList.add("flexy-nav__items--visible");
});
})();5. insertAfter()
Насколько я помню, вроде бы у Джереми Кейта (Jeremy Keith) всплыла такая идея, хотя можно было бы подумать и про эту функцию, что она является методом ядра DOM. Но, как и с getElementsByClass, это не так.
Вместо того чтобы выписать функцию прямо из книги, я лучше предоставлю это вам: приобретите эту книжку сами.
Взамен я списал один общедоступный простой метод:
insertAfter()
function insertAfter(parent, node, referenceNode) {
parent.insertBefore(node, referenceNode.nextSibling);
}4. inArray()
Очень грустно, что inArray не входит в ядро DOM. Эта функция, однако, не совсем функция. Это прототип, который расширяет заданный в DOM объект Array. Ну да, расширение 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;
}
// Примеры использования $ функции:
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);
}
}Функция принимает не только строки, но и объекты! Вы можете передать ей один аргумент или же много! Безусловно, доллар-функция - моя любимая функция на всю жизнь, и она будет приносить пользу долгие, долгие годы.
Альтернативные варианты
$ = function (id, context) {
return (context || document).getElementById(id);
};
$$ = function (tn, context, index) {
var els = (context || document).getElementsByTagName(tn);
if (null == index || isNaN(index)) {
return els;
} else {
return els[index];
}
};getEventTarget
Есть небольшая проблема при определении целевого элемента у события. Вместо вызова e.target в Internet Explorer необходимо использовать e.srcElement. Самым простым решением для устранения этой проблемы является небольшая функция getEventTarget:
function getEventTarget(e) {
var e = e || window.event;
var target = e.target || e.srcElement;
if (target.nodeType == 3) // боремся с Safari
target = target.parentNode;
return target;
}Получить параметр адресной строки
Функция возвращает параметр из адресной строки GET-запроса:
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regex = new RegExp( "[\\?&]" + name + "=([^&#]*)");
var results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));Если Вам нужны все параметры сразу то следующая функция будет удобнее:
function parseGetParams() {
var $_GET = {};
var __GET = window.location.search.substring(1).split("&");
for(var i=0; i<__GET.length; i++) {
var getVar = __GET[i].split("=");
$_GET[getVar[0]] = typeof(getVar[1])=="undefined" ? "" : getVar[1];
}
return $_GET;
}Добавить/Удалить/Проверить класс у элемента
function addClass(o, c){
if(typeof(o)!="object")o=document.getElementById(o);
var re=new RegExp("(^|\\s)" + c + "(\\s|$)", "g");
if(re.test(o.className)) return;
o.className=(o.className + " " + c).replace(/\s+/g, " ").replace(/(^ | $)/g, "")
}
function removeClass(o, c){
if(typeof(o)!="object")o=document.getElementById(o);
var re=new RegExp("(^|\\s)" + c + "(\\s|$)", "g");
o.className=o.className.replace(re, "$1").replace(/\s+/g, " ").replace(/(^ | $)/g, "")
}
function hasClass(o, c) {
if(typeof(o)!="object")o=document.getElementById(o);
for (var cl = o.className.split(' '),i=cl.length-1; i>=0; i--) {
if (cl[i] == c) return true;
}
return false;
}Кроссбраузное получение стилей объекта
"getComputedStyle" in window || function() { // борьба с IE
function c(a, b, g, e) {
var h = b[g];
b = parseFloat(h);
h = h.split(/\d/)[0];
e = null !== e ? e : /%|em/.test(h) && a.parentElement ? c(a.parentElement, a.parentElement.currentStyle, "fontSize", null) : 16;
a = "fontSize" == g ? e : /width/i.test(g) ? a.clientWidth : a.clientHeight;
return "em" == h ? b * e : "in" == h ? 96 * b : "pt" == h ? 96 * b / 72 : "%" == h ? b / 100 * a : b;
}
function a(a, c) {
var b = "border" == c ? "Width" : "", e = c + "Top" + b, h = c + "Right" + b, l = c + "Bottom" + b, b = c + "Left" + b;
a[c] = (a[e] == a[h] == a[l] == a[b] ?
[a[e]] : a[e] == a[l] && a[b] == a[h] ?
[a[e], a[h]] : a[b] == a[h] ?
[a[e], a[h], a[l]] : [a[e], a[h], a[l], a[b]]).join(" ");
}
function b(b) {
var d, g = b.currentStyle, e = c(b, g, "fontSize", null);
for (d in g) {
/width|height|margin.|padding.|border.+W/.test(d) && "auto" !== this[d] ?
this[d] = c(b, g, d, e) + "px" : "styleFloat" === d ?
this["float"] = g[d] : this[d] = g[d];
}
a(this, "margin");
a(this, "padding");
a(this, "border");
this.fontSize = e + "px";
return this;
}
b.prototype = {};
window.getComputedStyle = function(a) {
return new b(a);
};
}();.
Прокомментировать/Отблагодарить