Какие учебники не говорят вам: как подходить к проектам

 // set our end time const endTime = new Date().getTime() + 10*24*60*60*1000; // calculate remaining time from now until deadline function getRemainingTime(deadline){ const currentTime = new Date().getTime(); return deadline - currentTime; } // store clock div to avoid repeatedly querying the DOM const clock = document.getElementById('clock'); // show time repeatedly function showTime(){ const remainingTime = getRemainingTime(endTime); clock.innerHTML = remainingTime; requestAnimationFrame(showTime); } requestAnimationFrame(showTime); 

В приведенном выше примере мы добавили функцию showTime которая отображает оставшееся время на экране. В конце функции мы включаем requestAnimationFrame(showTime) , который в основном говорит, showTime снова запустите showTime как только браузер будет готов. Это позволяет нам постоянно обновлять отображение времени с высокой производительностью .

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

Используя подходы, которые вы уже изучили (небольшие шаги и т. Д.), Вы можете сначала преобразовать миллисекунды в секунды, посмотреть, как это выглядит, и вставить это в свою функцию. Затем вы можете повторить этот процесс для подсчета минут, часов и дней. Конечный результат может выглядеть примерно так:

 function showTime(){ const remainingTime = getRemainingTime(endTime); const seconds = Math.floor((remainingTime/1000) % 60); const minutes = Math.floor((remainingTime/(60*1000)) % 60); const hours = Math.floor((remainingTime/(60*60*1000)) % 24); const days = Math.floor(remainingTime/(24*60*60*1000)); clock.innerHTML = `${days}:${hours}:${minutes}:${seconds}`; requestAnimationFrame(showTime); } requestAnimationFrame(showTime); 

Эксперимент и тест

К этому моменту в вашем проекте вы проведете множество экспериментов и тестов, чтобы убедиться, что все работает. Как только это сработает, посмотрите, сможете ли вы его сломать. Например, что если пользователь нажимает здесь или там? Что если один из входов неожиданный? Что делать, если размер экрана узкий? Все ли работает в ожидаемых браузерах? Есть ли более эффективный подход к какой-либо части этого проекта?

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

 function showTime(){ ... // ensure clock only updates if a second or more is remaining if(remainingTime >= 1000){ requestAnimationFrame(showTime); } } 

Обратите внимание, что причина, по которой мы использовали 1000 миллисекунд (1 секунду) в этом случае, состоит в том, что если бы мы использовали ноль, то тактовая частота перескочила бы и в конечном итоге составила -1 Если ваши часы используют меньшие единицы, чем секунды, тогда сделайте конечное условие меньше одной секунды.

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

Это прекрасно ведет к следующему пункту.

Получить внешнюю помощь

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

Я часто слышал, что новые разработчики удивляются, узнав, как часто опытный разработчик будет искать вещи. На самом деле, поскольку невозможно знать все, возможность поиска информации является одним из самых ценных навыков, которые вы можете иметь.

Инструменты и методы меняются, но навыки обучения не исчезают.

Рефакторинг вашего кода

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

Ваш код лаконичен и читабелен?

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

 // store clock div to avoid repeatedly querying the DOM const clock = document.getElementById('clock'); 

 (function(){ // code goes here })(); 

 function showTime(){ const remainingTime = getRemainingTime(endTime); const seconds = ('0' + Math.floor((remainingTime/1000) % 60)).slice(-2); const minutes = ('0' + Math.floor((remainingTime/(60*1000)) % 60)).slice(-2); const hours = ('0' + Math.floor((remainingTime/(60*60*1000)) % 24)).slice(-2); const days = ('0' + Math.floor(remainingTime/(24*60*60*1000))).slice(-2); clock.innerHTML = `${days}:${hours}:${minutes}:${seconds}`; // ensure clock only updates if a second or more is remaining if(remainingTime >= 1000){ requestAnimationFrame(showTime); } } requestAnimationFrame(showTime); 

 function pad(value){ return ('0' + Math.floor(value)).slice(-2); } const seconds = pad((remainingTime/1000) % 60);