在简书上摸鱼时发现的一些有意思的代码

在看简书的时候，打开控制台页面，可以看到如下的输出：

image.png

进入source下找到如下代码

var i = "#1475b2"
    , c = "#42c02e"
    , u = function (e) {
        var t = e.title
            , r = e.content
            , n = e.backgroundColor
            , a = ["%c ".concat(t, " %c ").concat(r, " "), "padding: 1px; border-radius: 3px 0 0 3px; color: #fff; background: ".concat("#606060", ";"), "padding: 1px; border-radius: 0 3px 3px 0; color: #fff; background: ".concat(n, ";")];
        return function () {
            var e;
            window.console && "function" === typeof window.console.log && (e = console).log.apply(e, arguments)
        }.apply(void 0, a)
    };

(function (e) {
    var t = e.title
        , r = e.content;
    u({
        title: t,
        content: r,
        backgroundColor: c
    })
})({
    title: "Environment",
    content: "production"
})

改造改造

var customizeConsole = function (e) {
        var t = e.title
            , r = e.content
            , n = e.backgroundColor
            , a = [`%c ${e.title} %c  ${e.content} `, `padding: 1px; border-radius: 3px 0 0 3px; color: #fff; background: #606060 ;`, `padding: 1px; border-radius: 0 3px 3px 0; color: #fff; background: ${e.backgroundColor} ;`];
        return function () {
            var e;
            window.console && "function" === typeof window.console.log && (e = console).log.apply(e, arguments)
        }.apply(void 0, a)
    };


    customizeConsole({
        title: "Environment",
        content: "production",
        backgroundColor: "#42c02e"
    })

示例如下：

image.png

然后我们就可以愉快的在项目中使用这些并没有什么卵用但有意思的代码了
关于console.log %c 语法可用的属性如下：

• background 与其全写版本。
• border 与其全写版本。
• border-radius
• box-decoration-break
• box-shadow
• clear 和 float
• color
• cursor
• display
• font 与其全写版本。
• line-height
• margin
• outline 与其全写版本。
• padding
• text-transform 这类 text-* 属性
• white-space
• word-spacing 和 word-break
• writing-mode
  参考资料：MDN