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

上文回顧 ：Hybird框架UI重構之路：5、前端那點事兒（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