成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

JavaScript 裝逼指南

guyan0319 / 2309人閱讀

摘要：實(shí)用價(jià)值在于可以防止全局污染。別忘了有判定的當(dāng)然，很明顯，這只是基礎(chǔ)，并不能更裝逼一點(diǎn)。祝愿大家越玩越牛逼從一行代碼里面學(xué)點(diǎn)深入淺出高級(jí)程序設(shè)計(jì)設(shè)計(jì)模式與開(kāi)發(fā)實(shí)踐原文裝逼指南順便求實(shí)習(xí)

Summary

本文秉承著

你看不懂是你sb，我寫(xiě)的代碼就是牛逼

的理念來(lái)介紹一些js的裝逼技巧。

下面的技巧，后三個(gè)，請(qǐng)謹(jǐn)慎用于團(tuán)隊(duì)項(xiàng)目中(主要考慮到可讀性的原因)，不然，leader 可能請(qǐng)你喝茶。

Boolean

這個(gè)技巧用的很多，也非常的簡(jiǎn)單

!!"fuck"

通過(guò)兩個(gè)取反，可以強(qiáng)制轉(zhuǎn)換為Boolean類(lèi)型。較為常用。

Number

這個(gè)也特別簡(jiǎn)單，String轉(zhuǎn)化為Number

+"45"
+new Date

會(huì)自動(dòng)轉(zhuǎn)化為number類(lèi)型的。較為常用。

IIFE

這個(gè)其實(shí)非常有實(shí)用價(jià)值，不算是裝逼。只是其他語(yǔ)言里沒(méi)有這么玩的，給不太了解js的同學(xué)看那可牛逼大了。

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

實(shí)用價(jià)值在于可以防止全局污染。不過(guò)現(xiàn)在隨著ES2015的普及已經(jīng)沒(méi)什么必要用這個(gè)了，我相信五年之后，這種寫(xiě)法就會(huì)逐漸沒(méi)落。

自己干五年，在實(shí)習(xí)生面前裝逼用也是蠻不錯(cuò)的嘛~

Closure

閉包嘛，js 特別好玩的一個(gè)地方。上面的立即執(zhí)行函數(shù)就是對(duì)閉包的一種運(yùn)用。

不了解的回去翻翻書(shū)，知乎上也有很多討論，可以去看看。

閉包用起來(lái)對(duì)初學(xué)者來(lái)說(shuō)簡(jiǎn)直就是大牛的標(biāo)志(其實(shí)并不是)。

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

上面用到了閉包，看起來(lái)還挺裝逼的吧。不過(guò)好像沒(méi)什么實(shí)用價(jià)值。

那么這樣呢？

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

通過(guò)高階函數(shù)很輕松的實(shí)現(xiàn)判定類(lèi)別。(別忘了有判定Array的Array.isArray())

當(dāng)然，很明顯，這只是基礎(chǔ)，并不能更裝逼一點(diǎn)。來(lái)看下一節(jié)

Event

事件響應(yīng)前端肯定都寫(xiě)爛了，一般來(lái)說(shuō)如何寫(xiě)一個(gè)計(jì)數(shù)器呢？

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

好像是沒(méi)什么問(wèn)題哦，但是！變量times為什么放在外面，就用了一次放在外面，命名沖突了怎么辦，或者萬(wàn)一在外面修改了怎么辦。

這個(gè)時(shí)候這樣一個(gè)事件監(jiān)聽(tīng)代碼就比較牛逼了

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

怎么樣，是不是立刻感覺(jué)不一樣了。瞬間逼格高了起來(lái)！

通過(guò)創(chuàng)建一個(gè)閉包，把times封裝到里面，然后返回函數(shù)。這個(gè)用法不太常見(jiàn)。

parseInt 
高能預(yù)警


從這里開(kāi)始，下面的代碼謹(jǐn)慎寫(xiě)到公司代碼里！

parseInt這個(gè)函數(shù)太普通了，怎么能裝逼。答案是~~

現(xiàn)在摁下F12，在console里復(fù)制粘貼這樣的代碼：

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

這個(gè)技巧十分裝逼，原理是~是一個(gè)叫做按位非的操作，會(huì)返回?cái)?shù)值的反碼。是二進(jìn)制操作。

Hex

十六進(jìn)制操作。其實(shí)就是一個(gè)Array.prototype.toString(16)的用法

看到這個(gè)詞腦袋里冒出的肯定是CSS的顏色。

做到隨機(jī)的話可以這樣

(~~(Math.random()*((1<<24)-1))).toString(16)+"00000").substring(0,7)
謝謝@scar勘誤

底下的原文鏈接非常建議去讀一下，后三個(gè)技巧都是在那里學(xué)到的。

<<

左移操作。這個(gè)操作特別叼。一般得玩 C 玩得多的，這個(gè)操作會(huì)懂一些。一般半路出家的前端碼農(nóng)可能不太了解(說(shuō)的是我 ?)。

這個(gè)也是二進(jìn)制操作。將數(shù)值二進(jìn)制左移

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

其實(shí)是1左移24位。000000000000000000000001左移24位，變成了1000000000000000000000000

不信？

試著在console粘貼下面的代碼

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

其實(shí)還有一種更容易理解的方法來(lái)解釋

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

因?yàn)槭嵌M(jìn)制操作，所以速度是很快的。

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

翻譯成正常語(yǔ)言就是這樣的

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

從一行代碼里面學(xué)點(diǎn)JavaScript

深入淺出Node.js

JavaScript高級(jí)程序設(shè)計(jì)

JavaScript設(shè)計(jì)模式與開(kāi)發(fā)實(shí)踐

原文：JavaScript 裝逼指南
順便求Web實(shí)習(xí)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/79238.html

相關(guān)文章

  • JavaScript裝逼指南

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

    oneasp 評(píng)論0 收藏0

  • 這些JavaScript編程黑科技，裝逼指南，高逼格代碼，讓你驚嘆不已

    摘要：但是，構(gòu)造函數(shù)注意是大寫(xiě)的有點(diǎn)特別。構(gòu)造函數(shù)接受的參數(shù)中，第一個(gè)是要傳入的參數(shù)名，第二個(gè)是函數(shù)內(nèi)的代碼用字符串來(lái)表示。 Javascript是一門(mén)很吊的語(yǔ)言，我可能學(xué)了假的JavaScript，哈哈，大家還有什么推薦的，補(bǔ)充送那啥邀請(qǐng)碼。 本文秉承著：你看不懂是你SB，我寫(xiě)的代碼就要牛逼。 1、單行寫(xiě)一個(gè)評(píng)級(jí)組件 ★★★★★☆☆☆☆☆.slice(5 - rate, 10 - rate...

    曹金海 評(píng)論0 收藏0

  • 這些JavaScript編程黑科技，裝逼指南，高逼格代碼，讓你驚嘆不已

    摘要：但是，構(gòu)造函數(shù)注意是大寫(xiě)的有點(diǎn)特別。構(gòu)造函數(shù)接受的參數(shù)中，第一個(gè)是要傳入的參數(shù)名，第二個(gè)是函數(shù)內(nèi)的代碼用字符串來(lái)表示。 Javascript是一門(mén)很吊的語(yǔ)言，我可能學(xué)了假的JavaScript，哈哈，大家還有什么推薦的，補(bǔ)充送那啥邀請(qǐng)碼。 本文秉承著：你看不懂是你SB，我寫(xiě)的代碼就要牛逼。 1、單行寫(xiě)一個(gè)評(píng)級(jí)組件 ★★★★★☆☆☆☆☆.slice(5 - rate, 10 - rate...

    MorePainMoreGain 評(píng)論0 收藏0

  • 這些JavaScript編程黑科技，裝逼指南，高逼格代碼，讓你驚嘆不已

    摘要：但是，構(gòu)造函數(shù)注意是大寫(xiě)的有點(diǎn)特別。構(gòu)造函數(shù)接受的參數(shù)中，第一個(gè)是要傳入的參數(shù)名，第二個(gè)是函數(shù)內(nèi)的代碼用字符串來(lái)表示。 Javascript是一門(mén)很吊的語(yǔ)言，我可能學(xué)了假的JavaScript，哈哈，大家還有什么推薦的，補(bǔ)充送那啥邀請(qǐng)碼。 本文秉承著：你看不懂是你SB，我寫(xiě)的代碼就要牛逼。 1、單行寫(xiě)一個(gè)評(píng)級(jí)組件 ★★★★★☆☆☆☆☆.slice(5 - rate, 10 - rate...

    isLishude 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<