這些不爲人知的前端冷知識，你都GET了嗎？

時間 2020-12-02

標籤 javascript css html 前端 html5 java web 數組瀏覽器網絡欄目 JavaScript 简体版

原文原文鏈接

背景

最近公司項目很少，比較悠閒，划水摸魚混跡於各大技術博客平臺，瞬間又GET了好多前端技能，一些屬於技巧，一些則是聞所未聞的冷知識，一時間還消化不過來，不禁的發出一聲感嘆！javascript

前端可真是博大精深css

因而突發奇想，現分類整理出來分享給你們，也補充了一些平時的積累和擴展了一些內容，俗話說，獨樂樂不如衆樂樂，你們一塊兒來接受前端的洗禮吧！！！html

論被玩壞了的前端前端

HTML篇

瀏覽器地址欄運行JavaScript代碼

這個不少人應該仍是知道的，在瀏覽器地址欄能夠直接運行JavaScript代碼，作法是以javascript:開頭後跟要執行的語句。好比：html5

javascript:alert('hello from address bar :)');

將以上代碼貼到瀏覽器地址欄回車後alert正常執行，一個彈窗神現。java

須要注意的是若是是經過copy paste代碼到瀏覽器地址欄的話，IE及Chrome會自動去掉代碼開頭的javascript:，因此須要手動添加起來才能正確執行，而Firefox中雖然不會自動去掉，但它根本就不支持在地址欄運行JS代碼，sigh~web

瀏覽器地址欄運行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('你是逗逼嗎')

參考：

一、What are the most interesting HTML/JS/DOM/CSS hacks that most web developers don't know about?

二、45 Useful JavaScript Tips, Tricks and Best Practices

三、10 Small Things You May Not Know About Javascript

四、W3school

五、前端鮮爲人知的一面--前端冷知識集錦