在前端開發中，你曾經遇到過什麼大坑，很久才跳出來？

01-14

代碼構建：

gulp裡面單個task默認是非同步執行，只有有return語句存在時才是同步執行。

broswerify+watchify大部分示例代碼都告訴你要用 assign({},watchify.args,customerOpts)，這句話，而這句話會導致所有代碼都共享watchify.args這個東西，watchify.args中維護了一些cache，這些cache會導致很多代碼不重新增量編譯

手機移動端網頁：

大部分坑可以在這裡面找到，Mars/issues at master · AlloyTeam/Mars · GitHub，這幾天才經歷一個特別詭異的，safari下面div居然不能觸發click事件，後面加了一個style="cursor:pointer"才解決。

zepto：

這是一個輕量級的js庫，其中有實現$.ajax的方法，由於在xhr open前改動了withCredentials屬性，導致在部分安卓手機上直接出錯了，開始還以為系統不支持準備走jsonp。

css：

例子太多，舉個最近經歷的，flexbox中的flex-basis屬性，默認居然是auto!也就是說當你設置這個元素overflow-y:scroll，子元素高度超過父元素的大小時，你會發現它父元素上一個兄弟節點的高度會變的非常奇怪，原本的頂部高度固定，下面浮動拉升完全走樣。

順便再案例一下，React好！React好！React好！A JavaScript library for building user interfaces

就醬，有想到再繼續補充。。。

--------------------------------------9.19分割線-------------------------------------------

個人感覺如果屏幕滑動的流暢性，原生的body height應該是最好的。其次各種容器上面的overflowY:auto之類的也不錯，再其次就是人工translate了（可能這個和translate的演算法優化有關係）。不過translate非常好完成一些自定義效果，如果論靈活性還是它最好啦。

他們都叫我bug開發者，你們腦補一下。從來沒出過坑啊。。

舍入誤差

說多都是淚

兼容IE6

隨便說一個吧……webview + canvas

在某些安卓機型里，用webview查看帶有 canvas 的頁面會出現重影，看起來就是兩個完全一樣的canvas，更神奇的是，用 js 動態繪製 canvas 動畫的時候，兩個 canvas 是同時運動的……

試盡了各種辦法，查也查不到，關鍵沒法模擬，因為只有部分機型會出現（目前只發現魅族和三星）……

後來用了一個手機端萬能的 css - translateZ(0)，並且等頁面載入完畢以後， setTimeout(動畫function, 10)延遲載入動畫，才解決了這個問題……

因為非同步更新的兩個或多個狀態（數據的或者UI的）之間存在依賴關係（架構錯誤），導致很多存在但難以重現的bug。

zepto toggle觸發某個元素的click

第一次永遠不觸發

zepto給toggle寫了個list，不在裡面的元素都觸發不了

為什麼第二次能觸發

toggle第一次執行修改了某個變數的值

第二次不走list那裡了

就醬

產品提了個不可思議的功能構思,

我尋思著能做, 一個星期把功能完成, 然後易用性和bug改了一個多月.

最後還是把不可思議的需求改成了正常點的需求.

這次兩天搞定, 再無bug

寫了一大堆的JS 結果用一條CSS解決了

有那麼好幾次想把安卓炸了…

產品問我為啥這個邏輯這麼奇怪…

因為安卓上面的瀏覽器就是這麼奇怪…

辛辛苦苦把切的圖片小圖標換成了font icon，大部分測試機都過了，突然發現有一兩款比較流行的機型沒法正常顯示，然後又得換回來。？。

奇葩的瀏覽器內核。。。導致你的js，css在各個瀏覽器不一樣。。。

原以為做移動端就一片光明了,然而,還不如做IE6.

比如迭代for each裡面的內容然後修改……

最近做微信端的東西，x5內核各種蛋疼……

曾經做一個列印功能，就是那種不彈出頁面直接列印的，又找插件又自己開發的反正搗鼓了很久，總算結束了，但是周五好用的代碼周一就又不能用了，然後各種改啊，改的周期幾乎是開發周期的一倍多，後來發現是小票印表機壞了，唉。。。

我覺得是模塊化，之前js沒有模塊化呀………每次看著一萬多行的遺留代碼都很煩！！

我的坑在於需要實現一些 native 功能的時候 java/obj-c 代碼看不懂，而又不好意思天天去麻煩 native 開發同事。

keydown,keyup,keypress,click各種順序問題

昨天遇到一個，使用bootstrap的affix，總是不能出現正常的結果。

然後看bootstrapjs的源碼調試到最後發現js獲取的窗口高度值不對，縮放窗口也都是恆定的高度值。到最後發現在html頭部加上&就好了