Практикуйте свои навыки работы с Node.js-терминалом, создавая свои собственные счетчики командной строки.
В моем последнем посте мы увидели, как реализовать индикатор выполнения в терминале с помощью Nodejs. Здесь мы продолжим серию CLI и реализуем счетчики в терминале с помощью Nodejs.
Концепция
Вопрос в том, как сделать что-то вроде Material Design, индикаторов выполнения Bootstrap в терминале. Это кажется невозможным, но это возможно.
В моей предыдущей статье мы знаем, что терминал разделен на ячейки в плоскости x-y, как график с осями x и y.
Он начинается с (x, y) (0, 0) в положительной плоскости. Терминал по умолчанию начинается с 0, 0, т.е. курсор помещается в 0, 0. Текущая позиция курсора определяет, куда данные будут записаны в следующий раз.
Если мы поместим курсор в (x, y) (9, 5), данные начнутся с позиции (x, y) (9, 5). И это можно сделать с помощью readline API readline#cursorTo(stdout, int x: Number, int y: Number) в Nodejs.
Теперь у нас есть это знание.
Чтобы получить такой эффект вращающейся линии:
Мы знаем, как вращать линию, мы начинаем с этого -, затем против часовой стрелки, у нас есть \, затем | и последний /. Затем мы снова начинаем с - по /. Теперь, если мы сможем сделать это довольно быстро, мы получим эффект вращения в нашем терминале.
- \ | /Поэтому все, что нам нужно сделать, это быстро написать _14 _, _ 15 _, _ 16_, / в одной и той же ячейке.
Чтобы сделать это в JavaScript, сначала мы будем хранить _18 _, _ 19 _, _ 20_, / в массиве. Мы настроим индексную переменную для хранения текущей позиции индекса в массиве. Затем мы установим временной интервал с setInterval API.
Мы дадим время 100 мс, чтобы он очень быстро выполнял обратный вызов функции для достижения эффекта вращения. Обратный вызов функции будет извлекать текущий тип строки из массива, используя индекс, который мы объявили ранее. Затем мы пишем тип линии с помощью process.stdout.write API. Использование этого API заставит курсор перейти к следующей ячейке, нет, мы этого не хотим. Итак, мы используем API readline#cursorTo, чтобы установить курсор обратно в предыдущую ячейку, поэтому при следующем вызове следующий тип строки в массиве будет записан в ту же ячейку.
Итак, когда все это выполняется на скорости 100 мс, мы увидим эффект вращения.
Совет: с легкостью повторно используйте небольшие модули в своих JS-проектах.
Используйте Bit, чтобы легко разрабатывать, изолировать и публиковать небольшие модули в ваших различных проектах. Не устанавливайте библиотеки целиком и не копируйте и не вставляйте код, если вы можете быстрее создавать с помощью небольших повторно используемых модулей. "Взглянем".
Создание счетчика в Nodejs
Создайте проект Node, откройте файл index.js и добавьте следующий код:
Запустите файл, чтобы увидеть эффект:
node .
Добавление множества эффектов
Пойдем стильно. Мы не можем добиться единственного эффекта ['-', '\', '|', '/']. Мы можем заставить наш класс Spinner отображать различные эффекты, для этого мы создадим файл spinners.json.
Это будет иметь разные эффекты:
spinners.json:
Рассматривайте это как объект, обладающий разными эффектами. Смотрите, каждый эффект имеет свой временной интервал. Свойство frames содержит последовательность, в которой оно будет отображаться. Обратите внимание, что у объекта arc есть кадры, которые при рендеринге на 100 мс создают эффект дуги.
У нас есть объекты с точками, эти объекты с точками отображают эффект точек при быстром отображении с частотой кадров 80 мс.
Теперь мы проведем рефакторинг нашего класса Spinner, чтобы он содержал наше новое дополнение.
Поскольку у нас есть spinners.json, мы используем fs#fsReadSync API, чтобы взять файл json и прочитать его содержимое в переменную spinners.
У метода spin теперь есть аргумент spinnerName, который содержит имя эффекта в spinners.json файле. С помощью имени эффекта мы извлекаем из переменной спиннеров эффект и сохраняем значения frames и interval в spinnerFrames и spinnerTimeInterval соответственно.
На spinnerFrames теперь будет ссылаться, чтобы получить следующий стиль кадра, а на spinnerTimeInterval будет передано setInterval, чтобы установить временной интервал для выполнения обратного вызова функции.
Теперь, чтобы запустить Spinner, мы создаем экземпляр и вызываем метод spin с именем желаемого эффекта.
// index.js
...
new Spinner().spin("dots")
Здесь будет крутиться эффект dots.
// index.js
...
new Spinner().spin("dots2")
Будет показан эффект dots2.
// index.js
...
new Spinner().spin("line")
Это покажет наш предыдущий line эффект.
// index.js
...
new Spinner().spin("arc")
Это покажет эффект дуги.
Заключение
Видите, как это было легко. Мы использовали setInterval API, process.stdout.write и readline # cursorTo и рамки стиля для создания эффекта.
Вы можете пойти дальше и добавить свои собственные эффекты. Вы также можете написать свою реализацию лучше, чем мою. Хотелось бы посмотреть, что у вас получится.
Если у вас есть какие-либо вопросы относительно этого или чего-либо, что я должен добавить, исправить или удалить, не стесняйтесь комментировать, писать мне по электронной почте или в прямом сообщении.
Спасибо !!!
