转载

JavaScript 装逼指南

Summary

本文秉承着

你看不懂是你sb，我写的代码就是牛逼

的理念来介绍一些js的装逼技巧。

下面的技巧，后三个，请谨慎用于团队项目中(主要考虑到可读性的原因)，不然，leader 可能请你喝茶。

Boolean

这个技巧用的很多，也非常的简单

!!'fuck'

通过两个取反，可以强制转换为Boolean类型。较为常用。

Number

这个也特别简单，String转化为Number

+'45' +new Date

会自动转化为number类型的。较为常用。

IIFE

这个其实非常有实用价值，不算是装逼。只是其他语言里没有这么玩的，给不太了解js的同学看那可牛逼大了。

(function(arg) {     // to do })(arg)

实用价值在于可以防止全局污染。不过现在随着ES2015的普及已经没什么必要用这个了，我相信五年之后，这种写法就会逐渐没落。

自己干五年，在实习生面前装逼用也是蛮不错的嘛~

Closure

闭包嘛，js 特别好玩的一个地方。上面的立即执行函数就是对闭包的一种运用。

不了解的回去翻翻书，知乎上也有很多讨论，可以去看看。

闭包用起来对初学者来说简直就是大牛的标志(其实并不是)。

var counter = function() {     var count = 0     return function() {         return count++     } }

上面用到了闭包，看起来还挺装逼的吧。不过好像没什么实用价值。

那么这样呢？

var isType = function(type) {     return function(obj) {         return toString.call(obj) == '[Object ' + type + ']';     } }

通过高阶函数很轻松的实现判定类别。(别忘了有判定Array的Array.isArray())

当然，很明显，这只是基础，并不能更装逼一点。来看下一节

Event

事件响应前端肯定都写烂了，一般来说如何写一个计数器呢？

var times = 0 var fuck = document.querySelector('.fuck') fuck.addEventListener('click', function() {     times++     console.log(times) }, false)

好像是没什么问题哦，但是！变量 times 为什么放在外面，就用了一次放在外面，命名冲突了怎么办，或者万一在外面修改了怎么办。

这个时候这样一个事件监听代码就比较牛逼了

fuck.addEventListener('click', (function() {     var times = 0     return function() {         times++         console.log(times)     } })(), false)

怎么样，是不是立刻感觉不一样了。瞬间逼格高了起来！

通过创建一个闭包，把 times 封装到里面，然后返回函数。这个用法不太常见。

parseInt

高能预警

从这里开始，下面的代码谨慎写到公司代码里！

parseInt 这个函数太普通了，怎么能装逼。答案是 ~~

现在摁下 F12 ，在console里复制粘贴这样的代码：

~~3.14159 // => 3 ~~5.678 // => 5

这个技巧十分装逼，原理是 ~ 是一个叫做 按位非 的操作，会返回数值的反码。是二进制操作。

Hex

十六进制操作。其实就是一个 Array.prototype.toString(16) 的用法

看到这个词脑袋里冒出的肯定是CSS的颜色。

做到随机的话可以这样

(~~(Math.random()*(1<<24))).toString(16)

底下的原文链接非常建议去读一下，后三个技巧都是在那里学到的。

<<

左移操作。这个操作特别叼。一般得玩 C 玩得多的，这个操作会懂一些。一般半路出家的前端码农可能不太了解(说的是我 ☹)。

这个也是二进制操作。将数值二进制左移

解释上面的 1<<24 的操作。

其实是1左移24位。 000000000000000000000001 左移 24位 ，变成了 1000000000000000000000000

不信？

试着在console粘贴下面的代码

parseInt('1000000000000000000000000', 2) === (1 << 24)

其实还有一种更容易理解的方法来解释

Math.pow(2,24) === (1 << 24)

因为是二进制操作，所以速度是很快的。

BTW

[].forEach.call($$("*"),function(a){     a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) })

翻译成正常语言就是这样的

Array.prototype.forEach.call(document.querySelectorAll('*'), dom => dom.style.outline = `1px solid #${parseInt(Math.random() * Math.pow(2,24)).toString(16)}`)

Others

其他的，像是一些 await , Decorators 什么的。用上 TypeScript 基本就懂的东西我就不介绍了。

祝愿大家越玩越牛逼

References

从一行代码里面学点JavaScript
深入浅出Node.js
JavaScript高级程序设计
JavaScript设计模式与开发实践

原文： JavaScript 装逼指南

顺便求Web实习

原文 http://hao.jser.com/archive/10183/

正文到此结束

所属分类：编程技术

本文标签： 翻译设计模式快的 web 代码 list java Node.js Select CSS DOM JavaScript Document 2015 js parse http ip 初学者 TypeScript node CTO 开发
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

JavaScript 装逼指南

Summary

Boolean

Number

IIFE

Closure

Event

parseInt

Hex

<<

BTW

Others

References

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流