JavaScript 裝逼指南

guyan0319 發布于2019-08-19 18:08 / 2258人閱讀

摘要：實用價值在于可以防止全局污染。別忘了有判定的當然，很明顯，這只是基礎，并不能更裝逼一點。祝愿大家越玩越牛逼從一行代碼里面學點深入淺出高級程序設計設計模式與開發實踐原文裝逼指南順便求實習

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

深入淺出Node.js

JavaScript高級程序設計

JavaScript設計模式與開發實踐

原文：JavaScript 裝逼指南
順便求Web實習

GPU云服務器云服務器 javascript指南 javascript教程指南 javascript參考指南 javascript權威指南

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79238.html

JavaScript裝逼指南

摘要：構造函數很多教程都告訴我們，不要直接用內置對象的構造函數來創建基本變量，例如的寫法就應該用的寫法來取代。但是，構造函數注意是大寫的有點特別。構造函數接受的參數中，第一個是要傳入的參數名，第二個是函數內的代碼用字符串來表示。如何寫JavaScript才能逼格更高呢？怎樣才能組織JavaScript才能讓別人一眼看出你不簡單呢？是否很期待別人在看完你的代碼之后感嘆一句原來還可以這樣寫呢？...

oneasp 2019-08-19 14:48 評論0 收藏0
這些JavaScript編程黑科技，裝逼指南，高逼格代碼，讓你驚嘆不已

摘要：但是，構造函數注意是大寫的有點特別。構造函數接受的參數中，第一個是要傳入的參數名，第二個是函數內的代碼用字符串來表示。 Javascript是一門很吊的語言，我可能學了假的JavaScript，哈哈，大家還有什么推薦的，補充送那啥邀請碼。本文秉承著：你看不懂是你SB，我寫的代碼就要牛逼。 1、單行寫一個評級組件 ★★★★★☆☆☆☆☆.slice(5 - rate, 10 - rate...

曹金海 2019-08-21 12:02 評論0 收藏0
這些JavaScript編程黑科技，裝逼指南，高逼格代碼，讓你驚嘆不已

摘要：但是，構造函數注意是大寫的有點特別。構造函數接受的參數中，第一個是要傳入的參數名，第二個是函數內的代碼用字符串來表示。 Javascript是一門很吊的語言，我可能學了假的JavaScript，哈哈，大家還有什么推薦的，補充送那啥邀請碼。本文秉承著：你看不懂是你SB，我寫的代碼就要牛逼。 1、單行寫一個評級組件 ★★★★★☆☆☆☆☆.slice(5 - rate, 10 - rate...

MorePainMoreGain 2019-08-01 17:28 評論0 收藏0
這些JavaScript編程黑科技，裝逼指南，高逼格代碼，讓你驚嘆不已

摘要：但是，構造函數注意是大寫的有點特別。構造函數接受的參數中，第一個是要傳入的參數名，第二個是函數內的代碼用字符串來表示。 Javascript是一門很吊的語言，我可能學了假的JavaScript，哈哈，大家還有什么推薦的，補充送那啥邀請碼。本文秉承著：你看不懂是你SB，我寫的代碼就要牛逼。 1、單行寫一個評級組件 ★★★★★☆☆☆☆☆.slice(5 - rate, 10 - rate...

isLishude 2019-08-29 13:12 評論0 收藏0