расставляй правильно приоритеты и не отвлекайся на мелочи

Замыкания в JavaScript: практический пример использования

Наверняка многие из Вас уже неоднократно сталкивались с такой интересной штукой, как замыкания, или говоря родным языком closures. К примеру, об этом, есть замечательный пост на хабре, и еще, кто не в теме, они появились в пропатченом PHP версии 5.3 (а в это время «объектные Сишники» тихо хихикают).

До недавнего времени я то-же не знал об этих самых замыканиях, а когда узнал и более менее врубился что к чему, то немного изумился и задался вопросом: «И где бы это применить в мирных целях?», но ответа сразу не нашел. И вот теперь подвернулась задачка в которой эти самые замыкания оказались очень даже полезными. Конечно поставленую задачу вполне можно решить и без них, но с их участием решение выглядит более красивым.

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

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

Сразу к делу, вот мой пример на JavaScript который реализует поставленную задачу:

var aInputs = document.body.getElementsByTagName(”INPUT”);
for (i = 0, max = aInputs.length; i < max; i++) {
    if (aInputs[i].type == ’text’ && aInputs[i].value != ”) {
        defvalue = aInputs[i].value;
        (function(defvalue) { 
            aInputs[i].onfocus = function () {
                if (this.value == defvalue) this.value = ”;
            }
            aInputs[i].onblur = function () {
                if (this.value == ”) this.value = defvalue;
            }
        })(defvalue);
    } 
}

А теперь собственно комментарии:

Сам скрипт должен запускаться в самом конце страницы, так как он самостоятельно находит все элементы ввода (INPUT) с заполненными дифолтовыми значениями.

Каждому полю INPUT он присваивает два события, одно по приему фокуса прячет значение по умолчанию, другое по потере фокуса восстанавливает его, либо нет, при наличии пользовательского ввода.

Сами присваиваемые события как раз и реализованы на замыканиях, а дифолтовое значение (defvalue), для каждого из полей ввода, используется с применением метода затенения.

Думаю Вам будет предельно понятен этот небольшой полезный примерчик.

Как Вам красота замыканий?

Почитать еще по данной теме :