Hybrid框架UI重構之路：六、前端那點事兒（Javascript）

上文回顧 ：Hybird框架UI重構之路：五、前端那點事兒（HTML、CSS）

這里講述在開發的過程中，一些JS的關鍵點。

換膚

對於終端的換膚，我之前一篇文章有說了我的想法。

請查看：http://www.cnblogs.com/lovesong/p/4122262.html

 

iscroll的問題

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.點擊start

2.操作頁面

3.點擊stop，就會有這段時間內執行過的函數。

 

Take Heap Snapshot ：

獲取當前頁堆的快照

使用步驟：

1.直接點擊 Take Snapshot，就會有當前頁面的堆內存情況。

PS:這里只有堆，之所以不需要棧，是因為棧只是存儲變量和引用地址，而堆才是存儲對象的，棧的占的內存遠小於堆。

 

Record Heap Allocations 

記錄某段時間堆使用情況

 

即使是有這個工具，解決內存泄露還是不容易的，原因如下：

1.對象太多，很多情況下無所下手。

PS：有些人說關注array、closure這兩種對象，可是實際時候這些對象太多了。

2.有些對象很難找到泄露的原因，特別是一些復雜的控件。

 

總結

這一篇的里面的內容之間並沒有相關聯地方，只是一些零散關鍵點。

這一系列總結到此也將告一段落，六篇文章用了過年3天時間才完成，也只是想對自己的工作有個總結，也希望我的想法能告訴大家，一起提升。

 

附加：

最后附加上重構后的UI框架效果圖：

 

本文為原創文章，轉載請保留原出處，方便溯源，如有錯誤地方，謝謝指正。

本文地址 ： http://www.cnblogs.com/lovesong/p/4297224.html