preface

In the development process, we always encapsulate some public functions as our tools to simplify code or reuse code, for this purpose, I intend to organize my daily work of some encapsulated utility functions, this article mainly want to achieve the following console output effect, next take a look.

series

1. Deep and light copy of front-end toolkit

2. Date formatting of the front-end toolkit

3. Anti-shake function of front-end kit

4. Front-end kit widgets

5. Front-end toolkit log beautification

background

As a front-end developer, console debugging of F12 is unavoidable, and during front-end debugging we often write console.log to print out the parts we want to debug on the console, as shown below

However, if this debugging is too much, we may not be able to distinguish the context or print within a function, so sometimes I will print extra lines and instructions, such as

Although this is relatively clear, but sometimes because of the number of lines and the same color, it is not convenient to distinguish and not beautiful. Since I’m a VUE developer, I came across an output like this

Out of curiosity I clicked on sources and found a snippet of code like this

    src_bridge.on('log-detected-vue', () => {
      console.log(
        `%c vue-devtools %c Detected Vue v${Vue.version} %c`,
        'background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px; color: #fff'.'background:#41b883 ; padding: 1px; border-radius: 0 3px 3px 0; color: #fff'.'background:transparent')})Copy the code

Console has a number of methods, such as grouping, dir, table, and so on, which can be used to print different contents for different outputs

Formatted output

The formatted output of log has several placeholders

Example 1

console.log("Welcome % S and %s, two new students.".'Ming'.'zhang');

console.log("The integer part of PI: %d, with decimal: %f", 3.1415, 3.1415);Copy the code

Just open f12 and type in the top two lines to get the following output

Example 2

console.log("%c I am green slant font"."color: green; font-style: italic");

console.log("% C I am 3D style"." text-shadow: 0 1px 0 # CCC,0 2px 0 #c9c9c9,0 3px 0 # BBB,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0, 25),0 10px 10px rgba(0,0,0,.2),0 20px 20px 20px Rgba (0, 0, 15); font-size:5em");

console.log('%c color band '.'Background-image :-webkit-gradient(linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), Color - stop (0.3, # 22 f), color - stop (0.45, # 2 (ff), color - stop (0.6, # 2 f2), color - stop (0.75, # 2 f2), color - stop (0.9, # ff2), color-stop(1, #f22) ); color:transparent; -webkit-background-clip: text; font-size:5em; ');

console.log('%c I am output with background.'.'color: #fff; background: #f40; font-size: 24px; ');
Copy the code

Copy the above to the console and you will get the following output

Now, we can start to implement the packaging of our own color output tool functions. So let’s look at the code

Tool encapsulation

For example, Element provides default colors for primary, success, info, Warning, danger, etc. We also want to implement non-state custom colors. So we need an auxiliary function that gets the color value, and a function that actually outputs, and the library has to have some quick output,

1. The first is an auxiliary function that gets the color value. This function has six default styles of colors and can also be returned by passing in standard color characters.

/** * @description returns the color value of this style * @param {String}typeThe style name [primary | success | warning | danger | info] * /function typeColor (type = 'default') {
  let color = ' '
  switch (type) {
    case 'primary':
      color = '#2d8cf0'
      break
    case 'success':
      color = '#19be6b'
      break
    case 'info':
      color = '# 909399'
      break
    case 'warning':
      color = '#ff9900'
      break
    case 'danger':
      color = '#f03f14'
      break
    case 'default':
      color = '#35495E'
      break
    default:
      color = type
      break
  }
  return color
}
Copy the code

2. General color printing method, here we call the function print, literally print

const log= {} // define an object /** * print method * @param text Output text * @paramtypeOutput style, can be 6 state values, can be custom color * @param back whether color value applied to background color */ log.print =function (text, type = 'default', back = false) {
  if (typeof text === 'object') {// If it is an object, call the print object method console.dir(text)return
  }
  if(back) {// Print console.log(' %c 'with background image${text} `,
      `background:${typeColor(type)}; padding: 2px; border-radius: 4px; color:#fff; `)}else {
    console.log(
      `%c ${text} `,
      `color: ${typeColor(type)}; `)}}Copy the code

I’m going to make a decision here, because what we’re going to print is probably an object. If it’s an object, we’re going to print it directly using dir. If it’s a string, we’re going to print it according to the configuration

// log. Print ('======= color font ======')
log.print('this is default log')
log.print('this is primary log'.'primary')
log.print('this is success log'.'success')
log.print('this is info log'.'info')
log.print('this is warning log'.'warning')
log.print('this is danger log'.'danger')
log.print('this is custom log'.'#df85ff'// Background color log.print('======= Background color ======')
log.print('this is primary log'.'primary'.true)
log.print('this is success log'.'success'.true)
log.print('this is info log'.'info'.true)
log.print('this is warning log'.'warning'.true)
log.print('this is danger log'.'danger'.true)
log.print('this is custom log'.'#df85ff'.true)
Copy the code

If you look at the output this way, it looks a lot better. Next, we will extend a method like vue-devTools, referring to the above source code to rewrite the output of different types of color can be

/** * beautiful output * @param title before the title * @param text output text * @paramtypeOutput styles can be 6 state values or custom colors */ log.pretty =function (title, text, type = 'primary') {
  console.log(
    `%c ${title} %c ${text} %c`,
    `background:${typeColor(type)}; border:1px solid${typeColor(type)}; padding: 1px; border-radius: 4px 0 0 4px; color: #fff; `,
    `border:1px solid ${typeColor(type)}; padding: 1px; border-radius: 0 4px 4px 0; color: ${typeColor(type)}; `,'background:transparent')}Copy the code

The output here is slightly different from vue-DevTools, which uses white background in front and can be changed according to the actual situation if you want. So let’s see what it looks like.

// Nice output log.print('======= nice output ======')
log.pretty('title'.'this is primary')
log.pretty('title'.'this is default'.'default')
log.pretty('title'.'this is success'.'success')
log.pretty('title'.'this is info'.'info')
log.pretty('title'.'this is warning'.'warning')
log.pretty('title'.'this is danger'.'danger')
log.pretty('title'.'this is custom'.'#df85ff')
log.pretty('bin-ui'.'https://wangbin3162.gitee.io/bin-ui/')
Copy the code

You get the following output

How about, is it very personalized, with color to distinguish, later printing will be more flexible and beautiful.

Finally, we’ll add a few more interface functions to our tool, because it’s not very nice to have to type type when we want to print fonts in different states quickly, so we can write it like this

log.primary = function (text, back = false) {
  this.print(text, 'primary', back)
}
log.success = function (text, back = false) {
  this.print(text, 'success', back)
}
log.info = function (text, back = false) {
  this.print(text, 'info', back)
}
log.warning = function (text, back = false) {
  this.print(text, 'warning', back)
}
log.danger = function (text, back = false) {
  this.print(text, 'danger', back)
}
Copy the code

Ps is essentially a quick call to the print method, but without setting the color value, the output is the same as in the first example

log.print('======= convenient output of color text ======')
log.primary('this is primary')
log.success('this is success')
log.info('this is info')
log.warning('this is warning')
log.danger('this is danger')

log.print('======= convenient output of color background text ======')
log.primary('this is primary back'.true)
log.success('this is success back'.true)
log.info('this is info back'.true)
log.warning('this is warning back'.true)
log.danger('this is danger back'.true)
Copy the code

Here the entire log tool package is complete, put together the above code can be used in their own projects, here is my own VUE component library bin-UI, you can open the official website documentation will find a similar output link to the document address

this.$log.print

A link to the

Personal home page | bin – UI | bin – admin