Как научиться думать как программист?

Question

[dm]

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

Например, следующая задача. На сайте getresponse.ru блок с главными услугами и картинками-превью к ним:


По программистски я вижу алгоритм решения задачи следующий.
В зависимости от номера бокса, на который наведена мышь, изменить номер в атрибуте src картинки.

1. Записать в переменную значение атрибута src изображения
2. Получить номер бокса, на который наведена мышь
3. Передать полученный номер изображению

Вроде должна быть какая-нибудь функция, всё это выполняющая, но на практике вот такой говнокод:

jQuery(document).ready(function($) {

    var welcomeImg = $( '.main-welcome__thumb-img' );

    var welcomeImgSrc1 = '/sserpdrow/wp-content/uploads/thumb-welcome-01.jpg',
        welcomeImgSrc2 = '/sserpdrow/wp-content/uploads/thumb-welcome-02.jpg',
        welcomeImgSrc3 = '/sserpdrow/wp-content/uploads/thumb-welcome-03.jpg',
        welcomeImgSrc4 = '/sserpdrow/wp-content/uploads/thumb-welcome-04.jpg';

    var welcomeId1 = $( '.home .content-box-column-1 .link-area-box' ),
        welcomeId2 = $( '.home .content-box-column-2 .link-area-box' ),
        welcomeId3 = $( '.home .content-box-column-3 .link-area-box' ),
        welcomeId4 = $( '.home .content-box-column-4 .link-area-box' );

    welcomeId1.hover(
        function() { welcomeImg.attr( 'src', welcomeImgSrc1 )},
        function() { welcomeImg.attr( 'src', welcomeImgSrc1 )});

    welcomeId2.hover(
        function() { welcomeImg.attr( 'src', welcomeImgSrc2 )},
        function() { welcomeImg.attr( 'src', welcomeImgSrc2 )});

    welcomeId3.hover(
        function() { welcomeImg.attr( 'src', welcomeImgSrc3 )},
        function() { welcomeImg.attr( 'src', welcomeImgSrc3 )});

    welcomeId4.hover(
        function() { welcomeImg.attr( 'src', welcomeImgSrc4 )},
        function() { welcomeImg.attr( 'src', welcomeImgSrc4 )});
});

Всего 2 вопроса:
1. Как сделать правильно конкретно эту задачу. Чтобы можно было добавить еще и анимацию смены блоков.
2. Как научиться думать правильно. Может есть какя-нибудь литература? Она-то точно есть, но вот такая чтоб дошло?

Comments

[crazyhat]

А можно и картинки сделать background'ом. И просто в css прописать изменение картинки в бекграунде на hover'е. Это же проще, чем скрипт писать. Или я неправильно понял задачу?

[dm]

Можно, но так не сделать "залипание" при отведении мыши. Да и неправльно это, не гибко

Answer 1

[iBird Rose]

1) в ссылке бокса, на который ты наводишь мышь - храни в data параметре (к примеру data-src) полную ссылку на изображение.
2) когда человек навел - эту data-src передаешь в картинку как src.
все! 2 строки кода.

https://jsfiddle.net/zc041gbp/1/

Чтобы можно было добавить еще и анимацию смены блоков.

а тут уже придется делать табами. чтобы все 4 картинки были уже расположены. и там уже меняешь табы как угодно через opacity к примеру.

Comments

[dm]

Спасибо. Смотришь - всё просто. Но как к этому дойти, где учат этой магии? learn.javascript.ru пройден, но меня он не учит мыслить, теория наверно нужна.

[iBird Rose]

dm: ну скорее всего скажу что "опыт" и тесная работа с программистами. к примеру если бы ты в какой нить веб студии сверстал как ты написал в вопросе - увидев это программист бы сразу отправил обратно на переделку.

[dm]

iBird Rose: Увы, нет возможности с кем-то работать, только интернет в качестве источника опыта

[Ильдар Гизетдинов]

dm: если вам интересно конкретно развитие, попытайтесь написать разным веб-студиям, возможно вам дадут что нибудь сделать, но маловероятно что вы за это получите большие деньги, если вообще получите, все таки работа на опыт

Answer 2

[Евгений]

Научиться думать правильно легче всего, например, набиванием шишек. Сложно представить такие примеры, когда человек на пути своего становления не делает ошибок.

Вот пустишь в production свой код, за год добавишь еще over999 строк. А потом у тебя возникнут баги. Ты посмотришь на то, что написал год назад, потратишь на решение простой задачи неприлично много времени, перекрестишься и постараешься переписать, чтобы добиться более поддерживаемого кода. При условии, конечно, что ты будешь совершенствоваться и не обманывать в первую очередь самого себя.