前端鮮爲人知的一面–前端冷知識集錦

時間 2019-11-16

標籤前端鮮爲人知一面知識集錦简体版

原文原文鏈接

前端已經被玩兒壞了！像console.log()能夠向控制檯輸出圖片等炫酷的玩意已經不是什麼新聞了，像用||操做符給變量賦默認值也是人盡皆知的舊聞了，今天看到Quora上一個帖子，瞬間又GET了好多前端技能，一些屬於技巧，一些則是聞所未聞的冷知識，一時間還消化不過來。現分類整理出來分享給你們，也補充了一些平時的積累和擴展了一些內容。

HTML篇

瀏覽器地址欄運行JavaScript代碼

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

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

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

須要注意的是若是是經過copy paste代碼到瀏覽器地址欄的話，IE及Chrome會自動去掉代碼開頭的javascript:，因此須要手動添加起來才能正確執行，而Firefox中雖然不會自動去掉，但它根本就不支持在地址欄運行JS代碼，sigh~
這一技術在個人另外一篇博文《讓Chrome 接管郵件鏈接，收發郵件更方便了》中有使用到，利用在瀏覽器地址欄中執行JavaScript代碼將Gmail設置爲系統的郵件接管程序。

瀏覽器地址欄運行HTML代碼

若是說上面那條小祕密知道的人還算多的話，這條祕笈知道的人就要少一些了，在非IE內核的瀏覽器地址欄能夠直接運行HTML代碼！

好比在地址欄輸入如下代碼而後回車運行，會出現指定的頁面內容。

data:text/html,<h1>Hello, world!</h1>

你造麼，能夠把瀏覽器當編輯器

仍是瀏覽器地址欄上作文章，將如下代碼貼到地址欄運行後瀏覽器變成了一個原始而簡單的編輯器，與Windows自帶的notepad同樣，吼吼。

data:text/html, <html contenteditable>

歸根結底多虧了HTML5中新加的 contenteditable 屬性，當元素指定了該屬性後，元素的內容成爲可編輯狀態。

推而廣之，將如下代碼放到console執行後，整個頁面將變得可編輯，隨意踐踏吧~

document.body.contentEditable='true';

利用a標籤自動解析URL

不少時候咱們有從一個URL中提取域名，查詢關鍵字，變量參數值等的須要，而萬萬沒想到可讓瀏覽器方便地幫咱們完成這一任務而不用咱們寫正則去抓取。方法就在JS代碼裏先建立一個 a 標籤而後將須要解析的URL賦值給 a 的 href 屬性，而後就獲得了一切咱們想要的了。

var a = document.createElement('a');
a.href = 'http://www.cnblogs.com/wayou/p/';
console.log(a.host);

利用這一原理，稍微擴展一下，就獲得了一個更加健壯的解析URL各部分的通用方法了。下面代碼來自James的博客。

function parseURL(url) {
var a =  document.createElement('a');
a.href = url;
return {
   source: url,
   protocol: a.protocol.replace(':',''),
   host: a.hostname,
   port: a.port,
   query: a.search,
   params: (function(){
      var ret = {},
         seg = a.search.replace(/^\?/,'').split('&'),
         len = seg.length, i = 0, s;
      for (;i<len;i++) {
         if (!seg[i]) { continue; }
         s = seg[i].split('=');
         ret[s[0]] = s[1];
      }
      return ret;
   })(),
   file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1],
   hash: a.hash.replace('#',''),
   path: a.pathname.replace(/^([^\/])/,'/$1'),
   relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [,''])[1],
   segments: a.pathname.replace(/^\//,'').split('/')
};
}

頁面擁有ID的元素會建立全局變量

在一張HTML頁面中，全部設置了ID屬性的元素會在JavaScript的執行環境中建立對應的全局變量，這意味着 document.getElementById 像人的闌尾同樣顯得多餘了。但實際項目中最好老老實實該怎麼寫就怎麼寫，畢竟常規代碼出亂子的機會要小得多。

<div id="sample"></div>
<script type="text/javascript">
console.log(sample);
</script>

加載CDN文件時，能夠省掉HTTP標識

如今很流行的CDN即從專門的服務器加載一些通用的JS和CSS文件，出於安全考慮有的CDN服務器使用HTTPS方式鏈接，而有的是傳統的HTTP，其實咱們在使用時能夠忽略掉這個，將它從URL中省去。

<script src="//domain.com/path/to/script.js"></script>

這一點在以前一篇譯文博客《jQuery編程最佳實踐》中也有提到。

利用script標籤保存任意信息

將script標籤設置爲 type='text' 而後能夠在裏面保存任意信息，以後能夠在JavaScript代碼中很方便地獲取。

<script type="text" id="template">
<h1>This won't display</h1>
</script>

var text = document.getElementById('template').innerHTML

CSS篇

關於CSS的惡做劇

相信你看完如下代碼後可以預料到會出現什麼效果。

*{
cursor: none!important;
}

簡單的文字模糊效果

如下兩行簡單的CSS3代碼可達到將文字模糊化處理的目的，出來的效果有點像使用PS的濾鏡，so cool!

p {
color: transparent;
text-shadow: #111 0 0 5px;
}

垂直居中

有好屢次博主都有這樣的需求，垂直居中顯示某個DIV，咱們知道CSS中自然有水平居中的樣式 text-align:center 。惟獨這個垂直居中無解。

固然你能夠將容器設置爲 display:table ，而後將子元素也就是要垂直居中顯示的元素設置爲 display:table-cell ，而後加上來實現，但此種實現每每會由於 display：table 而破壞總體佈局，那還不如直接用table標籤了呢。

下面這個樣式利用了translate來巧妙實現了垂直居中樣式，需IE9+。

.center-vertical {
position: relative;
top: 50%;
transform: translateY(-50%);
}

相比而言，水平居中要簡單得多，像上面提到的text-align:center，常常用到的技巧還有 margin:0 auto 。但對於margin大法也只在子元素寬度小於容器寬度時管用，當子元素寬度大於容器寬度時此法失效。

如法炮製，利用left和transform一樣可實現水平居中，不過意義不大，畢竟text-align和margin差很少知足需求了。

.center-horizontal {
position: relative;
left: 50%;
transform: translateX(-50%);
}

多重邊框

利用重複指定box-shadow來達到多個邊框的效果

在線演示：http://dabblet.com/gist/4034534

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

經過設置style標籤的 display:block 樣式可讓頁面的style標籤顯示出來，而且加上 contentEditable 屬性後可讓樣式成爲可編輯狀態，更改後的樣式效果也是實時更新呈現的。此技巧在IE下無效。擁有此技能者，逆天也！

<!DOCTYPE html>
<html>
<body>
<style style="display:block" contentEditable>
   body { color: blue }
</style>
</body>
</html>

建立長寬比固定的元素

經過設置父級窗口的 padding-bottom 能夠達到讓容器保持必定的長度比的目的，這在響應式頁面設計中比較有用，可以保持元素不變形。

<div style="width: 100%; position: relative; padding-bottom: 20%;">
<div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;background-color:yellow;">
   this content will have a constant aspect ratio that varies based on the width.
</div>
</div>

CSS中也能夠作簡單運算

經過CSS中的calc方法能夠進行一些簡單的運算，從而達到動態指定元素樣式的目的。

.container{
background-position: calc(100% - 50px) calc(100% - 20px);
}

JavaScript篇

生成隨機字符串

利用 Math.random 和 toString 生成隨機字符串，來自前一陣子看到的一篇博文。這裏的技巧是利用了 toString 方法能夠接收一個基數做爲參數的原理，這個基數從2到36封頂。若是不指定，默認基數是10進制。略屌！

function generateRandomAlphaNum(len) {
var rdmString = "";
for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
return rdmString.substr(0, len);
}

整數的操做

JavaScript中是沒有整型概念的，但利用好位操做符能夠輕鬆處理，同時得到效率上的提高。

|0 和 ~~ 是很好的一個例子，使用這二者能夠將浮點轉成整型且效率方面要比同類的 parseInt , Math.round  要快。在處理像素及動畫位移等效果的時候會頗有用。性能比較見此。

var foo = (12.4 / 4.13) | 0;//結果爲3
var bar = ~~(12.4 / 4.13);//結果爲3

順便說句， !! 將一個值方便快速轉化爲布爾值 !!window===true  。

重寫原生瀏覽器方法以實現新功能

下載的代碼經過重寫瀏覽器的 alert 讓它能夠記錄彈窗的次數。

(function() {
var oldAlert = window.alert,
   count = 0;
window.alert = function(a) {
   count++;
   oldAlert(a + "\n You've called alert " + count + " times now. Stop, it's evil!");
};
})();
alert("Hello World");

關於console的惡做劇

關於重寫原生方法，這裏有個惡做劇你們能夠拿去尋開心。Chrome的 console.log 是支持對文字添加樣式的，甚至log圖片均可以。因而能夠重寫掉默認的log方法，把將要log的文字應用到CSS的模糊效果，這樣當有人試圖調用console.log()的時候，出來的是模糊不清的文字。好冷，我表示沒有笑。

是從這篇G+帖子的評論裏看到的。使用以後的效果是再次調用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);');
};

不聲明第三個變量的值交換

咱們都知道交換兩個變量值的常規作法，那就是聲明一箇中間變量來暫存。但鮮有人去挑戰不聲明中間變量的狀況，下面的代碼給出了這種實現。蠻有創意的。

var a=1,b=2;a=[b,b=a][0];

萬物皆對象

在JavaScript的世界，萬物皆對象。除了 null 和 undefined ，其餘基本類型數字，字符串和布爾值都有對應有包裝對象。對象的一個特徵是你能夠在它身上直接調用方法。對於數字基本類型，當試圖在其身上調用 toString 方法會失敗，但用括號括起來後再調用就不會失敗了，內部實現是用相應的包裝對象將基本類型轉爲對象。因此 (1).toString() 至關於 new Number(1).toString() 。所以，你的確能夠把基本類型數字，字符串，布爾等當對象使用的，只是注意語法要得體。

同時咱們注意到，JavaScript中數字是不分浮點和整形的，全部數字其實均是浮點類型，只是把小數點省略了而以，好比你看到的1能夠寫成1.，這也就是爲何當你試圖1.toString()時會報錯，因此正確的寫法應該是這樣：1..toString()，或者如上面所述加上括號，這裏括號的做用是糾正JS解析器，不要把1後面的點當成小數點。內部實現如上面所述，是將1.用包裝對象轉成對象再調用方法。

If語句的變形

當你須要寫一個if語句的時候，不妨嘗試另外一種更簡便的方法，用JavaScript中的邏輯操做符來代替。

var day=(new Date).getDay()===0;
//傳統if語句
if (day) {
alert('Today is Sunday!');
};
//運用邏輯與代替if
day&&alert('Today is Sunday!');

好比上面的代碼，首先獲得今天的日期，若是是星期天，則彈窗，不然什麼也不作。咱們知道邏輯操做存在短路的狀況，對於邏輯與表達式，只有二者都真才結果才爲真，若是前面的day變量被判斷爲假了，那麼對於整個與表達式來講結果就是假，因此就不會繼續去執行後面的 alert 了，若是前面day爲真，則還要繼續執行後面的代碼來肯定整個表達式的真假。利用這點達到了if的效果。

對於傳統的if語句，若是執行體代碼超過了1 條語句，則須要加花括號，而利用逗號表達式，能夠執行任意條代碼而不用加花括號。

if(conditoin) alert(1),alert(2),console.log(3);

上面if語句中，若是條件成立則執行三個操做，但咱們不須要用花括號將這三句代碼括起來。固然，這是不推薦的，這裏是冷知識課堂:)

禁止別人以iframe加載你的頁面

下面的代碼已經不言自明瞭，沒什麼好多說的。

if (window.location != window.parent.location) window.parent.location = window.location;

console.table

Chrome專屬，IE繞道的 console 方法。能夠將JavaScript關聯數組以表格形式輸出到瀏覽器 console ，效果很驚讚，界面很美觀。

//採購狀況
var data = [{'品名': '杜雷斯', '數量': 4}, {'品名': '岡本', '數量': 3}];
console.table(data);javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。