Рубрики
Без рубрики

Как сделать свой консоль выходом и интерактивным в JavaScript и Node.js

В этом руководстве вы узнаете, как добавить рандомизированную задержку для операторов Console.log в JavaScript и Node.js. Почему вы хотите сделать это? Прежде всего, программирование должно быть весело. И делать скучную вещь, такую как Console.log выглядит красиво, очень приятно. если ты

Автор оригинала: Vasyl Lagutin.

В этом руководстве вы узнаете, как добавить рандомизированную задержку для console.log Заявления в JavaScript и Node.js.

Почему вы хотите сделать это?

Прежде всего, программирование должно быть весело. И делать скучную вещь, как console.log Хорошо выглядеть очень приятно.

Если вы хотите получить быстрый доступ к исходному коду, вы можете проверить это Github Repository Отказ

Шаг 1: Создайте функцию, которая принимает строку и передает ее в Console.log

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

const log = (s) => {
  console.log(s);
}

Шаг 2: Журнал символов строки One-One-One

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

Давайте добавим для Структура, которая итерация на каждую букву строки и печатает его к консоли.

const log = (s) => {
  for (const c of s) {
    console.log(c);
  }
}

Шаг 3: Как исправить выпуск новой строки

Теперь каждая буква печатается на новой строке как каждый звонок на console.log Добавляет пустую строку.

Мы заменим console.log с процесс .stdout.write.write. Что по существу делает то же самое, но не добавляет новую строку после вывода.

Однако, однако, мы потеряли новую линию в самом конце вывода, что все еще желательно. Мы добавим его, явно печатаю \ N персонаж.

const log = (s) => {
  for (const c of s) {
    process.stdout.write(c);
  }
  process.stdout.write('\n');
}

Шаг 4: внедрить функцию сна

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

Это должно принять один параметр MS и вернуть обещание, которое решает после задержки MS Миллисекунды.

const sleep = (ms) => {
  return new Promise(resolve => setTimeout(resolve, ms));
};

Шаг 5: Добавьте задержку

Итак, мы готовы добавить задержку нашему выводу! Нам нужна пара вещей здесь:

  • Добавить параметр задержка к функции бревно
  • сделать функцию Журнал асинхронно путем добавления ключевого слова async.
  • Звоните Спать Функция, которая задержит следующую петлю итерацию задержка Миллисекунды
const sleep = (ms) => {
  return new Promise(resolve => setTimeout(resolve, ms));
};

const log = async (s, delay) => {
  for (const c of s) {
    process.stdout.write(c);
    await sleep(delay);
  }
  process.stdout.write('\n');
}

Шаг 6: Внедрить рандомизированную задержку

Вывод будет выглядеть еще лучше, если мы рандомизируем время.

Давайте добавим еще один логический параметр рандомизированные к функции бревно . Если это правда, то аргумент прошел в Спать должно быть в диапазоне от 0 к задержка Миллисекунды.

const sleep = (ms) => {
  return new Promise(resolve => setTimeout(resolve, ms));
};

const log = async (s, delay, randomized) => {
  for (const c of s) {
    process.stdout.write(c);
    await sleep((randomized ? Math.random() : 1) * delay);
  }
  process.stdout.write('\n');
}

Я использовал тройной оператор, но вы можете заменить его регулярным Если утверждение:

if (randomized) {
  sleep(Math.random * delay);
} else {
  sleep(delay);
}

Шаг 7: Сделайте лог настраиваемый

Прямо сейчас мы внедрили почти все, что мы хотели. Но призывает это не очень чисто, как мы должны пройти задержка И флаг рандомизации каждый раз, когда мы хотим распечатать что-то в консоли.

log('Hello, world!', 100, true);
log('What\'s up?', 100, true);
log('How are you?', 100, true);

Было бы здорово, если бы мы могли бы иметь настраиваемый журнал, который можно назвать с одним параметром – строка, которую мы хотим выводить.

Для этого нам придется переписать наш код. Вот план:

  • Оберните все текущие функциональные возможности в одну функцию Funkylog который принимает объект с 2 полями, задержка и рандомизированные
  • Funkylog должен вернуть анонимную функцию стрелки. Его реализация должна быть такими же, как бревно , что мы внедрены на шаги с 1 по 6
  • Параметры задержка и рандомизированные следует удалить из Журнал Функция, как сейчас они будут переданы из Функилог
const funkylog = ({ delay, randomized }) => {
  const sleep = (ms) => {
    return new Promise(resolve => setTimeout(resolve, ms));
  };
    
  return async (s) => {
    for (const c of s) {
      process.stdout.write(c);
      await sleep((randomized ? Math.random() : 1) * delay);
    }
    process.stdout.write('\n');
  }
};

Шаг 8: Добавьте окончательное прикосновение

Давайте посмотрим на то, что у нас есть:

const log = funkylog({ delay: 100, randomized: true });

log('Hello, world!');
log('What\'s up?');
log('How are you?');
  • Мы можем создать настраиваемый регистратор, используя функцию Функилог
  • Мы можем выбрать любую задержку мы хотим
  • Использование регистратора не требует от нас, чтобы пройти задержка каждый раз, когда мы называем это

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

const funkylog = ({ delay = 100, randomized }) => {
    ..
    ..

Итак, теперь мы можем создать Funkylog Без каких-либо аргументов, и это все равно будет работать!

const log = funkylog();

console.log('Hello, world!');

Идеи по улучшению

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

Сделать дальнейшие улучшения для Funkylog И дайте мне знать, как выглядят ваши результаты! Например, вы можете спешить на выходе, окрашивая его. Вы можете использовать NPM модуль Мел для этого.

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

Спасибо за пребывание со мной, на протяжении всего учебника! Я пишу в блоге программирования на Узнайте .Coderslang.com и построить Полный стек JS курс Отказ

Если у вас есть отзывы или вопросы в этом руководстве, не стесняйтесь Tweet Me @Coderslang или прыгайте в обсуждение на телеграмме @coderslang_chat

Оригинал: “https://www.freecodecamp.org/news/how-to-make-your-console-log-statements-look-fun-and-interactive/”

Читайте ещё по теме: