Kể từ khi Node.js nổi lên, chúng ta đã thấy ngày càng nhiều ứng dụng console được phát hành hơn bao giờ hết. Đôi khi nếu bạn không cần sự phức tạp của việc viết giao diện người dùng, thì kết quả đầu ra của bảng điều khiển là đủ. Tuy nhiên, theo mặc định, đầu ra của ứng dụng Node.js hiển thị dưới dạng văn bản màu trắng đơn giản trên nền đen.










Điều này có nghĩa là bạn rất dễ làm lộn xộn chế độ xem ứng dụng hoặc bỏ lỡ các thông tin quan trọng. Trong bài viết này, chúng ta sẽ tìm hiểu cách triển khai màu bảng điều khiển và cách sử dụng Chalk, Colors.js và Color-CLI để giúp chúng ta.






you are watching: Sử dụng màu bảng điều khiển với Node.js

Sự cố thiếu màu bảng điều khiển trong ứng dụng Node.js

Hãy tưởng tượng ứng dụng ví dụ của chúng tôi bên dưới sử dụng Node.js để kết nối với một điểm cuối và truy xuất một số dữ liệu.

Chúng tôi thực sự không thực hiện bất kỳ công việc nặng nhọc nào khi kết nối với các điểm cuối này, thay vào đó, chúng tôi chỉ đơn giản là tạo ra một đầu ra mà chúng ta thường có thể mong đợi thấy từ một ứng dụng như thế này.

Tuy nhiên, trong một ứng dụng như thế này, chúng tôi sẽ bị cám dỗ để viết văn bản làm đầu ra cho bảng điều khiển của chúng tôi. Có thể chúng ta vô cùng bận rộn và không cảm thấy có thời gian để thêm màu sắc vào ứng dụng của mình hoặc đơn giản là nó không qua tâm trí của chúng ta.

Cho dù lý do có thể là gì, đầu ra của ứng dụng Node.js trên bảng điều khiển đơn giản của chúng tôi trông giống như sau:

Đầu ra của một ứng dụng Node.js Console đơn giản

Nếu bạn đọc kết quả đầu ra với tư cách là người tạo ra chương trình, bạn sẽ biết phải tìm kiếm điều gì, thấy rằng có khá nhiều lần thử kết nối trước khi kết nối thành công, chỉ nhận được một phần tập hợp kết quả và bạn biết cách khắc phục.

Tuy nhiên, nếu bạn làm việc theo nhóm và những người khác sử dụng tập lệnh này, những người khác nhau có thể diễn giải kết quả theo cách khác nhau.

Nếu tập lệnh này chạy như một phần của hoạt động đã lên lịch hoặc là một phần của chuỗi tập lệnh lớn hơn, thì rất có thể mọi người sẽ bỏ qua đến dòng cuối cùng và hiểu All finished khi mọi thứ hoạt động như dự định.

Để mang đến cho người dùng ấn tượng phù hợp, chúng tôi có thể sử dụng các khía cạnh trực quan để chỉ ra rõ ràng mọi thứ có hoạt động như dự định hay không hoặc có điều gì không thành công hay không. Đó là nơi xuất hiện các màu giao diện điều khiển của chúng tôi.

Triển khai màu bảng điều khiển trong ứng dụng Node.js

Để sử dụng màu bảng điều khiển trong ứng dụng Node.js của chúng tôi, trước tiên chúng tôi phải hiểu những gì đang xảy ra.

Các chương trình tạo ra kết quả đầu ra văn bản đã tồn tại trong nhiều thập kỷ, vì vậy các tiêu chuẩn liên quan cho phép chúng ta thực hiện những thay đổi màu sắc này có thể cảm thấy hơi sơ khai. Chúng ta phải hiểu cách chúng ta có thể sử dụng mã thoát để báo hiệu cho bảng điều khiển rằng chúng ta muốn thay đổi màu của đầu ra.

Thông thường, bảng điều khiển của chúng tôi in văn bản mà chúng tôi cung cấp cho nó qua console.log. Tuy nhiên, nếu chúng ta gửi một ký tự thoát (x1b) và một trình tự nhất định ([33m ) vào bảng điều khiển, bảng điều khiển thực sự bắt chuỗi trước khi in nó, do đó cho phép cấu hình thiết bị đầu cuối cơ bản.

Trong trường hợp này, chúng tôi sử dụng nó để nói với bảng điều khiển rằng chúng tôi muốn thay đổi màu sắc.

Sau đó, chúng ta cần phải hoàn thành hai việc: đầu tiên, chúng ta phải thay đổi màu sắc của văn bản theo ý muốn và thứ hai, chúng ta phải đặt lại màu của bảng điều khiển trở lại như trước khi chúng ta thay đổi nó. Nếu không, tất cả đầu ra sau thời gian đó sẽ là màu mà chúng tôi đã chọn.

Vì vậy, nếu chúng tôi muốn in, “Chào mừng bạn đến với ứng dụng!” màu vàng, đây sẽ là của chúng tôi console.log bản tường trình:

console.log('x1b[33m Welcome to the app! x1b[0m');

Và kết quả như sau:

see more : Lighthouse meets GitHub Actions: How to use Lighthouse in CI

Thay đổi đầu ra màu

Mặc dù chúng ta có chuỗi màu vàng, nhưng chuyện quái gì đang xảy ra với dấu ngoặc vuông và dấu gạch chéo ngược? Hãy phá vỡ nó.

Sử dụng các ký tự điều khiển để tô màu đầu ra của chúng tôi

x1b là một nhân vật điều khiển điều đó cho biết với bảng điều khiển rằng chúng tôi muốn làm điều gì đó không liên quan đến việc thực sự in văn bản vào bảng điều khiển. Mọi thứ được viết sau ký tự điều khiển này, trên cùng một dòng, cấu hình thiết bị đầu cuối theo một cách nào đó.

Sau ký tự điều khiển của chúng tôi, chúng tôi chỉ định những gì chúng tôi muốn làm. Trong trường hợp này, chúng tôi muốn thay đổi ký tự màu vàng cho nền trước của chúng tôi, ký tự này có ID là 33 in bảng màu ANSI. Bằng cách đặt [33m sau ký tự điều khiển ban đầu của chúng tôi, chúng tôi chuyển màu đầu ra của bảng điều khiển thành màu vàng.

Chúng tôi có khá nhiều màu sắc để lựa chọn, nhưng có một số ưu và nhược điểm của cách tiếp cận này.

Tin tốt là chúng tôi không giới thiệu sự phụ thuộc mới vào dự án Node.js của chúng tôi và ứng dụng của chúng tôi sẽ tạo ra màu sắc chính xác trên hàng triệu máy tính trên khắp thế giới.

Tin xấu là mã của chúng tôi trở nên hơi khó hiểu. Mọi người sẽ không trực giác biết rằng chúng tôi đặt các ký tự trên bảng điều khiển của mình thông qua chuỗi này và việc duy trì mã này trong tương lai có thể trở thành một vấn đề.

Thật khó chịu khi tham chiếu một bảng khi tất cả những gì chúng ta muốn làm là tô màu đầu ra bảng điều khiển của chúng ta. Chúng ta cũng phải nhớ luôn đặt x1b[0m sau khi sử dụng màu sắc để bảng điều khiển đặt lại về bảng màu mặc định.

May mắn thay, như thường lệ trong thế giới Node.js, không chỉ có một gói có thể giúp chúng ta. Chúng ta sẽ xem xét ba tùy chọn phổ biến cho màu CLI.

Phấn

Chalk là một cách đơn giản để đưa màu của bảng điều khiển vào dự án Node.js của bạn. Cam kết cuối cùng xảy ra vào ngày 26 tháng 11và một phiên bản chính vừa được phát hành (v5.0.0).

Một tính năng hay khác của Phấn là nó không kéo dài String.prototype. Việc mở rộng các đối tượng gốc trong JavaScript về cơ bản thay đổi việc triển khai một hàm tích hợp và thường được coi là một ý tưởng tồi.

Điều này là bởi vì nếu library 1 đặt một chức năng trên String thích .colorify, và sau đó library 2 thiết lập chức năng riêng của nó .colorify trên String triển khai, thư viện thứ hai sẽ ghi đè thư viện đầu tiên. Đó rõ ràng là một vấn đề khá lớn cần gỡ lỗi.

Cú pháp cũng dễ hiểu và dễ sử dụng.

Đối với mẫu mã của chúng tôi, hãy chỉ định console.log đến một giá trị không đổi của log vì vậy chúng tôi có thể truy cập nó dễ dàng hơn một chút. Sau đó, chúng ta có thể sử dụng chalk chức năng với các lệnh gọi hàm thích hợp để có được màu sắc mà chúng ta muốn. Nhìn chung, nó trông như thế này:

import chalk from 'chalk';
const log = console.log;
chalk.level = 1; // Use colours in the VS Code Debug Window
log(chalk.yellow('Welcome to the app!'));
for (var i = 0; i <= 10; i++){
    log(chalk.white('Attempting to connect to endpoint, attempt ' + i));
}
log(chalk.green('Connection established! Sending statistics'));
log(chalk.red('Not all statistics are available...'));
log(chalk.redBright('Endpoint disconnected before all results were received'));
log(chalk.magenta('All finished'));

Và kết quả như sau:

Sử dụng phấn để thay đổi màu đầu ra

Rõ ràng, sở thích của bạn có thể khác nhau và bạn có thể không muốn sử dụng nhiều màu như vậy trong ứng dụng bảng điều khiển của mình. Nhưng, chúng ở đó nếu bạn muốn sử dụng chúng.

Gán các chủ đề cơ bản với Chalk

Chúng tôi cũng có tùy chọn để gán một số chủ đề cơ bản cho màu sắc của chúng tôi. Ví dụ: để đặt màu chung cho các lỗi hoặc cảnh báo của chúng tôi, bạn chỉ cần gán các chức năng thích hợp cho tên, như sau:

const error = chalk.red;
const warning = chalk.bgRed; // Orange color

console.log(error('Error!'));
console.log(warning('Warning!'));

see more : Realme Link app V2.0.141.42 adds new features and optimizations with the latest update

Đầu ra của mã này như mong đợi:

Chỉ định một màu phổ quát cho các lỗi hoặc cảnh báo

Bạn có thể trộn và kết hợp các phong cách này tùy ý và tùy theo yêu cầu của ứng dụng.

Colors.js

Colors.js là một cách khác để thay đổi màu sắc trong ứng dụng Node.js của bạn. Tuy nhiên, nó mở rộng String.prototype. Chúng ta đã xem xét lý do tại sao đây thường là một ý tưởng tồi, nhưng nó giúp cho việc gọi màu dễ dàng hơn một chút trong ứng dụng của bạn.

Cam kết cuối cùng cho Colors.js là trong Tháng 1 năm 2020. Có lẽ chỉ có rất nhiều cách bạn có thể tô màu một bảng điều khiển, nhưng không có bất kỳ thay đổi nào trong hai năm qua tại thời điểm viết bài, có thể an toàn khi cho rằng nó đã bị bỏ rơi vào thời điểm này.

Tuy nhiên, điều đó không có nghĩa là nó không hoạt động, nhưng bạn nên biết rằng việc hỗ trợ có thể khó khăn hơn nếu bạn sử dụng nó.

Sử dụng Colors.js trong ứng dụng của bạn trông giống như sau:

var colors = require('colors');

colors.enable()

console.log('Error!'.underline.red);
console.log('Warning!'.red);
console.log('This is okay!'.green);

Và kết quả của việc này là:

Sử dụng Colors.js để thay đổi màu sắc trong Node.js

Thật tiện lợi khi có thể gọi các hàm này trực tiếp trên một chuỗi, nhưng thực tế là gói này gây ô nhiễm String triển khai trong JavaScript.

Rốt cuộc, có .red ngay bên cạnh .indexOf cảm thấy sai và sử dụng một gói sửa đổi chức năng của một cái gì đó cơ bản như String có vẻ như là một mệnh đề đáng sợ. Nó cũng đã được chứng minh là gây ra các vấn đề, vì vậy hãy sử dụng nó một cách thận trọng (hoặc có thể hoàn toàn không sử dụng).

CLI-Màu

Tùy chọn thứ ba để tô màu bảng điều khiển của chúng tôi có dạng CLI-Color. Nó có rất nhiều điểm chung với Chalk vì nó không sửa đổi String.prototype thực hiện.

Nó được cập nhật lần cuối vào ngày 16 tháng 10, vì vậy nó vẫn được duy trì tích cực.

Cách sử dụng CLI-Color trông như thế này:

var clc = require("cli-color");

console.log(clc.red.underline("Error!"));
console.log(clc.red("Warning!"));
console.log(clc.green('This is okay!'));

Và đầu ra của chúng tôi trông như thế này:

Sử dụng CLI-Color để tô màu cho bảng điều khiển của bạn

Sự kết luận

Tô màu bảng điều khiển của bạn trong Node.js là một cách dễ dàng để làm cho đầu ra của ứng dụng của bạn dễ đọc hơn. Bạn không thiếu các lựa chọn khi hoàn thành điều này, nhưng nếu bạn muốn thực hiện điều này với một gói, có vẻ như Chalk là lựa chọn toàn diện và cập nhật nhất.

Chúc bạn tô màu vui vẻ! 🎨

200 chỉ Giám sát các yêu cầu mạng không thành công và chậm trong quá trình sản xuất

Triển khai một ứng dụng web hoặc trang web dựa trên Node là một phần dễ dàng. Đảm bảo phiên bản Node của bạn tiếp tục cung cấp tài nguyên cho ứng dụng của bạn là lúc mọi thứ trở nên khó khăn hơn. Nếu bạn quan tâm đến việc đảm bảo các yêu cầu đối với dịch vụ phụ trợ hoặc bên thứ ba thành công, thử LogRocket. https://logrocket.com/signup/

LogRocket giống như một DVR cho web và ứng dụng di động, ghi lại mọi thứ diễn ra theo đúng nghĩa đen trong khi người dùng tương tác với ứng dụng của bạn. Thay vì đoán lý do tại sao sự cố xảy ra, bạn có thể tổng hợp và báo cáo về các yêu cầu mạng có vấn đề để nhanh chóng hiểu được nguyên nhân gốc rễ.

LogRocket thiết bị ứng dụng của bạn để ghi lại thời gian hiệu suất cơ bản như thời gian tải trang, thời gian đến byte đầu tiên, yêu cầu mạng chậm và cũng ghi lại các hành động / trạng thái Redux, NgRx và Vuex. .

seo marketing wordpress seo seo hosting seo and marketing word press seo wordpress and seo wordpress marketing hosting seo seo press pro market seo seo & marketing seo e marketing e marketing seo seo pro wordpress marketing & seo seo di wordpress wordpress seo host hosting and seo wordpress hosting seo wordpress seo wordpress wordpress for marketing seo press wordpress marketing for seo

The source: https://nguyendiep.com
Category: SEO

Similar Posts

Leave a Reply

Your email address will not be published.