寫在前面熟空，這篇文章僅用來記錄自己在前端方面曾經(jīng)踩過的一些坑，一些在當(dāng)時不那么容易費(fèi)了好一會神才能解決的坑腰湾，避免日后自己重復(fù)犯錯的同時箕昭，也給予別人一個參考，老司機(jī)就見笑了。
1. 用IE9以下版本的瀏覽器打開一個頁面，發(fā)現(xiàn)頁面上很多文字都帶上了一條黑色的刪除線，這讓人非常困惑撩笆，因?yàn)轫撁嫔洗蟛糠值淖侄歼@樣捺球，依我所知，只有 <del> 才有這樣的特性夕冲，但是這些字都并不是 <del> 標(biāo)簽的氮兵，還有另外一種可能，就是樣式去改變它耘擂，樣式上有個 text-decoration: line-through胆剧，但很快就否定了是樣式引起的問題，因?yàn)榧偃缡菢邮揭鸬脑捵碓瑒h除線跟字體顏色是保持一致的秩霍，但在頁面上是無論何種顏色的字體，刪除線都是黑色蚁阳，因此可以定位為 del 標(biāo)簽的問題铃绒，后來同事幫忙排查，查看起始標(biāo)簽跟閉合標(biāo)簽的個數(shù)是否一致螺捐，最終發(fā)現(xiàn)是少了一個 閉合標(biāo)簽 </del>颠悬，由于高級瀏覽器都太過智能了，能夠自己識別未閉合的標(biāo)簽并為其添加閉合標(biāo)簽定血，但像 IE9 以下這些老古董赔癌，是不懂這樣解析的。謹(jǐn)記
2. 在VIP的日子里澜沟，前端工作流迷之崩潰了灾票，多次是因?yàn)?node_modules 不見了，其實(shí)我也好想知道是為啥不見了茫虽，重新 junction 一下就好了刊苍。
3. IE8及其更低版本中，javaScript 內(nèi)置對象 Date 不支持傳入 "YYYY-MM-DD" 格式的參數(shù)濒析，比如 new Date("2016-08-04") 會返回 NaN正什，解決辦法可以通過正則將其格式改成 "YYYY/MM/DD" 可以使其正確返回。dateStr.replace(/-/g,"/") 即可
4. 由于公司的模板中是帶 php 判斷的号杏，所有會有不少 php 的代碼婴氮，然后今天就遇到一個關(guān)于php判斷的問題，‘a(chǎn)bcd’ == 0 在 php 中會輸出true盾致，經(jīng)查詢文檔：如果比較一個數(shù)字和字符串或者比較涉及到數(shù)字內(nèi)容的字符串莹妒，則字符串會被轉(zhuǎn)換為數(shù)值并且比較按照數(shù)值來進(jìn)行。此規(guī)則也適用于switch語句绰上。當(dāng)用 === 或 !== 進(jìn)行比較時則不進(jìn)行類型轉(zhuǎn)換，因?yàn)榇藭r類型和數(shù)值都要比對渠驼。額蜈块，還是讓我費(fèi)了一個多小時哎~
5. 今天遇到一個坑，與其說是坑，其實(shí)算是個瀏覽器的特性吧百揭。我發(fā)現(xiàn)在 js 中有一處原來是用 data('sizeName')爽哎，所以我就很自然的去新的標(biāo)簽也設(shè)置同樣的屬性，但后來怎么都拿不到我想要的值器一，都是 undefined课锌，后來查證，原來是給標(biāo)簽 是給標(biāo)簽設(shè)置 data-xxx 屬性時祈秕，瀏覽器會自動把你后面 xxx 字符串中所有的字母轉(zhuǎn)換成小寫渺贤，因?yàn)?html 標(biāo)準(zhǔn)中 html 屬性是不區(qū)分大小寫的。但是 js 卻可以用 data('sizeName') 來拿數(shù)據(jù)请毛？why ? 查了下源碼志鞍，原來是這樣定義的 data-size-name=xxx... ?ORZ~~所以，以后最好還是用小寫來進(jìn)行命名方仿，而且 html 與 js 使用一致的名稱固棚，這樣能大大提高發(fā)現(xiàn)問題的效率啊~
——20160819
6. 頁面查看的源碼是直接輸出的 HTML 代碼和 php 數(shù)據(jù)，是未經(jīng) js 處理的代碼仙蚜，今天在調(diào)試器中調(diào)試的時候發(fā)現(xiàn)修改代碼沒有生效此洲，然后查看源碼后又發(fā)現(xiàn)又是修改后的代碼，后來跟問了同事（www）才得知源碼是未經(jīng)腳本處理的代碼委粉，這就可以得知 JavaScript 對其做了覆蓋呜师，同時這里也可以看到寫在 html 上的代碼顯得多余了，這也一定程度的違背了《編寫可維護(hù)的 JavaScript 》的編碼原則艳丛，這樣會增加代碼的維護(hù)成本匣掸，因?yàn)榧偃缦胍o某個標(biāo)簽添加屬性，當(dāng)然會首先去排查 html 的代碼氮双。今后要盡可能避免 JavaScript 中插入 html 代碼碰酝，有需要時可以使用模板引擎。
7. 昨天踩了一個非常 low 逼的坑（嚴(yán)肅臉戴差，坑也是有尊嚴(yán)的）送爸，我有段代碼是這樣寫的
然而看上去并沒有發(fā)現(xiàn)有什么問題，而且在高級瀏覽器上都能正常運(yùn)行暖释，但是在IE及其更低版本卻只能賦值價(jià)格符號袭厂，于是我斷點(diǎn)看看 money 變量的值是不是 undefined 或者為空，并沒有球匕！是正確的值纹磺！然后我嘗試在后面加一些字符串，發(fā)現(xiàn)竟然連字符串都不能輸出亮曹！再在價(jià)格符號和價(jià)格變量之間加字符串橄杨，好了秘症，終于出來了。然后我就想這到底是什么原因式矫，為什么加了字符串卻可以乡摹，然后細(xì)看了下，發(fā)現(xiàn)價(jià)格字符串少了個分號采转，導(dǎo)致IE不能正常解析html代碼聪廉，這個真是夠嗆的。其實(shí)我都不好意思把這個坑記下來了~
8. 在文檔流關(guān)閉后故慈，異步請求回來的 script 中不可以使用 document.write(), 我暫時想象不到這種場景會出現(xiàn)在什么樣的業(yè)務(wù)上板熊，不過這個問題還是可以解決的，比如 append惯悠，innerHtml等等邻邮，參見傳送門>>Execute write on doc: It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.
9. js中判斷條件的變量，如果不能確定值是否為 true 或 false克婶，最好是使用與具體的值比較作為判斷條件而非直接使用類似 if(isSoldout) 這樣的判斷筒严，因?yàn)榧偃?isSoldout 的值是字符串 0 時，該判斷條件為真所以程序會跑到 if 下面的代碼中情萤，這樣不符合我們的預(yù)期鸭蛙，所以往往會造成錯誤，有時甚至?xí)驗(yàn)閿?shù)據(jù)的缺失而導(dǎo)致頁面運(yùn)行被中斷筋岛，昨天就因?yàn)樵?php 輸出變量的值時多加了引號導(dǎo)致開關(guān)值為 0 的時候也跑了開關(guān)為開狀態(tài)的代碼娶视，頁面報(bào)錯，這個導(dǎo)致了嚴(yán)重了線上報(bào)錯 T^T
——20160907
10. 寫程序的時候睁宰，尤其是 ajax 請求肪获，要考慮 CDN 的因素，什么情況下應(yīng)該讀 CDN柒傻，什么情況下應(yīng)該回服務(wù)器取最新的數(shù)據(jù)孝赫？而決定這個問題的關(guān)鍵因素就是請求 url 的參數(shù)，假如參數(shù)中帶有隨機(jī)數(shù)红符，這完全就是等于 always 回服務(wù)器取數(shù)據(jù)青柄，而不是讀 CDN，要考慮是否有這個必要预侯，否則 CDN 的使用率會大大降低致开。
11. 在Chrome 中，有時候會有名字帶有 VM+數(shù)字 的腳本萎馅，然而這些文件并沒有特殊的含義双戳，是由 Chrome 自動識別生成的，而生成這些文件的規(guī)則糜芳，是頁面加載的 HTML 中包含 script 標(biāo)簽飒货，里面的腳本內(nèi)容沒有指定的文件名千诬，比如使用 eval()（更多解釋詳見 >> Chrome Development Tool: [VM] file from javascript? Stackoverflow 真是一個好東西）
12. 頁面中 window 對象和 document 的寬度對比
$(window).width();// returns width of browser viewport
$(document).width();// returns width of HTML document
獲取到 window 寬度是當(dāng)前視窗的寬度，而 document膏斤，則是頁面真正的寬度，上周在公司的項(xiàng)目中邪驮，就踩到這方面問題的坑莫辨，頁面有一個彈窗，由于彈窗觸發(fā)時毅访，其內(nèi)容是為空的沮榜，后來才把相應(yīng) html 內(nèi)容塞到里面，此時彈窗已居中喻粹，塞內(nèi)容后重置彈窗的位置發(fā)現(xiàn)仍然沒有居中對齊蟆融。排查原因后發(fā)現(xiàn)是因?yàn)橥鶑棿叭麅?nèi)容后，超出了原來 document 的寬度守呜，使得 document 與 window 的寬度不一致型酥，而公司的組件是以 document 的寬高來計(jì)劃居中的值，left 值一直計(jì)算不準(zhǔn)確正是因?yàn)?document 的寬度因?yàn)閺棿皟?nèi)容的增而變大了查乒，導(dǎo)致 left 值也相應(yīng)的增大弥喉。
