Думать как программист
Не нужно искать специальную литературу, чтобы думать как программист. В статье описаны принципы анализа и синтеза – неотъемлемая часть кодинга.
«Я не понимаю JavaScript. Я не могу создавать компоненты с нуля. Наверное, я не умею думать как программист».
Знакомо? Многие люди, которые пытаются освоить JavaScript в качестве первого языка, сталкиваются с такой проблемой. Даже разработчики, которые давно кодят на другом языке, сталкиваются с той же проблемой в JS. Только вместо «Я не умею думать как разработчик», они говорят «Я не понимаю JavaScript». Давайте же разберемся, как научиться мыслить с позиции кодера.
Вы уже умеете думать как программист
Вы пробовали решать простые упражнения по JavaScript на таких ресурсах, как freeCodeCamp, Code Academy или Code Wars? Если да, то никаких проблем с соответствующим типом мышления у вас нет. Настоящая причина в том, что вы боитесь написать нерабочий код, столкнуться с ошибками, и поэтому не знаете, с чего начать.
Преодолеть этот внутренний барьер несложно. Просто выполните 4 шага:
- Разбейте проблему на составляющие
- Найдите решения для небольших задач
- Соберите решения когерентным образом
- Рефакторинг и улучшение
Рассмотрим каждый из этапов подробнее.
Шаг 1. Разбейте проблему на составляющие
Как можно поместить слона в холодильник?
Вот что ответит большинство людей:
● открыть холодильник;
● поместить в него слона;
●закрыть холодильник.
Задача решена.
Этот ответ является лучшим примером того, почему вы останавливаетесь, глядя на пустой JavaScript-файл. Вы не видите пошагового представления задачи.
Если посмотреть на вопрос с логической точки зрения, можно найти множество дополнительных вопросов, которые остаются без ответа:
- О каком холодильнике мы говорим?
- О каком слоне мы говорим?
- Если слон слишком велик, чтобы поместиться в холодильнике, что нужно сделать?
- Где найти слона?
- Как транспортировать слона к холодильнику?
Чтобы думать как программист, следует ответить на каждый из вопросов, которые только могут прийти в голову. Вот почему первый шаг – разбить проблему на более мелкие части.
Шаг 2. Найдите решения для небольших задач
Теперь нужно найти ответы на все вопросы, образовавшиеся в ходе анализа задачи. Варианты решения должны быть максимально подробными:
- Какой холодильник? – холодильник, который находится на кухне.
- Какой слон? – слон африканский саванный.
- Что предпринять, если слон окажется слишком большим? – взять уменьшающий пистолет, чтобы изменить размер слона.
- Где вы найдете слона? – в Африке.
- Как можно перевезти такого слона? – положить уменьшенного слона в сумку, после чего сесть на самолет и вернуться домой.
Иногда нужно тщательнее проанализировать несколько вариантов, чтобы получить искомый ответ. В приведенном выше примере мы можем глубже копнуть варианты 3 и 4:
- Где раздобыть уменьшающий пистолет? – одолжите у сумасшедшего ученого по соседству.
- Где в Африке найти нужного слона? – например, в национальном парке слонов Аддо (Addo Elephant National Park), что в Южной Африке.
Как только будут даны ответы на самые незначительные вопросы, соберите их вместе, чтобы решить задачу.
Шаг 3. Соберите решения когерентным образом
Итак, в примере поместить-слона-в-холодильник вы можете предпринять следующие действия:
- Получить уменьшающий пистолет у ближайшего ученого
- Слетать в Южную Африку
- Съездить в Addo Elephant National Park
- Найти там африканского саванного слона
- Уменьшить слона с помощью специального пистолета
- Поместить его в сумку
- Направиться к аэропорту
- Вернуться в родную страну
- Приехать домой
- Поместить слона в холодильник
Задача решена.
Но, разумеется, вы не будете захватывать слонов и помещать их в холодильники с помощью JavaScript (JS).
Давайте рассмотрим настоящий пример
Предположим, вы хотите создать кнопку, при нажатии на которую появляется боковая панель (сайдбар). Вот визуальное представление решения.
Шаг первый – разбить на элементы
Разбейте компонент на более мелкие составляющие. Вот несколько вопросов, на которые следует ответить:
- Какова разметка кнопки?
- Как должна выглядеть кнопка?
- Что происходит, когда кнопка нажата в первый раз?
- Что происходит, когда кнопка нажата снова?
- Что происходит, когда кнопка нажата в третий раз?
- Какова разметка боковой панели?
- Как выглядит боковая панель, когда она отображается?
- Как выглядит боковая панель, когда она скрыта?
- Как появляется боковая панель?
- Как боковая панель исчезает?
- Должна ли боковая панель появляться при загрузке страницы?
Второй шаг – ответить на все вопросы
Думать как программист – значит уметь решать подобные или более сложные задачи. Чтобы создавать решения, потребуются знания о среде, с которой предстоит работать. В нашем случае важно знать HTML, CSS и JavaScript.
Не беспокойтесь, если не знаете ответа на какой-либо из вопросов. Если вы хорошо разбили поставленную задачу, то сможете быстро найти ответы с помощью Google.
Какова разметка кнопки?
Разметка – это тег с классом .button.
Click me
Как должна выглядеть кнопка?
Для создания кнопки следует использовать CSS:
.btn {
display: inline-block;
font-size: 2em;
padding: 0.75em 1em;
background-color: #1ce;
color: #fff;
text-transform: uppercase;
text-decoration: none;
}
Что происходит, когда кнопка нажата в первый раз? Во второй? В третий?
Боковая панель должна отображаться при однократном нажатии кнопки. При втором нажатии сайдбар исчезает. Также он снова появляется при повторном нажатии кнопки.
Какова разметка боковой панели?
Боковая панель заключается в теги
Как выглядит боковая панель, когда она отображается?
Боковая панель должна располагаться справа от окна. После появления сайдбар нужно зафиксировать на месте, чтобы пользователь его увидел. Зададим ширину панели в 300 пикселей.
CSS-код будет выглядеть примерно так:
.sidebar {
position: fixed;
top: 0;
bottom: 0;
right: 0;
width: 300px;
background-color: #333;
}
.sidebar ul {
margin: 0;
padding: 0;
}
.sidebar li {
list-style: none;
}
.sidebar li + li {
border-top: 1px solid white;
}
.sidebar a {
display: block;
padding: 1em 1.5em;
color: #fff;
text-decoration: none;
}
Как выглядит боковая панель, когда она скрыта?
Боковая панель должна быть сдвинута на 300 пикселей вправо, чтобы исчезнуть с экрана. Чтобы научиться думать как программист, необходимо также дробить вопросы в ходе решения. Например, сейчас мы можем разбить проблему еще на 2 элемента:
- Как узнать, отображается или скрыта боковая панель?
- Как создать скрытую боковую панель?
Ответим на них.
Как узнать, отображается или скрыта боковая панель?
Если сайдбару присвоен класс .is-hidden, он должен быть скрыт от просмотра. В противном случае панель должно быть видно.
Как создать скрытую боковую панель?
Используем translateX для смещения боковой панели на 300 пикселей вправо, так как transform является лучшим вариантом для анимации. Стили выглядят следующим образом:
.sidebar.is-hidden {
transform: translateX(300px);
}
Как появляется боковая панель?
Боковая панель не может просто возникнуть. Она двигается с правой стороны, где находится до нажатия кнопки. Если вы разбираетесь в CSS, можете реализовать transition. В противном случае используйте Google для поиска решения.
.sidebar {
/* other properties */
transition: transform 0.3s ease-out;
}
Как боковая панель исчезает?
Это просто обратное появлению действие. При этом вам не нужно писать дополнительный код CSS.
Должна ли боковая панель появляться при загрузке страницы?
Нет. Учитывая то, что мы используем класс is-hidden в разметке сайдбара, из-за чего он должен быть скрыт до нажатия кнопки.
Теперь мы ответили почти на все вопросы, кроме одного – что происходит, когда кнопку нажимают один раз? Дважды? Три раза?
Наш ответ выше был слишком расплывчатым. Мы знаем, что боковая панель должна появиться, когда вы нажимаете кнопку, но как? Боковая панель должна исчезнуть, когда вы нажмете снова, но как?
Как узнать, что кнопка нажата?
К кнопке можно добавить слушателя событий, который будет «отлавливать» клик. Но перед этим найдите кнопку с помощью querySelector:
const button = document.querySelector('.btn')
button.addEventListener('click', function() {
console.log('button is clicked!')
})
Что происходит, когда кнопка нажата один раз?
Когда произведено первое нажатие, мы должны убрать is-hidden. Чтобы сделать это в JavaScript, используем Element.classList.remove. Это означает, что сначала нужно выбрать боковую панель.
const button = document.querySelector('.btn')
const sidebar = document.querySelector('.sidebar')
button.addEventListener('click', function() {
sidebar.classList.remove('is-hidden')
})
Что происходит, когда кнопка нажата во второй раз?
Когда кнопка снова нажата, добавляем is-hidden обратно на боковую панель, чтобы она исчезла.
К сожалению, слушатель событий не предоставляет возможность отслеживать, сколько раз была нажата кнопка. Лучший вариант отслеживания – проверять наличие is-hidden в сайдбаре. Если есть - удаляем. Если нет – добавляем.
const button = document.querySelector('.btn')
const sidebar = document.querySelector('.sidebar')
button.addEventListener('click', function() {
if (sidebar.classList.contains('is-hidden')) {
sidebar.classList.remove('is-hidden')
} else {
sidebar.classList.add('is-hidden')
}
})
Также вы всегда можете вернуться к визуальному представлению нашего решения.
Шаг 4. Рефакторинг и улучшение
Чтобы научиться думать как программист, нельзя исключать и четвертый шаг, в котором обобщены наши решения. Последний этап – это рефакторинг и улучшение написанного кода. Но если вы новичок, то можете сразу и не понять, как улучшить код. Понимание придет только с опытом и практикой.
Важно, чтобы после трех предшествующих шагов вы сделали перерыв и поработали над каким-то другим проектом. Когда вы лучше освоите JavaScript и вернетесь к данной работе, то сможете заметить, что упустили несколько деталей.
В приведенном выше примере можно выделить дополнительные вопросы:
- Как сделать компонент боковой панели более доступным для пользователей с нарушениями зрения?
- Как изменить сайдбар так, чтобы он стал удобным для людей, использующих клавиатуру?
- Можно ли еще как-то улучшить код?
Если вы хорошо изучили литературу или пользовались поисковиком в ходе решения задачи, то успели заметить, что для третьего пункта можно использовать метод toggle. Он удаляет класс, если тот присутствует. В противном случае метод toggle его добавляет:
const button = document.querySelector('.btn')
const sidebar = document.querySelector('.sidebar')
button.addEventListener('click', function() {
sidebar.classList.toggle('is-hidden')
})
Выводы
Думать как программист несложно. Важно знать, как разбить основную проблему на более мелкие. Когда произведете дробление, поэтапно ответьте на каждый из отдельно взятых вопросов и реализуйте решения в коде. В процессе реализации программы вы можете столкнуться с рядом других вопросов. Не игнорируйте: решите и их тоже.
Как только будут готовы решения на мелкие задачи, вы получите и решение на задачу основную. Поэтому отнеситесь серьезно к каждой из представленных проблем, даже если они кажутся незначительными, а решение – очевидным.
Думать как программист – это также искать пути улучшения. Помните, что программу всегда можно улучшить: изменить структуру, сделать код более «читабельным», убрать все лишнее. Но чтобы понять, где именно можно осуществить апгрейд, сделайте перерыв в работе: по возвращении к проекту вы сможете увидеть больше вариантов решения.
Код решения
HTML
Click me!
CSS
.btn {
display: inline-block;
font-size: 2em;
padding: 0.75em 1em;
background-color: #1ce;
color: #fff;
text-transform: uppercase;
text-decoration: none;
}
.sidebar {
position: fixed;
top: 0;
bottom: 0;
right: 0;
width: 300px;
background-color: #333;
transition: transform 0.3s ease-out;
}
.sidebar.is-hidden {
transform: translateX(300px);
}
.sidebar ul {
margin: 0;
padding: 0;
}
.sidebar li {
list-style: none;
}
.sidebar li + li {
border-top: 1px solid white;
}
.sidebar a {
display: block;
padding: 1em 1.5em;
color: #fff;
text-decoration: none;
}
JavaScript
const button = document.querySelector('.btn')
const sidebar = document.querySelector('.sidebar')
button.addEventListener('click', function () {
sidebar.classList.toggle('is-hidden')
})