為什么80%的碼農(nóng)都做不了架構(gòu)師？>>> ??

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

通過do_ScrollView展示多個(gè)View

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

do_ScrollView的高度和屏幕高度一樣，10個(gè)View組成的do_ALayout/do_LinearLayout比Scrollview高不少，作為do_ScorllView的子View，這樣在運(yùn)行時(shí)上下滑動(dòng)。

這種情況使用do_SrcollView是很好的方式。但是我們假定如果需要顯示100條數(shù)據(jù)，或者1000條數(shù)據(jù)，還能用Scrollview嗎?顯然是不行的，每一個(gè)View都會(huì)占用一部分內(nèi)存，10個(gè)View的內(nèi)存App輕易處理，但是100個(gè)1000個(gè)View在內(nèi)存里App會(huì)馬上崩潰。

通過do_ListView展示多個(gè)View

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

我們可以看到初始狀態(tài)View1和View8看不到，我們只能看到View2—>View7，這6個(gè)View分別對(duì)應(yīng)數(shù)據(jù)Data1—>Data6.

如果我們手勢(shì)下滑，View8就會(huì)上滑動(dòng)，但是同時(shí)會(huì)把View1移動(dòng)到最下面，如下圖：

我們可以看到這個(gè)時(shí)候View2和View1看不到，我們只能看到View3—>View8,這6個(gè)View分別對(duì)應(yīng)數(shù)據(jù)Data2—>Data7.

就這樣我們不管怎么上下滑動(dòng)，顯示100條數(shù)據(jù)只需要8個(gè)View，這8個(gè)View不斷的更新數(shù)據(jù)，不斷的復(fù)用來達(dá)到這個(gè)效果。

復(fù)用機(jī)制要注意的問題

1. 因?yàn)槊恳粋€(gè)View的樣式是通過數(shù)據(jù)來決定的，同時(shí)View又是復(fù)用的，對(duì)一個(gè)View的操作導(dǎo)致樣式變化需要更新到data，否則復(fù)用的View會(huì)樣式錯(cuò)亂。

我們來看這個(gè)例子，這個(gè)模板view包含一個(gè)do_Label顯示對(duì)應(yīng)數(shù)據(jù)里的id字段，另外還有一個(gè)do_CheckBox組件，缺省是沒有選中，目前顯示的是第3條到第8條數(shù)據(jù)，顯示后，用手勢(shì)點(diǎn)擊把第4條數(shù)據(jù)對(duì)應(yīng)的view3里的checkbox勾選上。

當(dāng)我們往下滑動(dòng)，view不斷的被復(fù)用，當(dāng)滑動(dòng)到第7條數(shù)據(jù)的時(shí)候，view3被第12條數(shù)據(jù)復(fù)用了，用戶就會(huì)發(fā)現(xiàn)第12條數(shù)據(jù)對(duì)應(yīng)的checkbox被勾選了，這不是用戶期望的。

如何處理這個(gè)問題? 其實(shí)就是給對(duì)應(yīng)的data每一項(xiàng)增加一個(gè)新的字段，比如叫checked用來標(biāo)示選中的狀態(tài)，如果我們點(diǎn)中了一項(xiàng)，就更新一下對(duì)應(yīng)的data的checked屬性。

這樣，checkbox的選中狀態(tài)是由data里的checked屬性來控制，就不會(huì)出現(xiàn)這個(gè)問題了。
這個(gè)可以參示例里的test1和test2

2. dataRefreshed事件

因?yàn)閘istview對(duì)應(yīng)的每一行的view的ui都是復(fù)用的，所以對(duì)應(yīng)的ui.js邏輯代碼也是復(fù)用的，只會(huì)執(zhí)行一次，但是每一個(gè)view不斷的更新數(shù)據(jù)，我們有時(shí)候需要在更新數(shù)據(jù)后做某些操作，就可以使用dataRefreshed事件.參示例代碼:

root.setMapping({"index_label.text"?:?"name","do_CheckBox_1.checked"?:?"checked" }); root.on("dataRefreshed",?function()?{//?當(dāng)數(shù)據(jù)更新到這個(gè)view之后才會(huì)觸發(fā)，這個(gè)時(shí)候根據(jù)checked值，修改背景色//?這個(gè)事件在listview上下滑動(dòng)的時(shí)候會(huì)執(zhí)行多次，所以盡量不要在這個(gè)函數(shù)里加太多操作，否則會(huì)卡頓change_bgcolor(); }) function?change_bgcolor()?{if?(check_label.checked)index_label.bgColor?=?"FF0000FF";elseindex_label.bgColor?=?"FF000000"; }}

我們可以看到這個(gè)模板并沒有bind那個(gè)label的背景顏色，但是需要根據(jù)checkbox的狀態(tài)變化而變化背景色，則需要訂閱dataRefreshed事件。
詳細(xì)的示例參這里

3. 多模板

我們上面看到的所有示例都是以listview的單模板為例，也就是每一行的模板對(duì)應(yīng)的ui文件都是一樣的。
但是實(shí)際上deviceone的模板機(jī)制支持多模板，可以模板文件完全不一樣。設(shè)置的方式也很簡(jiǎn)單，只需要給listview的templates設(shè)置多個(gè)模板ui文件即可，中間用逗號(hào)隔開。
綁定數(shù)據(jù)也類似，每一行對(duì)應(yīng)的數(shù)據(jù)結(jié)構(gòu)和模板一致就可以。
詳細(xì)的示例參這里

轉(zhuǎn)載于:https://my.oschina.net/voxer/blog/657828

總結(jié)

以上是生活随笔為你收集整理的深入理解移动开发的模板复用机制的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。