Меня зовут ЛаТойя, и я только что закончила изучать кое-что, что мне показалось крутым. Мои статьи посвящены тому, чтобы поделиться своим опытом, когда я погружаюсь в мир DEVS. Нас учат, что мы можем улучшить наше понимание того, что изучаем, если научим этому кого-то другого. Итак, вы знаете, у меня тоже есть скин в игре. На этом этапе у вас должны быть некоторые знания в области кодирования, чтобы понять все это, прежде чем продолжить. Знание того, как использовать редакторы кода, такие как vscode, и как создавать файлы JavaScript. И базовое понимание того, как создавать функции и переменные. Я надеюсь, что, услышав некоторые из этих вещей от такого же новичка, вы сможете понять это немного лучше. Если вы это поймете, вы сможете использовать его для создания более крупного и лучшего кода для тех, кто в будущем будет наслаждаться всеми хорошими вещами, которые этот код может предложить! Например, как с помощью калькулятора.
Прежде чем мы начнем, это были мои источники:
//Документация:
https://www.npmjs.com/package/readline-sync
//мой учитель проверяет мой код и делает заметки.
Возможно, вы не сможете получить один раз тот пакет, который я получил от инструктора, просматривающего мой код, но вы все равно можете перейти по этой ссылке и узнать больше о пакете readlineSync npm. Пожалуйста.
//Введение в readlineSync
Пакет npm, readlineSync, пытается позволить вашему скрипту общаться с пользователем через консоль. Чтобы помочь нам ознакомиться с использованием этого пакета, нашему классу было дано задание создать калькулятор узлов. Я никогда раньше не делал калькулятор, поэтому моей первой попыткой было слово «спагетти», и это нормально. Я все еще улучшаюсь. Как только я сдал задание, мой инструктор разорвал его заново, лол, а затем показал мне, как на самом деле писать код, как босс. Разбивая это задание по частям, я покажу вам, как я придумал свой код, а затем мы проведем его рефакторинг, чтобы боги кодирования не смеялись над нами слишком долго. Конечно, все это будет с моим улучшенным пониманием на данный момент! Я не заставлю вас начинать с нуля, как это сделал я. Если вы продержитесь до конца, пожалуйста, дайте мне знать, что вы думаете в комментариях!
//Начать
- откройте новую папку проекта и добавьте файл index.js.
- найдите свою папку в терминале и установите пакет readlineSync, используя: npm i readline-sync.
- в верхней части файла index.js добавьте: const rs = require('readline-sync');
- rs означает просто readlineSync, его короче писать.
- для запуска вашего кода в терминале,
- -- вы будете использовать команду: node index.js
**или как вы решили назвать свой файл .js.
Вот инструкция по заданию, которую мне дали:
//Инструкции по назначению
Вы собираетесь создать программу-калькулятор на базе терминала, используя Node.
🛠Требования:
1. Спросите пользователя: «Какую операцию вы хотели бы выполнить?»
2. Затем пользователь вводит один из этих вариантов: «/» «*» «-» «+»
3. Если пользователь вводит недопустимый символ, напечатайте: «Это недопустимая операция», а затем перезапустите программу.
4. После того, как пользователь введет действительную операцию, спросите пользователя: «Пожалуйста, введите первое число».
5. Затем пользователь вводит первое число. Если пользователь вводит что-то, что не является числом, напечатайте: «Это не число», а затем повторно задайте вопрос.
6. После ввода действительного номера спросите пользователя: «Пожалуйста, введите второй номер». Выполните ту же обработку ошибок, что и раньше.
7. Затем создайте функцию для выполнения правильной математической операции и распечатайте результат в виде: «Результат: X», где «X» — фактический результат.
Например, если пользователь ввел сложение «+», и первое число было 3, а второе число — 4, напечатанный результат будет: «Результат — 7».
ПРИМЕЧАНИЕ. Не используйте метод eval() — это никогда не рекомендуется.
💡Совет:
Разбейте проект на небольшие, решаемые шаги. то есть:
Когда программа запрашивает у пользователя операцию, как ее следует сохранить?
Как вы проверите, была ли введена правильная операция? и т. д..
Вплоть до кончика — это гора, которую мне нужно было покорить, чтобы проверить свои постоянно развивающиеся навыки работы с JavaScript. Я предлагаю следовать тому, что говорится в совете, и разбить его на небольшие части.
Давайте приведем наш псевдокод в порядок и начнем собирать наш код воедино.
1. Спросите пользователя: «Какую операцию вы хотели бы выполнить?»
//из документации мы видим, что readlineSync.question() можно использовать, чтобы задать пользователю вопрос и дождаться его ответа!
2. Затем пользователь вводит один из этих вариантов: «/» «*» «-» «+»
//нам нужен способ сделать так, чтобы пользователь мог вводить только те данные, которые нам нужны.
//может быть, это может быть массив или объект?
3. Если пользователь вводит недопустимый символ, напечатайте: «Это недопустимая операция», а затем перезапустите программу.
//нам нужно добавить обработку ошибок, которая выводит сообщение из системы
//нам нужно еще раз задать пользователю вопрос. Поэтому нам нужно будет снова вызвать функцию.
4. После того, как пользователь введет действительную операцию, спросите пользователя: «Пожалуйста, введите первое число».
//мы хотим, чтобы пользователь вводил только цифры.
//мы можем использовать readlineSync.questionInt(), он обрабатывается так же, как вопрос, только здесь в качестве входных данных принимаются только числа. Он имеет встроенную обработку ошибок, позволяющую отклонять все остальное.
5. Затем пользователь вводит первое число. Если пользователь вводит что-то, что не является числом, напечатайте: «Это не число», а затем повторно задайте вопрос.
//мы хотим записать сообщение об ошибке на консоль.
//нам нужно снова вызвать функцию
6. После ввода действительного номера спросите пользователя: «Пожалуйста, введите второй номер». Выполните ту же обработку ошибок, что и раньше.
//мы можем использовать те же шаги, что и 4/5
7. Затем создайте функцию для выполнения правильной математической операции и распечатайте результат в виде: «Результат: X», где «X» — фактический результат.
//нам нужен способ сохранить введенные пользователем данные, чтобы мы могли использовать их на этом этапе
//мы хотим зарегистрировать правильный ответ с сообщением на консоли.
Хорошо, теперь у нас есть представление о том, чего мы хотим. Давайте теперь попробуем закодировать каждый шаг на основе приведенного выше псевдокода. Также небольшое примечание: не волнуйтесь, если ваш обычный псевдокод отличается от того, как это делаю я. Цель состоит в том, чтобы помочь нам разбить то, что мы хотим сделать, чтобы нам было легче понять. Делайте то, что работает для вас. Хорошо, идем дальше.
Вставить скриншот 1
**Примечание:
Чтобы проверить, как функция регистрируется в консоли, вам нужно не забыть вызвать функцию перед запуском команды терминала node index.js.
Это было не так уж плохо, верно? На следующем.
Вставить скриншот 2
Здесь мы добавили оператор «if», чтобы он возвращался только в том случае, если введенные пользователем данные совпадают с элементом в массиве операций. Теперь переходим к номеру 3 в нашем списке.
Вставить скриншот 3
С помощью этого оператора else, если мы не получим совпадения, он запишет в консоль наше сообщение об ошибке, а также вызовет функцию getOperation() для повторного запуска.
Вставить скриншот 4
Довольно сильно, да! На этом этапе, если вы еще не ознакомились с документацией readlineSync, бегло просмотрите ее. Существует множество других типов, таких как вопросInt, которые могут помочь нам бог знает с чем еще. Вам не нужно запоминать их или что-то в этом роде. Важно просто знать о них и знать, как их найти позже. Вы всегда можете поискать что-нибудь. Эта сфера карьеры – это, по сути, тест открытой книги! Вас не проверяют на знание. Ваша работа — решить проблему и использовать для этого код. Есть миллион способов сделать то же самое, верно? Хорошо, вернемся к задаче.
А теперь эй, подожди.
Теперь что-то не так. Если вы до сих пор использовали свой терминал, чтобы проверить, работает ли каждый шаг, с помощью команды node index.js, вы увидите, что, если мы не вызовем ошибку из оператора if, он не перейдет в журнал консоли. переменная firstNumber. Это из-за возврата. Вызвав функцию в операторе else, она продолжит работу над остальной частью кода, поскольку возврат был получен только «внутри» нее. Так что же мы можем сделать, чтобы это исправить? Давайте поменяем их местами. Добавив знак «!» нашему утверждению «Если» мы говорим противоположное ему. Представьте, что это читается так: операции НЕ включают оператор. Теперь избавьтесь от возврата, потому что мы хотим, чтобы оно продолжалось отсюда.
Вставить скриншот 4, исправление ошибки
Хорошо, ты в порядке? Мы впорядке? Протестировано, поймите это, передохните и идем дальше.
Вставить скриншот 5
Сейчас мы можем пропустить этот момент, потому что вопросInt уже добавляет сообщение об ошибке и снова вызывает функцию. Осталось еще немного, идем дальше. Больше не нужно здесь бездельничать. Говоря о…
Вставить скриншот 6
Посмотрите, две простые части подряд! Та же проблема, другое имя, поймите это хорошо, чтобы наслаждаться игрой! Легко до этого момента, правда? Что ж, теперь нам предстоит самое интересное! Всеми любимый предмет в школе! Математика! А не ___ ли нам?
Все, что я пробовал, просто распечатывало числа и операторы в виде строки. Например, 6 * 5 вместо 30. В итоге я использовал «простую» форму длинного кода, состоящую из набора операторов «if».
В этом произведении есть вторая часть:
Вставьте скриншот 7 — части 1 и 2 — Теперь ваш калькулятор должен работать
Довольно круто, да? Я правда тоже так думала! В версии, которую я сдал в класс, эта маленькая ошибка цикла не была исправлена, но, как только мне удалось ее исправить на следующий день, я получил электронное письмо с исправленным заданием. Мой инструктор очень мило напомнил мне о написании хорошего кода. Что нам всем следует выработать в привычке.
Мой инструктор, обладающий многолетней мудростью за плечами, напомнил мне, что каждая функция должна выполнять только одну задачу. Чтобы быть хорошим, он должен следовать принципу единой ответственности. Итак… если у вас есть функции в функциях, ваш код груб. С каждой функцией вы берете небольшой кусок и стремитесь получить именно то, что вам нужно. По сути, у нас есть одна мегафункция, которая собирает информацию для трех разных входных данных, а затем творит с ними математическую магию. Это 4 вещи! Стыд! Бендер Родригес никогда бы!!! Следующее, что вам нужно для хорошего кода, — это удалить все повторяющиеся вещи. У нас есть петли по причинам. Хороший код — DRY. НЕ ПОВТОРЯЙТЕ СЕБЯ. Меньше кода — лучший код. Наконец, сделайте свой код многоразовым. Мы можем использовать код, который напишем, в будущих проектах или даже в других областях того же проекта. Это сэкономит вам очень много времени, если вы создадите собственную папку с повторно используемым кодом, который вы уже умеете использовать. Да, научиться программировать — это главное. Не стоит слишком полагаться на это, если вы сделаете хороший проект. Просто на большинстве работ могут быть повторяющиеся задачи, и жизнь станет немного проще, если вы сможете быстро их решить.
Это подводит нас к следующему этапу процесса кодирования, который мы станем лучше, если попрактикуемся, — рефакторингу!
***Перед тем, как продолжить, не стесняйтесь сделать паузу.
***Хорошо, предположим, что вы готовы действовать, раз уж читаете это предложение!
Разделите на отдельные функции:
Наша мегафункция getOperation() выполняет четыре действия. В идеале нам нужно как минимум четыре функции. Нам нужно получить оператор, первое число, второе число, а затем выполнить над ними математические вычисления. Назовем функции getOperator, getFirstNumber, getSecondNumber и mathWiz. Прежде чем продолжить обучение, остановитесь на минутку и посмотрите, что мы уже сделали. Можете ли вы провести его рефакторинг сейчас, когда вы понимаете процесс немного лучше? Не торопись. Вы можете вернуться к этому моменту и продолжить, когда закончите. Не волнуйся, я подожду.
***урок приостановлен****
Хорошо, я подождал.
Прежде чем мы начнем, давайте представим две новые вещи, о которых мы узнали, просматривая документацию readlineSync. Я сначала не совсем понял. Мне было трудно это понять, и поиск в Google особо не поможет, если вы не знаете точно, что именно пытаетесь понять. Говорят, со временем и это, очевидно, станет легче… К счастью, когда мою работу исправили, мой инструктор указал на несколько полезных, которые помогут моему коду стать короче и аккуратнее. Методы setDefaultOptions(), limit и limitMessage. Подробнее о них можно прочитать в документации, указанной вначале. Он делает именно то, на что похоже. Ограничение позволяет нам добавлять варианты, из которых мы хотим, чтобы пользователь мог выбирать. Если пользователь введет что-нибудь еще, оно будет отклонено и вызвано снова само по себе! LimitMessage — это сообщение об ошибке по умолчанию. Когда мы добавим его, мы можем изменить значение по умолчанию, чтобы оно говорило все, что мы хотим!!! Ребята, не позволяйте силе ударить вам в голову. Пойдем!
Поскольку теперь мы стали намного мудрее, давайте продолжим и создадим 4 функции, используя самый простой код, который мы можем, и то, что мы знаем сейчас.
Вставьте 3 скриншота для отдельных функций
Возможно, вы заметили, что из-за создания четырех отдельных функций наш mathWiz не может получить доступ к переменным. Нам нужно расширить их область действия, инициализировав их вне функции. Это один из способов сделать это, но если вам не терпится попробовать что-то еще, не позволяйте мне вас останавливать.
Сделайте переменные доступными для других функций:
Мой инструктор напомнил мне, что хороший код должен располагаться в относительно легко распознаваемом порядке. Переменные вверху, функции посередине и логика, используемая для вызова этих функций, внизу. Что касается логики, мы просто размещали под нашими функциями такие вещи, как getOperator(), чтобы вызывать их. Когда вы станете более опытным разработчиком, вы обнаружите причудливые способы, похожие на кошачью пижаму, которые вам нравятся! Так что вперед и пробуйте что-то новое.
Давайте создадим все наши переменные вверху, присвоив им значение null. Удалите все «let» в ваших функциях. Как только вы это сделаете, вы сможете передать их в функцию mathWiz в качестве аргумента.
Вставить скриншот новых переменных(1006)
Вставить скриншот mathWiz()
Далее, чтобы все было аккуратно и в порядке, поместите всю логику внизу.
Чтобы завершить уроки, которые преподал мне мой учитель, хороший код не должен повторяться и его можно использовать повторно! Это хорошие практики написания кода! Приятно, правда? Что ж, это руководство, которое поможет лучше понять, для чего можно использовать readlineSync, создав приложение-калькулятор. Я считаю, что мы это сделали. Так что катайтесь! Вамуз! Я выполнил свою часть сделки! Вы получили то, за чем пришли сюда! Однако!!… Я призываю вас взглянуть на наш готовый код на данный момент и посмотреть, сможете ли вы применить эти передовые методы. Он не СУХОЙ и не подлежит повторному использованию. Еще. Давайте посмотрим, готовы ли вы к этому, и если да, дайте нам всем посмотреть, опубликовав свой код в комментариях! Вот законченный вид того, что у нас получилось:
Вставьте скриншот готового кода
Я надеюсь, что вам понравился этот урок, вы нашли его информативным и хотя бы немного интересным! Разве вам не нравится «Учиться по кусочкам»?! До следующего раза! TTFN, та-та, пока!
