前端装逼技巧 108 式（一）—— 打工人

你在拼多多到处找人砍价，他在滴滴打车求人助力，我在电子厂拧螺丝拧到凌晨，我们都有光明的未来！早安，打工人！

楔子

作为一名拥有钢铁般意志的前端打工人，装逼是不可能的，这辈子都不可能装逼。如果真要装逼，那就大家一起装逼，毕竟前端要讲武德嘛，要耗子尾汁。遂决定写下前端装逼技巧108式，供诸君茶余饭后一乐，时不时秀个骚操作，为打工的生活增添一抹亮色。

因作为打工人，时间、精力有限，目前大纲只有约50式，还请诸君有好的装逼要点私信或者在评论区留言，大家共同探讨装逼大计、共同迎接打工人的光明未来！

系列文章力求通过一行代码或者一个小的切入点去理解一个知识点，文章风格所限，引用资料部分，将在对应小节末尾标出。

第一式：子曰，公欲装逼好，工具少不了

• 代码太丑陋，carbon来相救：把你的代码转换为精美图片进行分享（点击图片跳转）

本文为便于代码复制，将奉行不首先装逼原则，尽量减少此装逼利器的使用。

第二式：console调试万金油，学会开车更上头

console.log()在前端调试中的地位自不必赘述，其实一代车神也对其五体投地，不信诸君细看（如真有不解其意者，建议发扬不耻下问的求知精神，问问你旁边的同事）：

是的，以上图片是由console.log()完成的，我没有骗你，贴出代码以证清白，为便于诸君控制台开车，此处我们忘掉第一式：

// 在此提醒，为免于生成丑陋的锯齿背景图片，请注意空格的个数，并保证console面板的宽度。
console.log(`%c                                                                            
                                                                            
                                                                            
                               %c FBI WARNING %c                                
                                                                            
                                                                            
%c        Federal Law provides severe civil and criminal penalties for        
        the unauthorized reproduction,distribution, or exhibition of        
         copyrighted motion pictures (Title 17, United States Code,         
        Sections 501 and 508). The Federal Bureau of Investigation          
         investigates allegations of criminal copyright infringement        
                 (Title 17, United States Code, Section 506).               
                                                                            
                                                                            
                                                                            
`,
'background: #000; font-size: 18px; font-family: monospace',
'background: #f33; font-size: 18px; font-family: monospace; color: #eee; text-shadow:0 0 1px #fff',
'background: #000; font-size: 18px; font-family: monospace',
'background: #000; font-size: 18px; font-family: monospace; color: #ddd; text-shadow:0 0 2px #fff'
)

为什么会这样呢？想必你还记得其他语言中的print()。占位符是print()的专属吗？不，他们在console.log()中同样使用：

• %s：字符串
• %d：整数
• %i：整数
• %f：浮点数
• %o：obj对象（DOM）
• %O：obj对象
• %c：CSS样式

console.log()可以通过以上这些特有的占位符进行信息的加工输出。是的，你可能已经明白，上面代码的玄机就在四个%c，第一个创建神秘而性感的纯黑背景；第二个给“FBI WARNING”加上红色的背景；第三个恢复纯黑的性感；第四个配上白色的文字，如此，大事已成。

明白了以上原理，诸君就可以自由发挥，展示你们强大的css实力了，甚至还可以输出gif背景图，在装逼的路上更上几层楼。不装了，我是css渣渣。

console.log(
  '%c孤篷',
  '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 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 rgba(0,0,0,.15);font-size:5em'
  )

那么，我们是否可以超越度娘，在自家公司官网控制台完成精美的招聘文案投送呢？

拓展：console对象都有哪些方法？

参考资料： 小蝌蚪日记：通过console.log高仿FBI Warning | Using the F12 Tools Console to View Errors and Status?redirectedfrom=MSDN)

第三式：芙蓉面，杨柳腰，无物比妖娆 —— 让你看清UI的轮廓

• UI轮廓哪里寻，outline属性来帮您。
  html * { outline: 1px solid red }
  

• 解析与思考
  
  • 这里没有使用 border 的原因是 border 会增加元素的大小但是 outline 不会；
  • 通过这个技巧不仅能帮助我们在开发中迅速了解元素所在的位置，还能帮助我们方便地查看任意网站的布局；
  • 所有浏览器都支持 outline 属性;outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用;
  • 轮廓线不会占据空间，也不一定是矩形（比如2D转换等）。
  • 去掉Chrome浏览器中输入框以及其它表单控件获得焦点时的带颜色边框
    input { outline: none; }

• 通过一个开关实现任意网页开启关闭outline
  
  • Chrome右上角三个点⇒书签⇒书签管理器⇒右上角三个点⇒「添加新书签」;
  • 名称随意，粘贴以下代码到网址中;
  • 然后我们就可以在任意网站上点击刚才创建的书签，内部会判断是否存在调试的 style。存在的话就删除，不存在的话就添加，通过这种方式我们就能很方便的通过这个技巧查看任意网页的布局了。
    javascript: (function() { var elements = document.body.getElementsByTagName('*'); var items = []; for (var i = 0; i < elements.length; i++) { if (elements[i].innerHTML.indexOf('html * { outline: 1px solid red }') != -1) { items.push(elements[i]); } } if (items.length > 0) { for (var i = 0; i < items.length; i++) { items[i].innerHTML = ''; } } else { document.body.innerHTML += '<style>html * { outline: 1px solid red }</style>'; } })();

参考资料： 很好用的 UI 调试技巧

第四式：角声寒，夜阑珊，又改需求。难，难，难！—— 类型转换助你不带脏字的骂产品、优雅的夸自己

• (!(~+[])+{})[--[~+""][+[]]*[~+[]]+~~!+[]]+({}+[])[[~!+[]*~+[]]]：sb
• ([][[]]+[])[+!![]]+([]+{})[!+[]+!![]]：nb
• (+!![]*([]+{})+[]+{})[+[]]+([]+{})[!+[]+!![]]：Nb

图解：取类型转换得到的字符串里的字母进行拼凑（看懂了原理，其实我们完全可以尝试写的更简练一些）

插件： zhuangbility，一个可以逆向操作，输入文字，返回操作符的npm插件

第五式：a == 1 && a == 2 && a == 3，那你可以实现a === 1 && a === 2 && a === 3吗？

• a == 1 && a == 2 && a == 3：
  // 当然，你也可以把count作为属性放在a对象上 let count = 1 let a = { valueOf: function(){return count++} } console.log(a==1 && a==2 && a==3) // true
  
  • 对象在转换基本类型时，会调用该对象上 valueOf 或 toString 这两个方法，该方法的返回值是转换为基本类型的结果
  • 具体调用以上哪个方法取决于内置的 toPrimitive 调用结果

• a === 1 && a === 2 && a === 3：

let<