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

В блоге ниже я провожу сравнения между JavaScript и нетехническими рабочими процессами, к которым может иметь отношение любая отрасль.

Коммуникация - ключ к успеху.

Если вы когда-либо пробовали общаться с командой разработчиков, использующей высокий жаргон, или с жителем Вашингтона (столько сокращений!), Или с другом или коллегой из другой страны, вы, возможно, сталкивались с проблемами, связанными с другим языком или жаргоном, которые могут привести к недоразумение или путаница.

В JavaScript объединение разных типов данных также может вызвать аналогичную путаницу. JavaScript будет пытаться сделать предположения о том, что вы имели в виду, но не всегда понимает это правильно.

В этом коде вы видите, как объединяются целые числа и строки. Сначала JavaScript начинается с математического сложения каждого целого числа, пока не появится первый строковый символ. как только он попадает в строку, он начинает объединять точки данных, как если бы все они были строками, а не целыми числами.

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

Тяжелая рабочая нагрузка и многозадачность

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

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

Точно так же функция JavaScript должна быть ограничена одним заданием или задачей. Это упрощает отладку и внесение изменений. Это подкрепляется использованием «вспомогательных функций», которые выполняют подфункции, которые вы, возможно, повторяли в другом коде.

Вот простое определение функции JavaScript:

Функция JavaScript - это блок кода, предназначенный для выполнения определенной задачи.

Функция JavaScript выполняется, когда ее вызывает (вызывает) «что-то».

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

Соответствующая информация должна быть доступна и в объеме.

Как и в любой другой работе, вашим сотрудникам необходимы инструменты и информация для выполнения своей работы. Существенная информация должна быть в объеме или предоставлена ​​в рамках параметров функции.

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

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

Объем - это концепция того, где что-то доступно. В JavaScript область видимости определяется тем, где в нашем коде доступны объявленные переменные и методы.

Следующий рисунок помог мне немного лучше понять объем.

Убедитесь, что ваши переменные и функции находятся в пределах области, необходимой для того, чтобы ваш код работал так, как вы намереваетесь.

Время и порядок - ключ к успеху

Организация и своевременность задач важны в каждой работе. Если ваш ежемесячный отчет о сверке кредитной карты компании должен быть сдан 15 числа каждого месяца, вам не имеет смысла заполнять его 16 числа, то есть с опозданием на день. Также не имеет смысла заполнять его слишком рано, поскольку у вас еще может не быть соответствующего заявления или информации для его завершения.

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

Один из способов сделать это в мире JavaScript - использовать .addEventListener в сочетании с функцией ().

.addEvent Listener «отслеживает» события, происходящие внутри браузера. Это может быть щелчок, нажатие клавиши или отправка формы. Как только это событие происходит, он выполняет функции или следующую строку кода.

Вот пример:

В этом коде мы добавляем прослушиватель событий к определенному элементу ввода на странице. При щелчке по этому входу мы запускаем функцию, которая предупреждает пользователя: «Меня щелкнули!».

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

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

Это можно сделать двумя способами:

  • Псевдокод, что вы собираетесь делать с кодом перед написанием кода.
  • Немного кодируйте, немного тестируйте. И много файлов console.log ().

Ниже приведен пример псевдокода в строках 1–2. По сути, мы печатаем краткие, но ясные заметки о том, что мы собираемся кодировать, а затем начинаем писать этот код. Подобно наброску отчета или эссе, которое вы пишете, он дает нам представление о том, что нам нужно сделать, и помогает прояснить нашу логику.

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

В этом коде я вызвал функцию renderPokemon () в строке 5 и начал кодировать эту функцию в строках 9–12. Чтобы проверить, как выглядят мои данные и что функция работает, я использую простой console.log (), чтобы увидеть их в своей консоли. После подтверждения я продолжаю кодирование для рендеринга данных в DOM (как отмечено в моем псевдокоде в строке 10).