深入理解移動開發的模板復用機制

模板復用機制是android，ios等移動開發技術中類似listview，gridview,slideview等等之類組件常用的技術，deviceone的模板復用完全是和他們一致，deviceone有很多組件基本上涉及到多數據和模板的都會用到復用機制，有必要專門介紹一下。
以下都是以listview為例，但是其實整個機制適合所有deviceone類似的組件。

通過do_ScrollView展示多個View

我們先假定沒有do_ListView組件，但是我們需要展示10個View，這10個View樣式基本上是一樣的，10個View加起來高度超過了屏幕，我們這個時候需要用到do_ScrollView組件，參考下圖：

do_ScrollView的高度和屏幕高度一樣，10個View組成的do_ALayout/do_LinearLayout比Scrollview高不少，作為do_ScorllView的子View，這樣在運行時上下滑動。

這種情況使用do_SrcollView是很好的方式。但是我們假定如果需要顯示100條數據，或者1000條數據，還能用Scrollview嗎?顯然是不行的，每一個View都會占用一部分記憶體，10個View的記憶體App輕易處理，但是100個1000個View在記憶體里App會馬上崩潰。

通過do_ListView展示多個View

這個時候就要用到復用機制了，我們以do_ListView來說明。我們假定有100條數據，假定屏幕的大小正好是6個小View的高度和。那麼我們就用8個View來顯示這100條數據，而不是用100個View來顯示。看下圖：

我們可以看到初始狀態View1和View8看不到，我們只能看到View2—>View7，這6個View分別對應數據Data1—>Data6.

如果我們手勢下滑，View8就會上滑動，但是同時會把View1移動到最下麵，如下圖：

我們可以看到這個時候View2和View1看不到，我們只能看到View3—>View8,這6個View分別對應數據Data2—>Data7.

就這樣我們不管怎麼上下滑動，顯示100條數據只需要8個View，這8個View不斷的更新數據，不斷的復用來達到這個效果。

復用機制要註意的問題

1. 因為每一個View的樣式是通過數據來決定的，同時View又是復用的，對一個View的操作導致樣式變化需要更新到data，否則復用的View會樣式錯亂。

我們來看這個例子，這個模板view包含一個do_Label顯示對應數據里的id欄位，另外還有一個do_CheckBox組件，預設是沒有選中，目前顯示的是第3條到第8條數據，顯示後，用手勢點擊把第4條數據對應的view3里的checkbox勾選上。

當我們往下滑動，view不斷的被覆用，當滑動到第7條數據的時候，view3被第12條數據復用了，用戶就會發現第12條數據對應的checkbox被勾選了，這不是用戶期望的。

如何處理這個問題? 其實就是給對應的data每一項增加一個新的欄位，比如叫checked用來標示選中的狀態，如果我們點中了一項，就更新一下對應的data的checked屬性。

這樣，checkbox的選中狀態是由data里的checked屬性來控制，就不會出現這個問題了。
這個可以參考示例里的test1和test2

2. dataRefreshed事件

因為listview對應的每一行的view的ui都是復用的，所以對應的ui.js邏輯代碼也是復用的，只會執行一次，但是每一個view不斷的更新數據，我們有時候需要在更新數據後做某些操作，就可以使用dataRefreshed事件.參考示例代碼:

1. root.setMapping({
2. "index_label.text" : "name",
3. "do_CheckBox_1.checked" : "checked"
4. });
5. root.on("dataRefreshed", function() {
6. // 當數據更新到這個view之後才會觸發，這個時候根據checked值，修改背景色
7. // 這個事件在listview上下滑動的時候會執行多次，所以儘量不要在這個函數裡加太多操作，否則會卡頓
8. change_bgcolor();
9. })
11. function change_bgcolor() {
12. if (check_label.checked)
13. index_label.bgColor = "FF0000FF";
14. else
15. index_label.bgColor = "FF000000";
16. }

我們可以看到這個模板並沒有bind那個label的背景顏色，但是需要根據checkbox的狀態變化而變化背景色，則需要訂閱dataRefreshed事件。
詳細的示例參考這裡

3. 多模板

我們上面看到的所有示例都是以listview的單模板為例，也就是每一行的模板對應的ui文件都是一樣的。
但是實際上deviceone的模板機制支持多模板，可以模板文件完全不一樣。設置的方式也很簡單，只需要給listview的templates設置多個模板ui文件即可，中間用逗號隔開。
綁定數據也類似，每一行對應的數據結構和模板一致就可以。
詳細的示例參考這裡