Hybrid框架UI重構之路：六、前端那點事兒（Javascript）
上文回顧 ：Hybird框架UI重構之路：五、前端那點事兒（HTML、CSS）
這裏講述在開發的過程中，一些JS的關鍵點。
對於終端的換膚，我之前一篇文章有說了我的想法。
請查看：http://www.cnblogs.com/lovesong/p/4122262.html
1.使用iscroll的頁面裏面有表單元素，當鍵盤彈出再縮回後，頁面拖不到最頂地方。
這個在android上總出現，使用的iscroll版本是4.2.5。
這原來是個很棘手的問題，導致了有input地方不能用iscroll，不過還好後來有個同事解決了，下面是他的方法：
var _focusElem = null; var _keyboardIsShow = false; document.body.addEventListener("focus", function(e) { _focusElem = e.target || e.srcElement; }, true); document.addEventListener("hidekeyboard", function() { wrapper.scrollTop = 0; //iscroll的DOM _focusElem && _focusElem.blur(); _keyboardIsShow = false; }, false); document.addEventListener("showkeyboard", function() { _keyboardIsShow = true; }, false); window.addEventListener("resize", function() { if (_focusElem && _keyboardIsShow) { _focusElem.scrollIntoView(false); } });
持久化存儲
1.localstorage
這個要打成安裝包纔會持久化存儲。
2.sessionstorage
web會話級別（頁面關閉即失效，刷新不失效）
Javascript內存泄露很容易產生，很多人並不關注這個問題，可能是不在意，或者是根本不知道，但它確實存在。
常見的泄露情況如下：
1.閉包上下文綁定後沒有釋放。
2.觀察者模式在添加通知後，沒有及時清理掉。
3.定時器的處理函數沒有及時釋放，沒有調用clearInterval方法
4.視圖層有控件重複添加，沒有移除。
在單頁模式下，內存泄露問題就被放大了。由於單頁是一直在一個webview（原生容器）裏，不可能銷燬webview來回收泄露的內存，而隨着用戶在單頁應用的操作，泄露的內存也將越增越多，機器也會變卡（在低端機比較明顯）。
檢查泄露工具：
其實很少有檢查js內存的工具，我只找到了用chrome開發者工具來檢查。
很多人都只用到Elements、Network、Sources這三個功能，Profiles這個查看內存功能應該沒多少人用過。
Profiles裏面有三個選項
Collect Javascript CPU Profile ：
獲取一段時間內，頁面執行過的函數。
使用步驟：
獲取當前頁堆的快照
使用步驟：
記錄某段時間堆使用情況
即使是有這個工具，解決內存泄露還是不容易的，原因如下：
1.對象太多，很多情況下無所下手。
PS：有些人說關注array、closure這兩種對象，可是實際時候這些對象太多了。
2.有些對象很難找到泄露的原因，特別是一些複雜的控件。
總結
這一篇的裏面的內容之間並沒有相關聯地方，只是一些零散關鍵點。
這一系列總結到此也將告一段落，六篇文章用了過年3天時間才完成，也只是想對自己的工作有個總結，也希望我的想法能告訴大家，一起提升。
附加：
最後附加上重構後的UI框架效果圖：
本文爲原創文章，轉載請保留原出處，方便溯源，如有錯誤地方，謝謝指正。