作用

绑定到控制台

export function bindToConsole(
  methodName: string,
  args: Array<any>,
  badgeName: string,
): () => any {
  let offset = 0;
  switch (methodName) {
    case 'dir':
    case 'dirxml':
    case 'groupEnd':
    case 'table': {
      // These methods cannot be colorized because they don't take a formatting string.
      // 这些方法不能被着色，因为它们不接受格式化字符串。
      return bind.apply(console[methodName], [console].concat(args));
    }
    case 'assert': {
      // assert takes formatting options as the second argument.
      // assert 将格式化选项作为第二个参数。
      offset = 1;
    }
  }

  const newArgs = args.slice(0);
  if (typeof newArgs[offset] === 'string') {
    newArgs.splice(
      offset,
      1,
      badgeFormat + ' ' + newArgs[offset],
      badgeStyle,
      pad + badgeName + pad,
      resetStyle,
    );
  } else {
    newArgs.splice(
      offset,
      0,
      badgeFormat,
      badgeStyle,
      pad + badgeName + pad,
      resetStyle,
    );
  }

  // The "this" binding in the "bind";
  // “bind”中的“this”绑定；
  newArgs.unshift(console);

  return bind.apply(console[methodName], newArgs);
}

常量

徽章格式

备注

源码中 10 - 25 行

// Keep in sync with ReactServerConsoleConfig
// This flips color using ANSI, then sets a color styling, then resets.
// 与 ReactServerConsoleConfig 保持同步这会使用 ANSI 翻转颜色，然后设置颜色样式，然
// 后重置。
const badgeFormat = '\x1b[0m\x1b[7m%c%s\x1b[0m%c';
// Same badge styling as DevTools.
// 与 DevTools 相同的徽章样式。
const badgeStyle =
  // We use a fixed background if light-dark is not supported, otherwise
  // we use a transparent background.
  // 如果不支持亮暗模式，我们使用固定背景，否则我们使用透明背景。
  'background: #e6e6e6;' +
  'background: light-dark(rgba(0,0,0,0.1), rgba(255,255,255,0.25));' +
  'color: #000000;' +
  'color: light-dark(#000000, #ffffff);' +
  'border-radius: 2px';
//   重置样式
const resetStyle = '';
// 填充
const pad = ' ';

// 绑定
const bind = Function.prototype.bind;