作者：劉哇勇
文章源自：
http://www.cnblogs.com/Wayou/p/things_you_dont_know_about_frontend.html
前端已經(jīng)被玩兒壞了德召！像console.log()可以向控制臺(tái)輸出圖片等炫酷的玩意已經(jīng)不是什么新聞了崎坊，像用||操作符給變量賦默認(rèn)值也是人盡皆知的舊聞了，今天看到Quora上一個(gè)帖子啤斗，瞬間又GET了好多前端技能，一些屬于技巧厦章，一些則是聞所未聞的冷知識(shí)镇匀，一時(shí)間還消化不過來。現(xiàn)分類整理出來分享給大家袜啃，也補(bǔ)充了一些平時(shí)的積累和擴(kuò)展了一些內(nèi)容汗侵。
HTML篇
瀏覽器地址欄運(yùn)行JavaScript代碼
這個(gè)很多人應(yīng)該還是知道的，在瀏覽器地址欄可以直接運(yùn)行JavaScript代碼群发，做法是以javascript:開頭后跟要執(zhí)行的語句晰韵。比如：
javascript:alert('hello from address bar :)');
將以上代碼貼到瀏覽器地址欄回車后alert正常執(zhí)行，一個(gè)彈窗神現(xiàn)熟妓。
需要注意的是如果是通過copy paste代碼到瀏覽器地址欄的話雪猪，IE及Chrome會(huì)自動(dòng)去掉代碼開頭的
javascript:，所以需要手動(dòng)添加起來才能正確執(zhí)行起愈，而Firefox中雖然不會(huì)自動(dòng)去掉只恨，但它根本就不支持在地址欄運(yùn)行JS代碼，sigh~
這一技術(shù)在我的另一篇博文《讓Chrome 接管郵件連接抬虽，收發(fā)郵件更方便了》中有使用到官觅，利用在瀏覽器地址欄中執(zhí)行JavaScript代碼將Gmail設(shè)置為系統(tǒng)的郵件接管程序。
瀏覽器地址欄運(yùn)行HTML代碼
如果說上面那條小秘密知道的人還算多的話阐污，這條秘笈知道的人就要少一些了休涤，在非IE內(nèi)核的瀏覽器地址欄可以直接運(yùn)行HTML代碼！
比如在地址欄輸入以下代碼然后回車運(yùn)行笛辟，會(huì)出現(xiàn)指定的頁面內(nèi)容滑绒。
data:text/html,<h1>Hello, world!</h1>
你造么，可以把瀏覽器當(dāng)編輯器
還是瀏覽器地址欄上做文章隘膘，將以下代碼貼到地址欄運(yùn)行后瀏覽器變成了一個(gè)原始而簡(jiǎn)單的編輯器，與Windows自帶的notepad一樣杠览，吼吼弯菊。
data:text/html, <html contenteditable>
歸根結(jié)底，多虧了HTML5中新加的contenteditable屬性踱阿，當(dāng)元素指定了該屬性后管钳，元素的內(nèi)容成為可編輯狀態(tài)。
推而廣之软舌，將以下代碼放到console執(zhí)行后才漆，整個(gè)頁面將變得可編輯，隨意踐踏吧~
document.body.contentEditable='true';
利用a標(biāo)簽自動(dòng)解析URL
很多時(shí)候我們有從一個(gè)URL中提取域名佛点，查詢關(guān)鍵字醇滥，變量參數(shù)值等的需要黎比，而萬萬沒想到可以讓瀏覽器方便地幫我們完成這一任務(wù)而不用我們寫正則去抓取。方法就在JS代碼里先創(chuàng)建一個(gè)a標(biāo)簽鸳玩，然后將需要解析的URL賦值給a的href屬性阅虫，然后就得到了一切我們想要的了不跟。
var a = document.createElement('a');
a.;
console.log(a.host);
利用這一原理购城，稍微擴(kuò)展一下瘪板，就得到了一個(gè)更加健壯的解析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的元素會(huì)創(chuàng)建全局變量
在一張HTML頁面中箭昵，所有設(shè)置了ID屬性的元素會(huì)在JavaScript的執(zhí)行環(huán)境中創(chuàng)建對(duì)應(yīng)的全局變量，這意味著document.getElementById像人的闌尾一樣顯得多余了回季。但實(shí)際項(xiàng)目中最好老老實(shí)實(shí)該怎么寫就怎么寫家制，畢竟常規(guī)代碼出亂子的機(jī)會(huì)要小得多。
<div id="sample"></div>
<script type="text/javascript">
console.log(sample);
</script>
加載CDN文件時(shí)泡一，可以省掉HTTP標(biāo)識(shí)
現(xiàn)在很流行的CDN，即從專門的服務(wù)器加載一些通用的JS和CSS文件涵但，出于安全考慮有的CDN服務(wù)器使用HTTPS方式連接帖蔓，而有的是傳統(tǒng)的HTTP，其實(shí)塑娇，我們?cè)谑褂脮r(shí)可以忽略掉這個(gè)澈侠，將它從URL中省去。
<script src="http://domain.com/path/to/script.js"></script>
這一點(diǎn)在之前一篇譯文博客《jQuery編程最佳實(shí)踐》中也有提到埋酬。
利用script標(biāo)簽保存任意信息
將script標(biāo)簽設(shè)置為type='text'然后可以在里面保存任意信息哨啃，之后可以在JavaScript代碼中很方便地獲取烧栋。
<script type="text" id="template">
<h1>This won't display</h1>
</script>
var text = document.getElementById('template').innerHTML
CSS篇
關(guān)于CSS的惡作劇
相信你看完以下代碼后能夠預(yù)料到會(huì)出現(xiàn)什么效果。
*{
cursor: none!important;
}
簡(jiǎn)單的文字模糊效果
以下兩行簡(jiǎn)單的CSS3代碼可達(dá)到將文字模糊化處理的目的棘催，出來的效果有點(diǎn)像使用PS的濾鏡劲弦，so cool!
p {
color: transparent;
text-shadow: #111 0 0 5px;
}
垂直居中
有好多次博主都有這樣的需求，垂直居中顯示某個(gè)DIV醇坝，我們知道CSS中天然有水平居中的樣式text-align:center邑跪。唯獨(dú)這個(gè)垂直居中無解。
當(dāng)然你可以將容器設(shè)置為display:table呼猪，然后將子元素也就是要垂直居中顯示的元素設(shè)置為display:table-cell画畅，然后加上vertical-align:middle來實(shí)現(xiàn)，但此種實(shí)現(xiàn)往往會(huì)因?yàn)?code>display：table而破壞整體布局宋距，那還不如直接用table標(biāo)簽了呢轴踱。
下面這個(gè)樣式利用了translate來巧妙實(shí)現(xiàn)了垂直居中樣式，需IE9+谚赎。
.center-vertical {
position: relative;
top: 50%;
transform: translateY(-50%);
}
相比而言淫僻，水平居中要簡(jiǎn)單得多，像上面提到的text-align:center闸盔，經(jīng)常用到的技巧還有margin:0 auto蔫巩。但對(duì)于margin大法也只在子元素寬度小于容器寬度時(shí)管用截粗；當(dāng)子元素寬度大于容器寬度時(shí)腻窒，此法失效柔逼。
如法炮制，利用left和transform同樣可實(shí)現(xiàn)水平居中割岛，不過意義不大愉适，畢竟text-align和margin差不多滿足需求了。
.center-horizontal {
position: relative;
left: 50%;
transform: translateX(-50%);
}
多重邊框
利用重復(fù)指定box-shadow來達(dá)到多個(gè)邊框的效果蜂桶。
**在線演示 **
/*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
}
實(shí)時(shí)編輯CSS
通過設(shè)置style標(biāo)簽的display:block樣式儡毕，可以讓頁面的style標(biāo)簽顯示出來，并且加上contentEditable屬性后可以讓樣式成為可編輯狀態(tài)扑媚，更改后的樣式效果也是實(shí)時(shí)更新呈現(xiàn)的腰湾。此技巧在IE下無效。擁有此技能者疆股，逆天也费坊！
<!DOCTYPE html>
<html>
<body>
<style style="display:block" contentEditable>
body { color: blue }
</style>
</body>
</html>
創(chuàng)建長(zhǎng)寬比固定的元素
通過設(shè)置父級(jí)窗口的padding-bottom可以達(dá)到讓容器保持一定的長(zhǎng)度比的目的，這在響應(yīng)式頁面設(shè)計(jì)中比較有用旬痹，能夠保持元素不變形附井。
<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中也可以做簡(jiǎn)單運(yùn)算
通過CSS中的calc方法可以進(jìn)行一些簡(jiǎn)單的運(yùn)算，從而達(dá)到動(dòng)態(tài)指定元素樣式的目的两残。
.container{
background-position: calc(100% - 50px) calc(100% - 20px);
}
JavaScript篇
生成隨機(jī)字符串
利用Math.random和toString生成隨機(jī)字符串永毅，來自前一陣子看到的一篇博文。這里的技巧是利用了toString方法可以接收一個(gè)基數(shù)作為參數(shù)的原理人弓，這個(gè)基數(shù)從2到36封頂沼死。如果不指定，默認(rèn)基數(shù)是10進(jìn)制崔赌。略屌意蛀！
function generateRandomAlphaNum(len) {
var rdmString = "";
for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
return rdmString.substr(0, len);
}
整數(shù)的操作
JavaScript中是沒有整型概念的耸别，但利用好位操作符可以輕松處理，同時(shí)獲得效率上的提升县钥。
|0和~~是很好的一個(gè)例子秀姐，使用這兩者可以將浮點(diǎn)轉(zhuǎn)成整型且效率方面要比同類的parseInt,Math.round要快。在處理像素及動(dòng)畫位移等效果的時(shí)候會(huì)很有用若贮。性能比較見此省有。
var foo = (12.4 / 4.13) | 0;//結(jié)果為3
var bar = ~~(12.4 / 4.13);//結(jié)果為3
順便說句，!!將一個(gè)值方便快速轉(zhuǎn)化為布爾值!!window===true兜看。
重寫原生瀏覽器方法以實(shí)現(xiàn)新功能
下載的代碼锥咸，通過重寫瀏覽器的alert讓它可以記錄彈窗的次數(shù)。
(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");
關(guān)于console的惡作劇
關(guān)于重寫原生方法细移，這里有個(gè)惡作劇大家可以拿去尋開心搏予。Chrome的console.log是支持對(duì)文字添加樣式的，甚至log圖片都可以弧轧。于是可以重寫掉默認(rèn)的log方法雪侥，把將要log的文字應(yīng)用到CSS的模糊效果，這樣當(dāng)有人試圖調(diào)用console.log()的時(shí)候精绎，出來的是模糊不清的文字速缨。好冷，我表示沒有笑代乃。
是從這篇G+帖子的評(píng)論里看到的旬牲。使用之后的效果是，再次調(diào)用log會(huì)輸出字跡模糊不清的文字搁吓。
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);');
};
不聲明第三個(gè)變量的值交換
我們都知道交換兩個(gè)變量值的常規(guī)做法原茅，那就是聲明一個(gè)中間變量來暫存。但鮮有人去挑戰(zhàn)不聲明中間變量的情況堕仔，下面的代碼給出了這種實(shí)現(xiàn)擂橘。蠻有創(chuàng)意的。
var a=1,b=2;a=[b,b=a][0];
萬物皆對(duì)象
在JavaScript的世界摩骨，萬物皆對(duì)象通贞。除了null和undefined，其他基本類型數(shù)字恼五，字符串和布爾值都有對(duì)應(yīng)有包裝對(duì)象昌罩。對(duì)象的一個(gè)特征是你可以在它身上直接調(diào)用方法。
對(duì)于數(shù)字基本類型灾馒，當(dāng)試圖在其身上調(diào)用toString方法會(huì)失敗峡迷，但用括號(hào)括起來后再調(diào)用就不會(huì)失敗了，內(nèi)部實(shí)現(xiàn)是用相應(yīng)的包裝對(duì)象將基本類型轉(zhuǎn)為對(duì)象。所以(1).toString()相當(dāng)于new Number(1).toString()绘搞。因此，你的確可以把基本類型數(shù)字傅物，字符串夯辖，布爾等當(dāng)對(duì)象使用的，只是注意語法要得體董饰。
同時(shí)我們注意到蒿褂，JavaScript中數(shù)字是不分浮點(diǎn)和整形的，所有數(shù)字其實(shí)均是浮點(diǎn)類型卒暂，只是把小數(shù)點(diǎn)省略了而以啄栓，比如你看到的1可以寫成1.，這也就是為什么當(dāng)你試圖1.toString()時(shí)會(huì)報(bào)錯(cuò)也祠，所以正確的寫法應(yīng)該是這樣：1..toString()昙楚，或者如上面所述加上括號(hào)，這里括號(hào)的作用是糾正JS解析器诈嘿，不要把1后面的點(diǎn)當(dāng)成小數(shù)點(diǎn)堪旧。內(nèi)部實(shí)現(xiàn)如上面所述，是將1.用包裝對(duì)象轉(zhuǎn)成對(duì)象再調(diào)用方法奖亚。
If語句的變形
當(dāng)你需要寫一個(gè)if語句的時(shí)候淳梦，不妨嘗試另一種更簡(jiǎn)便的方法，用JavaScript中的邏輯操作符來代替昔字。
var day=(new Date).getDay()===0;
//傳統(tǒng)if語句
if (day) {
alert('Today is Sunday!');
};
//運(yùn)用邏輯與代替if
day&&alert('Today is Sunday!');
比如上面的代碼爆袍，首先得到今天的日期，如果是星期天作郭，則彈窗陨囊，否則什么也不做。我們知道邏輯操作存在短路的情況所坯，對(duì)于邏輯與表達(dá)式谆扎，只有兩者都真才結(jié)果才為真，如果前面的day變量被判斷為假了芹助，那么對(duì)于整個(gè)與表達(dá)式來說結(jié)果就是假堂湖，所以就不會(huì)繼續(xù)去執(zhí)行后面的alert了，如果前面day為真状土，則還要繼續(xù)執(zhí)行后面的代碼來確定整個(gè)表達(dá)式的真假无蜂。利用這點(diǎn)達(dá)到了if的效果。
對(duì)于傳統(tǒng)的if語句蒙谓，如果執(zhí)行體代碼超過了 1 條語句斥季，則需要加花括號(hào)，而利用逗號(hào)表達(dá)式，可以執(zhí)行任意條代碼而不用加花括號(hào)酣倾。
if(conditoin) alert(1),alert(2),console.log(3);
上面if語句中舵揭，如果條件成立則執(zhí)行三個(gè)操作，但我們不需要用花括號(hào)將這三句代碼括起來躁锡。當(dāng)然午绳，這是不推薦的，這里是冷知識(shí)課堂:)
禁止別人以iframe加載你的頁面
下面的代碼已經(jīng)不言自明了映之，沒什么好多說的拦焚。
if (window.location != window.parent.location) window.parent.location = window.location;
console.table
Chrome專屬，IE繞道的console方法杠输∈臧埽可以將JavaScript關(guān)聯(lián)數(shù)組以表格形式輸出到瀏覽器console，效果很驚贊蠢甲，界面很美觀僵刮。
//采購情況
var data = [{'品名': '杜雷斯', '數(shù)量': 4}, {'品名': '岡本', '數(shù)量': 3}];
console.table(data);
