日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢(xún)
選擇下列產(chǎn)品馬上在線(xiàn)溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
前端不為人知的一面：前端冷知識(shí)集錦

前端已經(jīng)被玩兒壞了！像console.log()可以向控制臺(tái)輸出圖片等炫酷的玩意已經(jīng)不是什么新聞了，像用||操作符給變量賦默認(rèn)值也是人盡皆知的舊聞了，今天看到Quora上一個(gè)帖子，瞬間又GET了好多前端技能，一些屬于技巧，一些則是聞所未聞的冷知識(shí)，一時(shí)間還消化不過(guò)來(lái)?，F(xiàn)分類(lèi)整理出來(lái)分享給大家，也補(bǔ)充了一些平時(shí)的積累和擴(kuò)展了一些內(nèi)容。

成都創(chuàng)新互聯(lián)公司主要從事網(wǎng)站制作、成都網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)新民,十年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專(zhuān)業(yè),歡迎來(lái)電咨詢(xún)建站服務(wù):13518219792

HTML篇

瀏覽器地址欄運(yùn)行JavaScript代碼

這個(gè)很多人應(yīng)該還是知道的，在瀏覽器地址欄可以直接運(yùn)行JavaScript代碼，做法是以javascript:開(kāi)頭后跟要執(zhí)行的語(yǔ)句。比如：

 
 
    
  
  
  1. javascript:alert('hello from address bar :)'); 
    2.

將以上代碼貼到瀏覽器地址欄回車(chē)后alert正常執(zhí)行，一個(gè)彈窗神現(xiàn)。

需要注意的是如果是通過(guò)copy paste代碼到瀏覽器地址欄的話(huà)，IE及Chrome會(huì)自動(dòng)去掉代碼開(kāi)頭的javascript:，所以需要手動(dòng)添加起來(lái)才能正確執(zhí)行，而Firefox中雖然不會(huì)自動(dòng)去掉，但它根本就不支持在地址欄運(yùn)行JS代碼，sigh~

這一技術(shù)在我的另一篇博文《讓Chrome 接管郵件連接，收發(fā)郵件更方便了》中有使用到，利用在瀏覽器地址欄中執(zhí)行JavaScript代碼將Gmail設(shè)置為系統(tǒng)的郵件接管程序。

瀏覽器地址欄運(yùn)行HTML代碼

如果說(shuō)上面那條小秘密知道的人還算多的話(huà)，這條秘笈知道的人就要少一些了，在非IE內(nèi)核的瀏覽器地址欄可以直接運(yùn)行HTML代碼！

比如在地址欄輸入以下代碼然后回車(chē)運(yùn)行，會(huì)出現(xiàn)指定的頁(yè)面內(nèi)容。

 
 
    
  
  
  1. data:text/html,
    Hello, world!
     
    2.

你造么，可以把瀏覽器當(dāng)編輯器

還是瀏覽器地址欄上做文章，將以下代碼貼到地址欄運(yùn)行后瀏覽器變成了一個(gè)原始而簡(jiǎn)單的編輯器，與Windows自帶的notepad一樣，吼吼。

 
 
    
  
  
  1. data:text/html,  
    2.

歸根結(jié)底多虧了HTML5中新加的contenteditable屬性，當(dāng)元素指定了該屬性后，元素的內(nèi)容成為可編輯狀態(tài)。

推而廣之，將以下代碼放到console執(zhí)行后，整個(gè)頁(yè)面將變得可編輯，隨意踐踏吧~

 
 
    
  
  
  1. document.body.contentEditable='true';  
    2.

利用a標(biāo)簽自動(dòng)解析URL

很多時(shí)候我們有從一個(gè)URL中提取域名，查詢(xún)關(guān)鍵字，變量參數(shù)值等的需要，而萬(wàn)萬(wàn)沒(méi)想到可以讓瀏覽器方便地幫我們完成這一任務(wù)而不用我們寫(xiě)正則去抓取。方法就在JS代碼里先創(chuàng)建一個(gè)a標(biāo)簽然后將需要解析的URL賦值給a的href屬性，然后就得到了一切我們想要的了。

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

利用這一原理，稍微擴(kuò)展一下，就得到了一個(gè)更加健壯的解析URL各部分的通用方法了。下面代碼來(lái)自James的博客。

 
 
    
  
  
  1. function parseURL(url) {  
    2. 
  
  
  2.     var a =  document.createElement('a');  
    3. 
  
  
  3.     a.href = url;  
    4. 
  
  
  4.     return {  
    5. 
  
  
  5.         source: url,  
    6. 
  
  
  6.         protocol: a.protocol.replace(':',''),  
    7. 
  
  
  7.         host: a.hostname,  
    8. 
  
  
  8.         port: a.port,  
    9. 
  
  
  9.         query: a.search,  
    10. 
  
  
  10.         params: (function(){  
    11. 
  
  
  11.             var ret = {},  
    12. 
  
  
  12.                 seg = a.search.replace(/^\?/,'').split('&'),  
    13. 
  
  
  13.                 len = seg.length, i = 0, s;  
    14. 
  
  
  14.             for (;i
  
  
  15.                 if (!seg[i]) { continue; }  
    16. 
  
  
  16.                 s = seg[i].split('=');  
    17. 
  
  
  17.                 ret[s[0]]= s[1];  
    18. 
  
  
  18.             }  
    19. 
  
  
  19.             return ret;  
    20. 
  
  
  20.         })(),  
    21. 
  
  
  21.         file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1],  
    22. 
  
  
  22.         hash: a.hash.replace('#',''),  
    23. 
  
  
  23.         path: a.pathname.replace(/^([^\/])/,'/$1'),  
    24. 
  
  
  24.         relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [,''])[1],  
    25. 
  
  
  25.         segments: a.pathname.replace(/^\//,'').split('/')  
    26. 
  
  
  26.     };  
    27. 
  
  
  27. }  
    28.

頁(yè)面擁有ID的元素會(huì)創(chuàng)建全局變量

在一張HTML頁(yè)面中，所有設(shè)置了ID屬性的元素會(huì)在JavaScript的執(zhí)行環(huán)境中創(chuàng)建對(duì)應(yīng)的全局變量，這意味著document.getElementByID像人的闌尾一樣顯得多余了。但實(shí)際項(xiàng)目中最好老老實(shí)實(shí)該怎么寫(xiě)就怎么寫(xiě)，畢竟常規(guī)代碼出亂子的機(jī)會(huì)要小得多。
 
  •  

    • 加載CDN文件時(shí)，可以省掉HTTP標(biāo)識(shí)

    現(xiàn)在很流行的CDN即從專(zhuān)門(mén)的服務(wù)器加載一些通用的JS和CSS文件，出于安全考慮有的CDN服務(wù)器使用HTTPS方式連接，而有的是傳統(tǒng)的HTTP，其實(shí)我們?cè)谑褂脮r(shí)可以忽略掉這個(gè)，將它從URL中省去。

     
 
      
  
  
    1.  
      2.

    這一點(diǎn)在之前一篇譯文博客《jQuery編程最佳實(shí)踐》中也有提到。

    利用script標(biāo)簽保存任意信息

    將script標(biāo)簽設(shè)置為type='text'然后可以在里面保存任意信息，之后可以在JavaScript代碼中很方便地獲取。

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

    CSS篇

    關(guān)于CSS的惡作劇

    相信你看完以下代碼后能夠預(yù)料到會(huì)出現(xiàn)什么效果。

     
 
      
  
  
    1. *{  
      2. 
  
  
    2.     cursor: none!important;  
      3. 
  
  
    3. }  
      4.

    簡(jiǎn)單的文字模糊效果

    以下兩行簡(jiǎn)單的CSS3代碼可達(dá)到將文字模糊化處理的目的，出來(lái)的效果有點(diǎn)像使用PS的濾鏡，so cool!

     
 
      
  
  
    1. p {  
      2. 
  
  
    2.     color: transparent;  
      3. 
  
  
    3.     text-shadow: #111 0 0 5px;  
      4. 
  
  
    4. } 
      5.

    垂直居中

    有好多次博主都有這樣的需求，垂直居中顯示某個(gè)DIV，我們知道CSS中天然有水平居中的樣式text-align:center。唯獨(dú)這個(gè)垂直居中無(wú)解。

    當(dāng)然你可以將容器設(shè)置為display:table，然后將子元素也就是要垂直居中顯示的元素設(shè)置為display:table-cell，然后加上vertical-align:middle來(lái)實(shí)現(xiàn)，但此種實(shí)現(xiàn)往往會(huì)因?yàn)閐isplay：table而破壞整體布局，那還不如直接用table標(biāo)簽了呢。

    下面這個(gè)樣式利用了translate來(lái)巧妙實(shí)現(xiàn)了垂直居中樣式，需IE9+。

     
 
      
  
  
    1. .center-vertical {  
      2. 
  
  
    2.     position: relative;  
      3. 
  
  
    3.     top: 50%;  
      4. 
  
  
    4.     transform: translateY(-50%);  
      5. 
  
  
    5. } 
      6.

    相比而言，水平居中要簡(jiǎn)單得多，像上面提到的text-align:center，經(jīng)常用到的技巧還有margin:0 auto。但對(duì)于margin大法也只在子元素寬度小于容器寬度時(shí)管用，當(dāng)子元素寬度大于容器寬度時(shí)此法失效。

    如法炮制，利用left和transform同樣可實(shí)現(xiàn)水平居中，不過(guò)意義不大，畢竟text-align和margin差不多滿(mǎn)足需求了。

     
 
      
  
  
    1. .center-horizontal {  
      2. 
  
  
    2.     position: relative;  
      3. 
  
  
    3.     left: 50%;  
      4. 
  
  
    4.     transform: translateX(-50%);   
      5. 
  
  
    5. }  
      6.

    多重邊框

    利用重復(fù)指定box-shadow來(lái)達(dá)到多個(gè)邊框的效果

    在線(xiàn)演示

     
 
      
  
  
    1. /*CSS Border with Box-Shadow Example*/ 
      2. 
  
  
    2. div {  
      3. 
  
  
    3.     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);  
      4. 
  
  
    4.     height: 200px;  
      5. 
  
  
    5.     margin: 50px auto;  
      6. 
  
  
    6.     width: 400px 
      7. 
  
  
    7. }  
      8.

    實(shí)時(shí)編輯CSS

    通過(guò)設(shè)置style標(biāo)簽的display:block樣式可以讓頁(yè)面的style標(biāo)簽顯示出來(lái)，并且加上contentEditable屬性后可以讓樣式成為可編輯狀態(tài)，更改后的樣式效果也是實(shí)時(shí)更新呈現(xiàn)的。此技巧在IE下無(wú)效。擁有此技能者，逆天也！

     
 
      
  
  
    1.  
      2. 
  
  
    2.  
      3. 
  
  
    3.      
      4. 
  
  
    4.          
      5. 
  
  
    5.             body { color: blue }  
      6. 
  
  
    6.          
      7. 
  
  
    7.      
      8. 
  
  
    8.  
      9.

    創(chuàng)建長(zhǎng)寬比固定的元素

    通過(guò)設(shè)置父級(jí)窗口的padding-bottom可以達(dá)到讓容器保持一定的長(zhǎng)度比的目的，這在響應(yīng)式頁(yè)面設(shè)計(jì)中比較有用，能夠保持元素不變形。

     
 
      
  
  
    1.  
      2. 
  
  
    2.      
      3. 
  
  
    3.         this content will have a constant aspect ratio that varies based on the width.  
      4. 
  
  
    4.     
     
  •  

    CSS中也可以做簡(jiǎn)單運(yùn)算

    通過(guò)CSS中的calc方法可以進(jìn)行一些簡(jiǎn)單的運(yùn)算，從而達(dá)到動(dòng)態(tài)指定元素樣式的目的。

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

    #p#

    JavaScript篇

    生成隨機(jī)字符串

    利用Math.random和toString生成隨機(jī)字符串，來(lái)自前一陣子看到的一篇博文。這里的技巧是利用了toString方法可以接收一個(gè)基數(shù)作為參數(shù)的原理，這個(gè)基數(shù)從2到36封頂。如果不指定，默認(rèn)基數(shù)是10進(jìn)制。略屌！ 

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

    整數(shù)的操作

    JavaScript中是沒(méi)有整型概念的，但利用好位操作符可以輕松處理，同時(shí)獲得效率上的提升。

    |0和~~是很好的一個(gè)例子，使用這兩者可以將浮點(diǎn)轉(zhuǎn)成整型且效率方面要比同類(lèi)的parseInt,Math.round 要快。在處理像素及動(dòng)畫(huà)位移等效果的時(shí)候會(huì)很有用。性能比較見(jiàn)此。

     
 
      
  
  
    1. var foo = (12.4 / 4.13) | 0;//結(jié)果為3  
      2. 
  
  
    2. var bar = ~~(12.4 / 4.13);//結(jié)果為3 
      3.

    順便說(shuō)句，!!將一個(gè)值方便快速轉(zhuǎn)化為布爾值 !!window===true 。

    重寫(xiě)原生瀏覽器方法以實(shí)現(xiàn)新功能

    下載的代碼通過(guò)重寫(xiě)瀏覽器的alert讓它可以記錄彈窗的次數(shù)。

     
 
      
  
  
    1. (function() {  
      2. 
  
  
    2.     var oldAlert = window.alert,  
      3. 
  
  
    3.         count = 0;  
      4. 
  
  
    4.     window.alert = function(a) {  
      5. 
  
  
    5.         count++;  
      6. 
  
  
    6.         oldAlert(a + "\n You've called alert " + count + " times now. Stop, it's evil!");  
      7. 
  
  
    7.     };  
      8. 
  
  
    8. })();  
      9. 
  
  
    9. alert("Hello World"); 
      10.

    關(guān)于console的惡作劇

    關(guān)于重寫(xiě)原生方法，這里有個(gè)惡作劇大家可以拿去尋開(kāi)心。Chrome的console.log是支持對(duì)文字添加樣式的，甚至log圖片都可以。于是可以重寫(xiě)掉默認(rèn)的log方法，把將要log的文字應(yīng)用到CSS的模糊效果，這樣當(dāng)有人試圖調(diào)用console.log()的時(shí)候，出來(lái)的是模糊不清的文字。好冷，我表示沒(méi)有笑。

    是從這篇G+帖子的評(píng)論里看到的。使用之后的效果是再次調(diào)用log會(huì)輸出字跡模糊不清的文字。

     
 
      
  
  
    1. var _log = console.log;  
      2. 
  
  
    2. console.log = function() {  
      3. 
  
  
    3.   _log.call(console, '%c' + [].slice.call(arguments).join(' '), 'color:transparent;text-shadow:0 0 2px rgba(0,0,0,.5);');  
      4. 
  
  
    4. };  
      5.

    不聲明第三個(gè)變量的值交換

    我們都知道交換兩個(gè)變量值的常規(guī)做法，那就是聲明一個(gè)中間變量來(lái)暫存。但鮮有人去挑戰(zhàn)不聲明中間變量的情況，下面的代碼給出了這種實(shí)現(xiàn)。蠻有創(chuàng)意 的。

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

    萬(wàn)物皆對(duì)象

    在JavaScript的世界，萬(wàn)物皆對(duì)象。除了null和undefined，其他基本類(lèi)型數(shù)字，字符串和布爾值都有對(duì)應(yīng)有包裝對(duì)象。對(duì)象的一個(gè)特征是你可以在它身上直接調(diào)用方法。對(duì)于數(shù)字基本類(lèi)型，當(dāng)試圖在其身上調(diào)用toString方法會(huì)失敗，但用括號(hào)括起來(lái)后再調(diào)用就不會(huì)失敗了，內(nèi)部實(shí)現(xiàn)是用相應(yīng)的包裝對(duì)象將基本類(lèi)型轉(zhuǎn)為對(duì)象。所以(1).toString()相當(dāng)于new Number(1).toString()。因此，你的確可以把基本類(lèi)型數(shù)字，字符串，布爾等當(dāng)對(duì)象使用的，只是注意語(yǔ)法要得體。

    同時(shí)我們注意到，JavaScript中數(shù)字是不分浮點(diǎn)和整形的，所有數(shù)字其實(shí)均是浮點(diǎn)類(lèi)型，只是把小數(shù)點(diǎn)省略了而以，比如你看到的1可以寫(xiě)成1.，這也就是為什么當(dāng)你試圖1.toString()時(shí)會(huì)報(bào)錯(cuò)，所以正確的寫(xiě)法應(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語(yǔ)句的變形

    當(dāng)你需要寫(xiě)一個(gè)if語(yǔ)句的時(shí)候，不妨嘗試另一種更簡(jiǎn)便的方法，用JavaScript中的邏輯操作符來(lái)代替。

     
 
      
  
  
    1. var day=(new Date).getDay()===0;  
      2. 
  
  
    2. //傳統(tǒng)if語(yǔ)句  
      3. 
  
  
    3. if (day) {  
      4. 
  
  
    4.     alert('Today is Sunday!');  
      5. 
  
  
    5. };  
      6. 
  
  
    6. //運(yùn)用邏輯與代替if  
      7. 
  
  
    7. day&&alert('Today is Sunday!');  
      8.

    比如上面的代碼，首先得到今天的日期，如果是星期天，則彈窗，否則什么也不做。我們知道邏輯操作存在短路的情況，對(duì)于邏輯與表達(dá)式，只有兩者都真才結(jié)果才為真，如果前面的day變量被判斷為假了，那么對(duì)于整個(gè)與表達(dá)式來(lái)說(shuō)結(jié)果就是假，所以就不會(huì)繼續(xù)去執(zhí)行后面的alert了，如果前面day為真，則還要繼續(xù)執(zhí)行后面的代碼來(lái)確定整個(gè)表達(dá)式的真假。利用這點(diǎn)達(dá)到了if的效果。

    對(duì)于傳統(tǒng)的if語(yǔ)句，如果執(zhí)行體代碼超過(guò)了1 條語(yǔ)句，則需要加花括號(hào)，而利用逗號(hào)表達(dá)式，可以執(zhí)行任意條代碼而不用加花括號(hào)。

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

    上面if語(yǔ)句中，如果條件成立則執(zhí)行三個(gè)操作，但我們不需要用花括號(hào)將這三句代碼括起來(lái)。當(dāng)然，這是不推薦的，這里是冷知識(shí)課堂:)

    禁止別人以iframe加載你的頁(yè)面

    下面的代碼已經(jīng)不言自明了，沒(méi)什么好多說(shuō)的。

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

    console.table

    Chrome專(zhuān)屬，IE繞道的console方法?？梢詫avaScript關(guān)聯(lián)數(shù)組以表格形式輸出到瀏覽器console，效果很驚贊，界面很美觀。

     
 
      
  
  
    1. //采購(gòu)情況  
      2. 
  
  
    2. var teams_data = [{'品名': '杜雷斯', '數(shù)量': 4}, {'品名': '岡本', '數(shù)量': 3}];  
      3. 
  
  
    3. console.table(teams_data); 
      4.

    原文鏈接：http://www.cnblogs.com/Wayou/p/things_you_dont_know_about_frontend.html


    新聞標(biāo)題：前端不為人知的一面：前端冷知識(shí)集錦
    標(biāo)題來(lái)源：http://www.dlmjj.cn/article/cddicjg.html