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)-1))).toString(16)+'00000').substring(0,7)
感谢@scar订正
底下的原文链接异常发起去读一下,后三个技能都是在那里学到的。
<<
左移操纵。这个操纵迥殊叼。平常得玩 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 装逼指南
趁便求Web练习