背景
最近公司項目不多，比較清閑，划水摸魚混跡於各大技術博客平台，瞬間又GET了好多前端技能，一些屬於技巧，一些則是聞所未聞的冷知識，一時間還消化不過來，不由的發出一聲感嘆！
前端可真是博大精深
於是突發奇想，現分類整理出來分享給大家，也補充了一些平時的積累和擴展了一些內容，俗話說，獨樂樂不如眾樂樂，大家一起來接受前端的洗禮吧！！！
論被玩壞了的前端
HTML篇
瀏覽器地址欄運行JavaScript代碼
這個很多人應該還是知道的，在瀏覽器地址欄可以直接運行JavaScript代碼，做法是以javascript:開頭后跟要執行的語句。比如：
javascript:alert('hello from address bar :)');
將以上代碼貼到瀏覽器地址欄回車后alert正常執行，一個彈窗神現。
需要注意的是如果是通過copy paste代碼到瀏覽器地址欄的話，IE及Chrome會自動去掉代碼開頭的javascript:，所以需要手動添加起來才能正確執行，而Firefox中雖然不會自動去掉，但它根本就不支持在地址欄運行JS代碼，sigh~
瀏覽器地址欄運行HTML代碼
如果說上面那條小秘密知道的人還算多的話，這條秘笈知道的人就要少一些了，在非IE內核的瀏覽器地址欄可以直接運行HTML代碼！
比如在地址欄輸入以下代碼然后回車運行，會出現指定的頁面內容。
data:text/html,<h1>Hello, everybody!</h1>
瀏覽器秒變編輯器
這個還是在瀏覽器地址欄上面做文章，將以下代碼復制粘貼到瀏覽器地址欄，運行后瀏覽器就變成了一個原始簡單的編輯器，和window自帶的notepad差不多，長見識了吧，話不多說，我們來試試。
data:text/html, <html contenteditable>
歸根結底多虧了HTML5中新加的
contenteditable屬性，當元素指定了該屬性后，元素的內容成為可編輯狀態。
同理，在控制台執行以下代碼，同樣可以將整個頁面變得可以編輯。
document.body.contentEditable='true';
實時編寫樣式的輸入框
同理，也是利用了HTML5中的contenteditable屬性，巧妙的在body增加一個可編輯的style標簽。
<body>
<style style="display:block; position: fixed;" contentEditable>
body { background: red; }
</style>
</body>
利用a標簽解析url
很多時候我們有從一個URL中提取域名，查詢關鍵字，變量參數值等的需要,然而處理 url 字符串是比較麻煩的，可以使用 a 標簽自動解析 url。
主要方法就是在JS中創建一個a標簽，然后將需要處理的URL賦值給我們新創建的a標簽的href屬性，然后就可以得到我們想要的東西了。
var a = document.createElement('a');
a.href = 'https://juejin.cn/user/2796746682939054/posts';
console.log(a.host);
利用這一方法，稍微進行封裝一下，就可以得到一個非常實用的工具函數了，下面提供一個網上常見的封裝示例。
function urlParse(url, key) {
var a = document.createElement('a')
a.href = url
var result = {
href: url,
protocol: a.protocol.replace(':', ''),
port: a.port,
query: a.search,
params: (function(){
var ret = {}, centArr,
seg = a.search.replace(/^\?/, '').replace(/^\?/,'').split('&')
for (i = 0, len = seg.length; i < len; i ++) {
if (!seg[i]) { continue }
centArr = seg[i].split('=')
ret[centArr[0]] = centArr[1]
}
return ret
}()),
hash: a.hash,
file: (a.pathname.match(/\/([^\/?#]+)$/i) || [, ''])[1],
path: a.pathname.replace(/^([^\/])/, '/$1'),
relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [, ''])[1],
segments: a.pathname.replace(/^\//, '').split('/')
}
a = null
return key ? result[key] : result
}
H5 有新的 API URL 也可以快速的處理一個鏈接
var url = new URL('https://www.baidu.com/')
url.hash
...
帶有 Id 屬性的元素，會創建全局變量
在一張HTML頁面中，所有設置了ID屬性的元素會在JavaScript的執行環境中創建對應的全局變量，這意味着document.getElementById像人的智齒一樣顯得多余了。但實際項目中最好還是老老實實該怎么寫就怎么寫，畢竟常規代碼出亂子的機會要小得多。
<div id="test"></div>
<script>
console.log(test)
</script>
script標簽保存任意信息
我們可以通過將script標簽的type屬性設置為'text'，然后就可以在里面保存任意信息，后面在js中獲取信息也十分的方便。
<script type="text" id="template">
<h1>歡迎關注公眾號：猴哥說前端</h1>
</script>
var text = document.getElementById('template').innerHTML
CSS篇
文字模糊效果
只需要添加以下兩行代碼，即可達到將文字模糊處理的目的。
color: transparent;
text-shadow: #111 0 0 5px;
正常文字VS模糊文字，是不是很酷，哈哈哈。
毛玻璃效果
其實毛玻璃的模糊效果技術上比較簡單，只是用到了 css 濾鏡（filter）中的 blur 屬性。但是要做一個好的毛玻璃效果，需要注意很多細節。下面提供一個簡單示例：
.blur {
display: block;
width: 300px;
height: 300px;
margin: 100px auto;
filter: blur(10px);
}
<img src="./img/test.png" class="blur" alt="">
圖片是我養的可愛的藍胖子(●'◡'●)
多重邊框
在css中，我們可以利用重復指定box-shadow來達到多個邊框的效果。
/*CSS Border with Box-Shadow Example*/
div {
box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);
height: 200px;
margin: 50px auto;
width: 400px
}
CSS中也可以做簡單運算
在日常開發中，我們時常會遇到這樣的需求：
左側或者右側寬度固定，然后剩余部分自動充滿。
可能很多小伙伴會想到用flex布局，通過設置flex:1;使其自動充滿，當然這個做法也是對的，但是我們還有更為簡便的方法，那就是利用css的calc函數，示例代碼如下：
.container{
width: calc(100% - 50px);
}
calc() 函數用於動態計算長度值。
- 需要注意的是，運算符前后都需要保留一個空格，例如：width: calc(100% - 10px)；
- 任何長度值都可以使用calc()函數進行計算；
- calc()函數支持 "+", "-", "*", "/" 運算；
- calc()函數使用標准的數學運算優先級規則；
JS篇
兩個變量值的交換
一般兩個變量值交換，大家首先想到的可能是通過一個中間變量進行轉換，但是其實還有更快的寫法，代碼如下：
var a=1, b=2
a=[b, b=a][0]
浮點數快速向下取整
JavaScript中是沒有整型概念的，但利用好位操作符可以輕松處理，同時獲得效率上的提升。
|0和~~是很好的一個例子，使用這兩者可以將浮點轉成整型且效率方面要比同類的parseInt,Math.round 要快。在處理像素及動畫位移等效果的時候會很有用。
(12.4 / 4.13) | 0
// => 3
~~(12.4 / 4.13)
// => 3
生成隨機字符串
生成隨機字符串，我們第一想到的，可能是先定義一個字符串數組，然后通過隨機取數組中的字符進而拼接成一個隨機長度的字符串。
但是下面還有一個更簡單的方法，代碼如下：
function generateRandomAlphaNum(len) {
var rdmString = "";
for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
return rdmString.substr(0, len);
}
主要是利用了toString() 方法的特性
什么情況下a === a - 1
咋一看，這個全等式怎么看都是false，但是萬物存在既有理，接下來，讓我們看看哪些情況下該等式是成立的呢。
第一種情況就是Infinity，或者可以說是正負Infinity。
👉🏻 知識點: 在 JavaScript 里，Infinity是一個 Number 類型的字面量，表示無窮大。當一個 Number 類型的值，在運算過程中超過了所能表示的最大值，就會得到無窮大。
let a = Infinity;
console.log(a === a - 1); // true
let b = -Infinity;
console.log(b === b - 1); // true
那么還有沒有其他情況下也成立呢？或者說換成
a == a-1又有哪些情況成立呢？歡迎各位大佬在下面評論區參與討論。
惡搞篇
CSS惡搞
大家猜測一下，如果在代碼中加上一下樣式，會是一個什么效果？
{
cursor: none !important;
}
(圖片來源於網絡，如有侵權請聯系我刪除)
console.log惡搞
Chrome的console.log是支持對文字添加樣式的，甚至log圖片都可以。於是可以重寫掉默認的log方法，把將要log的文字應用到CSS的模糊效果，這樣當有人試圖調用console.log()的時候，出來的是模糊不清的文字。好冷，我表示沒有笑。
var _log = console.log;
console.log = function() {
_log.call(console, '%c' + [].slice.call(arguments).join(' '), 'color:transparent;text-shadow:0 0 2px rgba(0,0,0,.5);');
};
console.log('你是逗逼嗎')
參考：
1、What are the most interesting HTML/JS/DOM/CSS hacks that most web developers don't know about?
2、45 Useful JavaScript Tips, Tricks and Best Practices
3、10 Small Things You May Not Know About Javascript
4、W3school