最近做了一個webview中的兌換頁面，本來以為很簡單，想不到遇到了遠遠超出預期數量的BUG，記下來，以備后患。
1 inline-block元素折行
BUG描述：現在我有三個DIV，要在一列等寬排列，設定寬度為33.33333%，想象中應該是正好充滿一列。
然而事實是，div折行了=。=，div之間還出現了一個縫隙。
這個問題很常見，出現的原因是瀏覽器在解析html時認為兩個div之間有空格，而一個空格的占位是1/4em。
一般解決的辦法是設置父元素font-size=0,然后再給子元素設置字體。
這種方法在標准瀏覽器中不會出現錯位問題，但是在安卓2.3及以下的版本中，div仍然會折行！
最終解決方案是在html去掉所有的空格，like this
雖然這樣代碼看起來會很丑~
2 blur和tap事件觸發順序
這可能也是一個比較常見的問題。
邏輯是這樣的：在輸入框blur的時候來驗證某個div是否可以點擊。在tap這個div的時候給它添加樣式。需求上應該是先觸發blur，再觸發tap。
問題來了，js中是tap先觸發，然后blur才會觸發，這樣就導致無論blur驗證是否通過，div都是可以點擊的。
事件觸發的順序是這樣的：touchstart→→touchmove→→touchend→→tap→→焦點這個時候轉移→→blur→→activate(blur)→→200ms后click
解決的方法犧牲了一些用戶體驗，用click來替代tap。
經頭兒的指點，了解到blur這個方法不常用的原因，除了input檢查自身外很少用到blur。更好的方法是不要綁定blur事件，而是給body監聽tap事件，通過event.target和event.currentTarget來找到觸發事件的元素。
3 ajax傳data
在提交表單的時候，有時候需要自定義data里的數據，如果我們傳的數據中帶有字符串，要用雙引號來聲明。
這是因為在js中，聲明字符串用單雙引號都無所謂，但是在其他oo語言中，字符類型的格式定義格外嚴格，必須使用雙引號。使用單引號會報錯。
正確的做法是將data由json轉換為字符串：JSON.stringify(data)
4 剪切板
需求是點擊一個按鈕，然后將一串字符復制到系統的剪切板中。
以前chrome有個window.clipboard可以調用，不知道為什么現在成undefined了。另外這個方法的話本身只有IE和firefox才支持。
然后找到一個名為ZeroClipboard的插件，是用flash來實現的。如果是在pc端，這個插件倒是可以一用。但是考慮到ios並不支持flash，這個需求最后放棄了。
5 sass編譯錯誤
這個問題其實很蠢，如果project絕對路徑包含中文，sass在編譯時就會報如下錯誤，切記切記~
6 a標簽延遲添加attr
這個bug是webview在和客戶端進行交互時候出現的。
<a href="lock://back" class="back">返回</a>
和客戶端約定的是在頁面發生跳轉時，客戶端去捕獲這個鏈接，然后xxxx。現在這個頁面中有一個內頁，在內頁打開時a標簽綁定的事件是返回到外頁。
我一開始想的是在打開內頁之后移除a的href屬性，回到外頁后再添加上。然后問題也來了，我在回到外頁后加上href屬性，a標簽依然觸發了跳轉事件。
我嘗試用touchend事件來替代tap，無效。
最后是在回到外頁之后，給 a添加href的代碼加上setTimeout，這樣問題解決了，但是並不知道是不是最好的解決方法~歡迎指正。
更新一下，這里出現問題的原因是我先阻止了默認事件，然后再給a添加href，添加之后其實阻止默認事件已經無效了，所以href鏈接生效，跳轉。
這樣寫很容易解決了
$('.back').on('tap',function(e){
$('.back').attr('href','lock://back');
e.preventDefault();
})
7. ajax返回json
在ajax請求成功返回response后，js默認response是一個字符串。要將它解析為json格式有兩種方法。
(1)在請求時添加參數 dataType: JSON //(jquery)
(2) 使用JSON.parse方法
var _response = JSON.parse(response);
8 popup 畫面模糊
我用css3做了一個popup，彈窗有一個scale的transition。遇到了一個很痛苦的問題，困擾了自己很久。
在小米手機中(無論二三紅不紅)，在動畫進行和結束時，彈窗會變的很模糊，可以認為瀏覽器是認為scale之前(scale(0,0,0))的大小才是元素的原始大小，然后在此基礎上進行縮放。
查了好多文檔都沒有結果，最后還是我頭兒英明，解決方法時候在動畫結束后需要手動移除scale的class,彈窗顯示就正常啦~
9 浮點運算
這是js相傳已久的bug了，js在進行浮點運算時候會出很奇葩的bug.
alert(4.2+9.2) // 13.399999999999999
解決方法有很多，根據需求，我這里用了最簡單最省事的tofix().
10 回頭看自己的代碼
(1)因為是靜態的，所以如果有復用的html只能笨拙的復制粘貼。如果時間足夠的話，我會嘗試用handlebars來模板化自己的代碼。
(2)js也有很多地方是可以復用的，如果用prototype來寫可以節省一半的代碼。出現這問題是水平不夠。
(3)耐心不夠。當測試給我返回一堆一堆bug的時候，我覺得浮躁，只想把bug趕緊解決了，不能跳出去看自己的代碼。下場是在解決一個舊bug后又導致了一個新的bug，無論是對測試還是自己，工作效率都大大降低了。
無論什么時候，都要keep calm and carry on
目前就這么多了~
ps：
協同開發感覺是很難解決的問題。
這次項目后台用的python，因為時間很緊，所以前端后台同時開發。
造成的問題是我這里每次修改一個地方，后台都要跟着修改自己的template，如果修改的地方很多，后台就要浪費很多時間在重寫模板上，也不知道有什么比較好的方法。