Если бы существовал универсальный common.js объединяющий все JavaScript'ы на свете, вы бы отыскали в нём эти десять (плюс одна в подарок) функций. Эти функции, конечно же, прошли многократные испытания и доказана их полезность и то что они помогают всем, кто использовал их. Итак, не отвлекаемся, вот десять самых великих пользовательских функций JavaScript употребляемых в наши дни.
Конечно же, скрепка для прикрепления события! Неважно, какую версию вы используете, кем и когда она написана, эта функция делает то, что мы сказали. И конечно как вам могло быть известно, я соединил свою последнюю, вполне удобную версию addEvent() с небольшой помощью от победителя в споре и Марка Ваббена (Mark Wubben) плюс несколько незначительных синтаксических правок. Но просто, чтобы быть справедливым к Скоту Эндрю (Scott Andrew), вот оригинал, с которого всё началось.
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;
}
}
Изначально написанная Саймоном Виллисоном (Simon Willison) она была замечательно освоенна всеми остальными, как простой способ добавить события, запускающиеся после загрузки страницы. Функция, разумеется, прикрепляет все ваши события к обработчику события onload, которого некоторые всё ещё могут увидеть, если есть такая необходимость, и, тем не менее, функция делает ровно то, что от неё ожидается, и делает это хорошо.
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 пункте.
addEvent(window,'load',func1,false); addEvent(window,'load',func2,false); addEvent(window,'load',func3,false);
Представляет собой плод коллективного творчества. Несколько разработчиков реализовали свои собственные версии, и не было доказано, что какая-нибудь одна версия лучше, чем другая. Как вы могли ожидать, моя скромная особа попробовала превзойти всех остальных. Функция getElementsByClass порождена необходимостью веб-программистов изящно и быстро выбирать элементы по имени класса, и к удивлению разработчиков, она не является настоящим методом DOM, как они могли бы подумать: в конце концов, есть getElementById, getElementsByName(), getElementsByTagName, но нет getElementsByClass! Вот она, во всей своей славе:
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;
}
Просто напишите в начале функции имя класса, потом, если будет желание, второй и третий аргументы и свершится чудо!
Функция, первоначально написанная Дином Эдвардсом для того, чтобы делать выборку из DOM по свойствам CSS; поддерживает множество селекторов. Однако со всей честностью скажу, эта функция больше походит на мини-библиотеку и хоть размером не очень-то мала, но она, всё же, обалденная функция. Из-за её длины (и CC лицензии) я не могу поместить её на этом сайте. Полную документацию можно найти на справочных и загрузочных страницах myCssQuery.
Если быть полностью честным, вариантов этой функции существует более чем достаточно. По сути, история 'переключалки' происходит от скрытия\показа элемента как реакции на событие. Чтобы упростить дело, я тоже написал одну такую функцию. Я не имею в виду, что эта функция считается наилучшей функцией-'переключалкой', но в ней заложены основы показа и скрытия элемента.
function toggle(obj) {
var el = document.getElementById(obj);
if ( el.style.display != 'none' ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
Насколько я помню, вроде бы у Джереми Кейта (Jeremy Keith) всплыла такая идея, хотя можно было бы подумать и про эту функцию, что она является методом ядра DOM. Но, как и с getElementsByClass, это не так. Вместо того чтобы выписать функцию прямо из книги, я лучше предоставлю это вам: приобретите эту книжку сами. Взамен я списал один общедоступный простой метод:
function insertAfter(parent, node, referenceNode) {
parent.insertBefore(node, referenceNode.nextSibling);
}
Очень грустно, что inArray не входит в ядро DOM. Эта функция, однако, не совсем функция. Это прототип, который расширяет заданный в DOM объект Array. Ну да, расширение inArray делает свою работу точно так, как вы и думали, если вы, конечно, PHP-программист. Вот версия с сайта EmbiMEDIA
Array.prototype.inArray = function (value) {
var i;
for (i=0; i < this.length; i++) {
if (this[i] === value) {
return true;
}
}
return false;
};
Я по правде не знаю, что я бы делал без этих ребят. Я ненавижу то, как сделана реализация установки кук в JavaScript с помощью DOM. В PHP установка кук очень проста и она проста по одной главной причине - функции PHP работают точно также, как функции ниже. Все три функции являются всеобщим достоянием и могут быть свободно использованы.
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);
}
}
Функция принимает не только строки, но и объекты! Вы можете передать ей один аргумент, или же много! Безусловно, доллар-функция - моя любимая функция на всю жизнь, и она будет приносить пользу долгие, долгие годы.
$ = 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];
}
};
function getEventTarget(e) {
var e = e || window.event;
var target = e.target || e.srcElement;
if (target.nodeType == 3) // боремся с Safari
target = target.parentNode;
return target;
}
© Copyright 2008-2012 by KDG