У моих программистов была задача: в фото галерее при активном изображении подсвечивать thumbnail показываемого изображения. Задача вроде тривиальная, но вызвала у них некоторый затык при решении. Хочу сказать сразу, что владение JS было у них не на высоте.
Вообще мало людей по настоящему знающих этот язык и не путующий его с принципами работы DOM документа.
В чем же была проблема…
1. В том, что сначала они решали её рекурсией :)
2. Вторая попытка решить привела к введению глобальной переменной, что я не считаю хорошим тоном
3. Загрязнение общего кода подобными маленькими функциями вместо использования объектного подхода
В бытности будучи программистом я написал маленький каркас для демонстрации. Вот он:
Вызывать следует так:
Что это нам дало:
1. Мы не используем рекурсию. Этим мы бережем ресурсы компьютера. У клиентских машин они же не резиновые вопреки обратным утверждениям
2. Мы не ввели глобальную переменную, которая в больших системах неудобна по объективням причинам
3. В третьих мы сделали универсальный объект. У него инкапсулированы данные!
Новичкам просьба разобраться и понять. Этот вариант сделан специально проще, чем мы реализовывали.
Мы создаем в теле функции локальную переменную. Затем захватываем эту переменную методом этой функции (это класс, точнее прототип). В итоге получаем хитрый трюк. При выходе из самой функции данные в ней запомнились.
Вообще-то по этому вопросу материала достаточно в сети. Этот трюк далеко не новый. Но о нем нужно напоминать «отцам» и учить новичков.
Вообще мало людей по настоящему знающих этот язык и не путующий его с принципами работы DOM документа.
В чем же была проблема…
1. В том, что сначала они решали её рекурсией :)
2. Вторая попытка решить привела к введению глобальной переменной, что я не считаю хорошим тоном
3. Загрязнение общего кода подобными маленькими функциями вместо использования объектного подхода
В бытности будучи программистом я написал маленький каркас для демонстрации. Вот он:
<script type=«text/javascript»>
function MainMenu(){
var OldImage;
this.getOldImage = function(){ return OldImage; }
this.setOldImage = function( img ){ OldImage = img;}
this.chgImage = function( obj, newImage){
if(newImage != null){
this.setOldImage(obj.src);
obj.src = '/images/'+newImage;
} else {
obj.src = this.getOldImage();
}
}
}
var Menu = new MainMenu();
</script> * This source code was highlighted with Source Code Highlighter.
Вызывать следует так:
<img src="/images/home.gif" width=«88» height=«23» alt="" onmouseover=«Menu.chgImage(this, 'home_over.gif')» onmouseout=«Menu.chgImage(this)»>* This source code was highlighted with Source Code Highlighter.
Что это нам дало:
1. Мы не используем рекурсию. Этим мы бережем ресурсы компьютера. У клиентских машин они же не резиновые вопреки обратным утверждениям
2. Мы не ввели глобальную переменную, которая в больших системах неудобна по объективням причинам
3. В третьих мы сделали универсальный объект. У него инкапсулированы данные!
Новичкам просьба разобраться и понять. Этот вариант сделан специально проще, чем мы реализовывали.
Мы создаем в теле функции локальную переменную. Затем захватываем эту переменную методом этой функции (это класс, точнее прототип). В итоге получаем хитрый трюк. При выходе из самой функции данные в ней запомнились.
Вообще-то по этому вопросу материала достаточно в сети. Этот трюк далеко не новый. Но о нем нужно напоминать «отцам» и учить новичков.