混合模型列表項(xiàng)重用的方法及設(shè)備與流程

本申請(qǐng)涉及計(jì)算機(jī)領(lǐng)域，尤其涉及一種混合模型列表項(xiàng)重用的方法及設(shè)備。

背景技術(shù)：

hybrid(混合模型)開發(fā)，是指采用前端開發(fā)和native(原生端)開發(fā)混合的技術(shù)來開發(fā)程序，其中，前端開發(fā)，是指基于javascript、html、css等技術(shù)開發(fā)網(wǎng)頁和webapp；native開發(fā)，指基于手機(jī)等智能設(shè)備的本地操作系統(tǒng)的原生功能來編寫程序，比如基于ios、android等系統(tǒng)原生界面開發(fā)。react，是一款由facebook出品的js框架，用于規(guī)范化前端開發(fā)的一套構(gòu)建體系。react-native，是一款由facebook在react規(guī)范基礎(chǔ)上，推出的一套使用前端技術(shù)就能開發(fā)native應(yīng)用的技術(shù)實(shí)現(xiàn)框架。

hybrid開發(fā)是當(dāng)下移動(dòng)互聯(lián)網(wǎng)app非常流行的一種開發(fā)模式，是使用前端網(wǎng)頁的開發(fā)技術(shù)來進(jìn)行界面和業(yè)務(wù)的開發(fā)，而使用native開發(fā)來提供各種os原生的能力，以達(dá)到app擁有前端的動(dòng)態(tài)能力和native的體驗(yàn)效果。listview(列表視圖)是app最常見的一種展現(xiàn)形式，用于展示列表形態(tài)內(nèi)容的頁面，以列表的方式展現(xiàn)大量的有相同或者相似結(jié)構(gòu)的列表項(xiàng)，通?？梢灾С秩菁{各種列表項(xiàng)(listcell),這些列表項(xiàng)展現(xiàn)結(jié)構(gòu)基本相同，僅僅是要展現(xiàn)的信息內(nèi)容不同而已，其中，listcell是listview每行或者每個(gè)子項(xiàng)展現(xiàn)的內(nèi)容。由于屏幕顯示區(qū)域有限，所以屏幕在同一時(shí)刻，只能展現(xiàn) listview的部分列表項(xiàng)內(nèi)容，其他listcell，只能通過上下滾動(dòng)，將一些listcell滾動(dòng)入屏幕顯示區(qū)域，相應(yīng)的一些listview會(huì)滾動(dòng)出顯示區(qū)域。所以，用戶在屏幕可見的listcell總是很有限的，而目前的前端技術(shù)，卻需要由前端觸發(fā)native為所有的listcell創(chuàng)建實(shí)例和進(jìn)行渲染，存在很大的性能浪費(fèi)。具體來說，在react-native上現(xiàn)有的listview實(shí)現(xiàn)方案如圖1所示，由于listcell是在前端層定義的，react-native框架只能將listview的結(jié)構(gòu)原原本本的映射到native層，所以，如果這個(gè)listview有100個(gè)列表項(xiàng)，那么在native，就會(huì)創(chuàng)建100個(gè)listcell，并且對(duì)這個(gè)100個(gè)listcell進(jìn)行了布局和渲染，既消耗內(nèi)存，又消耗時(shí)間。

在列表滾動(dòng)過程中，移出可顯示區(qū)域的listcell，完全可以繼續(xù)復(fù)用來展現(xiàn)即將要移入可顯示區(qū)域的listcell，從而可以節(jié)省下創(chuàng)建和布局新listcell所需的內(nèi)存和時(shí)間，提升性能。而目前的hybrid技術(shù)，在開發(fā)listview中，由于listcell在前端中定義結(jié)構(gòu)布局和樣式，并且由前端觸發(fā)native創(chuàng)建listcell實(shí)例，受前端dom渲染機(jī)制的限制，native沒有辦法高效的重用listcell，因?yàn)橹貥?gòu)dom的代價(jià)更大。

目前native的開發(fā)，有相應(yīng)的技術(shù)實(shí)現(xiàn)listcell的重用，但是，由于hybrid技術(shù)使用前端技術(shù)來開發(fā)頁面，所以listview和listcell都是在前端中完成創(chuàng)建的，如果在native來創(chuàng)建和重用listcell，又無法將在前端定義的listcellclass傳遞給native，即在前端js(javascript)定義的listcell的class(樣式)，無法在native直接創(chuàng)建實(shí)例。所以，目前業(yè)界在hybrid開發(fā)中，還沒有技術(shù)可以實(shí)現(xiàn)前端listcell的復(fù)用。

技術(shù)實(shí)現(xiàn)要素：

本申請(qǐng)的一個(gè)目的是提供一種混合模型列表項(xiàng)重用的方法及設(shè)備，解決hybrid開發(fā)中，在前端定義listcell的結(jié)構(gòu)和樣式，而在native進(jìn)行l(wèi)istcell的創(chuàng)建和復(fù)用的問題。

根據(jù)本申請(qǐng)的一個(gè)方面，提供了一種混合模型列表項(xiàng)重用的方法，該方法包括：

在混合模型的前端對(duì)列表項(xiàng)的原型進(jìn)行定義；

在所述混合模型的原生端根據(jù)所述列表項(xiàng)的原型復(fù)制得到列表項(xiàng)，并對(duì)所述列表項(xiàng)進(jìn)行復(fù)用。

進(jìn)一步的，上述方法中，對(duì)列表項(xiàng)的原型進(jìn)行定義，包括：

對(duì)列表項(xiàng)的原型的結(jié)構(gòu)布局和樣式進(jìn)行定義。

進(jìn)一步的，上述方法中，所述列表項(xiàng)的原型為單個(gè)列表項(xiàng)的原型。

進(jìn)一步的，上述方法中，根據(jù)所述列表項(xiàng)的原型復(fù)制得到列表項(xiàng)，包括：

根據(jù)所述列表項(xiàng)的原型創(chuàng)建列表項(xiàng)模板；

對(duì)所述列表項(xiàng)模板進(jìn)行復(fù)制得到列表項(xiàng)；

將獲取到的列表項(xiàng)內(nèi)容填入復(fù)制得到列表項(xiàng)中，并顯示所述列表項(xiàng)。

進(jìn)一步的，上述方法中，對(duì)所述列表項(xiàng)模板進(jìn)行復(fù)制得到列表項(xiàng)，包括：

遍歷獲取列表項(xiàng)模板的所有子視圖；

創(chuàng)建包含所有子視圖及其屬性的列表項(xiàng)。

進(jìn)一步的，上述方法中，將獲取到的列表項(xiàng)內(nèi)容填入復(fù)制得到列表項(xiàng)中，包括：

將獲取到列表項(xiàng)內(nèi)容填入創(chuàng)建后的列表項(xiàng)的對(duì)應(yīng)的各個(gè)子視圖中。

進(jìn)一步的，上述方法中，所述列表項(xiàng)內(nèi)容從所述前端獲取。

進(jìn)一步的，上述方法中，對(duì)所述列表項(xiàng)模板進(jìn)行復(fù)制得到列表項(xiàng)中，

根據(jù)顯示區(qū)域能容納顯示的列表項(xiàng)的數(shù)量，來確定復(fù)制得到列表項(xiàng)的數(shù)量。

進(jìn)一步的，上述方法中，對(duì)所述列表項(xiàng)進(jìn)行復(fù)用，包括：

當(dāng)有列表項(xiàng)內(nèi)容移出所述顯示區(qū)域，將該移出的列表項(xiàng)內(nèi)容所屬的列表項(xiàng)回收為可復(fù)用的列表項(xiàng)；

當(dāng)有新的列表項(xiàng)內(nèi)容要移入所述顯示區(qū)域，判斷是否有可復(fù)用的列表項(xiàng)，

若有，將所述新的列表項(xiàng)內(nèi)容填入所述可復(fù)用列表項(xiàng)，顯示所述列表項(xiàng)；

若無，對(duì)所述列表項(xiàng)模板進(jìn)行復(fù)制得到列表項(xiàng)，將新的列表項(xiàng)內(nèi)容填入復(fù)制得到列表項(xiàng)中，顯示所述列表項(xiàng)。

根據(jù)本申請(qǐng)的另一方面，還提供了一種混合模型列表項(xiàng)重用的設(shè)備，該設(shè)備包括：

定義裝置，用于在混合模型的前端對(duì)列表項(xiàng)的原型進(jìn)行定義；

復(fù)制及復(fù)用裝置，用于在所述混合模型的原生端根據(jù)所述列表項(xiàng)的原型復(fù)制得到列表項(xiàng)，并對(duì)所述列表項(xiàng)進(jìn)行復(fù)用。

進(jìn)一步的，上述設(shè)備中，所述定義裝置，用于對(duì)列表項(xiàng)的原型的結(jié)構(gòu)布局和樣式進(jìn)行定義。

進(jìn)一步的，上述設(shè)備中，所述列表項(xiàng)的原型為單個(gè)列表項(xiàng)的原型。

進(jìn)一步的，上述設(shè)備中，所述復(fù)制及復(fù)用裝置，用于根據(jù)所述列表項(xiàng)的原型創(chuàng)建列表項(xiàng)模板；對(duì)所述列表項(xiàng)模板進(jìn)行復(fù)制得到列表項(xiàng)；將獲取到的列表項(xiàng)內(nèi)容填入復(fù)制得到列表項(xiàng)中，并顯示所述列表項(xiàng)。

進(jìn)一步的，上述設(shè)備中，所述復(fù)制及復(fù)用裝置，用于遍歷獲取列表項(xiàng)模板的所有子視圖；創(chuàng)建包含所有子視圖及其屬性的列表項(xiàng)。

進(jìn)一步的，上述設(shè)備中，所述復(fù)制及復(fù)用裝置，用于將獲取到列表項(xiàng)內(nèi)容填入創(chuàng)建后的列表項(xiàng)的對(duì)應(yīng)的各個(gè)子視圖中。

進(jìn)一步的，上述設(shè)備中，所述列表項(xiàng)內(nèi)容從所述前端獲取。

進(jìn)一步的，上述設(shè)備中，所述復(fù)制及復(fù)用裝置，用于根據(jù)顯示區(qū)域能容納顯示的列表項(xiàng)的數(shù)量，來確定復(fù)制得到列表項(xiàng)的數(shù)量。

進(jìn)一步的，上述設(shè)備中，所述復(fù)制及復(fù)用裝置，用于當(dāng)有列表項(xiàng)內(nèi)容移出所述顯示區(qū)域，將該移出的列表項(xiàng)內(nèi)容所屬的列表項(xiàng)回收為可復(fù)用的列表項(xiàng)；當(dāng)有新的列表項(xiàng)內(nèi)容要移入所述顯示區(qū)域，判斷是否有可復(fù)用的列表項(xiàng)，若有，將所述新的列表項(xiàng)內(nèi)容填入所述可復(fù)用列表項(xiàng)，顯示所述列表項(xiàng)；若無，對(duì)所述列表項(xiàng)模板進(jìn)行復(fù)制得到列表項(xiàng)，將新的列表項(xiàng)內(nèi)容填入復(fù)制得到列表項(xiàng)中，顯示所述列表項(xiàng)。

與現(xiàn)有技術(shù)相比，本申請(qǐng)通過在前端實(shí)現(xiàn)列表項(xiàng)的原型定義，在原生端通過對(duì)列表項(xiàng)的原型的復(fù)制，原生端根據(jù)當(dāng)前列表展現(xiàn)的位置，對(duì)于已經(jīng)不在可見范圍的列表項(xiàng)進(jìn)行重用，來實(shí)現(xiàn)在前端定義列表項(xiàng)的原型，而在原生端自由的創(chuàng)建、渲染和復(fù)用列表項(xiàng)，達(dá)到了既保留了混合模型開發(fā)對(duì)列表項(xiàng)定義的靈活自由，又可以在原生端復(fù)用列表項(xiàng)，大大提升了大列表的展現(xiàn)和操作性能。本申請(qǐng)技術(shù)方案的核心，是在混合模型開發(fā)中，解決在前端定義 列表項(xiàng)的結(jié)構(gòu)和樣式，而在原生端進(jìn)行列表項(xiàng)的創(chuàng)建和復(fù)用的問題，以達(dá)到在列表頁面中復(fù)用列表項(xiàng)，提升渲染和操作的性能。

附圖說明

通過閱讀參照以下附圖所作的對(duì)非限制性實(shí)施例所作的詳細(xì)描述，本申請(qǐng)的其它特征、目的和優(yōu)點(diǎn)將會(huì)變得更明顯：

圖1示出現(xiàn)有的列表視圖的實(shí)現(xiàn)方式；

圖2示出根據(jù)本申請(qǐng)一個(gè)方面的一種混合模型列表項(xiàng)重用的方法的流程圖；

圖3示出本申請(qǐng)一優(yōu)選的實(shí)施例的原理圖；

圖4示出本申請(qǐng)另一優(yōu)選的實(shí)施例的原理圖；

圖5示出本申請(qǐng)?jiān)僖粌?yōu)選的實(shí)施例的原理圖；

圖6示出根據(jù)本申請(qǐng)另一個(gè)方面的一種混合模型列表項(xiàng)重用的設(shè)備的模塊圖。

附圖中相同或相似的附圖標(biāo)記代表相同或相似的部件。

具體實(shí)施方式

下面結(jié)合附圖對(duì)本申請(qǐng)作進(jìn)一步詳細(xì)描述。

在本申請(qǐng)一個(gè)典型的配置中，終端、服務(wù)網(wǎng)絡(luò)的設(shè)備和可信方均包括一個(gè)或多個(gè)處理器(cpu)、輸入/輸出接口、網(wǎng)絡(luò)接口和內(nèi)存。

內(nèi)存可能包括計(jì)算機(jī)可讀介質(zhì)中的非永久性存儲(chǔ)器，隨機(jī)存取存儲(chǔ)器(ram)和/或非易失性內(nèi)存等形式，如只讀存儲(chǔ)器(rom)或閃存(flashram)。內(nèi)存是計(jì)算機(jī)可讀介質(zhì)的示例。

計(jì)算機(jī)可讀介質(zhì)包括永久性和非永久性、可移動(dòng)和非可移動(dòng)媒體可以 由任何方法或技術(shù)來實(shí)現(xiàn)信息存儲(chǔ)。信息可以是計(jì)算機(jī)可讀指令、數(shù)據(jù)結(jié)構(gòu)、程序的模塊或其他數(shù)據(jù)。計(jì)算機(jī)的存儲(chǔ)介質(zhì)的例子包括，但不限于相變內(nèi)存(pram)、靜態(tài)隨機(jī)存取存儲(chǔ)器(sram)、動(dòng)態(tài)隨機(jī)存取存儲(chǔ)器(dram)、其他類型的隨機(jī)存取存儲(chǔ)器(ram)、只讀存儲(chǔ)器(rom)、電可擦除可編程只讀存儲(chǔ)器(eeprom)、快閃記憶體或其他內(nèi)存技術(shù)、只讀光盤只讀存儲(chǔ)器(cd-rom)、數(shù)字多功能光盤(dvd)或其他光學(xué)存儲(chǔ)、磁盒式磁帶，磁帶磁盤存儲(chǔ)或其他磁性存儲(chǔ)設(shè)備或任何其他非傳輸介質(zhì)，可用于存儲(chǔ)可以被計(jì)算設(shè)備訪問的信息。按照本文中的界定，計(jì)算機(jī)可讀介質(zhì)不包括非暫存電腦可讀媒體(transitorymedia)，如調(diào)制的數(shù)據(jù)信號(hào)和載波。

如圖2所示，根據(jù)本申請(qǐng)的一個(gè)方面，提供一種混合模型列表項(xiàng)重用的方法，其中，該方法包括：

步驟s1，在混合模型的前端對(duì)列表項(xiàng)的原型進(jìn)行定義；

步驟s2，在所述混合模型的原生端根據(jù)所述列表項(xiàng)的原型復(fù)制得到列表項(xiàng)，并對(duì)所述列表項(xiàng)進(jìn)行復(fù)用。本申請(qǐng)通過在前端實(shí)現(xiàn)列表項(xiàng)(listcell)的原型(母體)定義，在原生端(native)通過對(duì)列表項(xiàng)的原型的復(fù)制(克隆)，原生端根據(jù)當(dāng)前列表展現(xiàn)的位置，對(duì)于已經(jīng)不在可見范圍的列表項(xiàng)進(jìn)行重用，來實(shí)現(xiàn)在前端定義列表項(xiàng)的原型，而在原生端自由的創(chuàng)建、渲染和復(fù)用列表項(xiàng)，達(dá)到了既保留了混合模型(hybrid)開發(fā)對(duì)列表項(xiàng)定義的靈活自由，又可以在原生端復(fù)用列表項(xiàng)，大大提升了大列表的展現(xiàn)和操作性能。本申請(qǐng)技術(shù)方案的核心，是在hybrid開發(fā)中，解決在前端定義listcell的結(jié)構(gòu)和樣式，而在native進(jìn)行l(wèi)istcell的創(chuàng)建和復(fù)用的問題，以達(dá)到在列表頁面中復(fù)用listcell，提升渲染和操作的性能。本申請(qǐng)適用于所有hybridapp 開發(fā)，并且在react-native框架上，得到了非常好的實(shí)施效果。

本申請(qǐng)一種混合模型列表項(xiàng)重用的方法一優(yōu)選的實(shí)施例中，步驟s1中對(duì)列表項(xiàng)的原型進(jìn)行定義，包括：

對(duì)列表項(xiàng)的原型的結(jié)構(gòu)布局和樣式進(jìn)行定義。在此，對(duì)列表項(xiàng)(listcell)的原型進(jìn)行定義包括對(duì)列表項(xiàng)的結(jié)構(gòu)和樣式進(jìn)行定義，實(shí)現(xiàn)混合模型(hybrid)開發(fā)中前端對(duì)listcell靈活自由地進(jìn)行定義。

本申請(qǐng)一種混合模型列表項(xiàng)重用的方法一優(yōu)選的實(shí)施例中，所述列表項(xiàng)的原型為單個(gè)列表項(xiàng)的原型。在此，在前端層，僅僅創(chuàng)建了列表項(xiàng)的原型這一個(gè)實(shí)例，后續(xù)可在原生端也僅僅基于這個(gè)原型創(chuàng)建一個(gè)列表項(xiàng)模板，然后在需要時(shí)對(duì)該列表項(xiàng)模板進(jìn)行復(fù)制，從而可以節(jié)省下創(chuàng)建和布局新列表項(xiàng)所需的內(nèi)存和時(shí)間，提升性能。

本申請(qǐng)一種混合模型列表項(xiàng)重用的方法一優(yōu)選的實(shí)施例中，根據(jù)所述列表項(xiàng)的原型復(fù)制得到列表項(xiàng)，包括：

根據(jù)所述列表項(xiàng)的原型創(chuàng)建列表項(xiàng)模板；

對(duì)所述列表項(xiàng)模板進(jìn)行復(fù)制得到列表項(xiàng)；

將獲取到的列表項(xiàng)內(nèi)容填入復(fù)制得到列表項(xiàng)中，并顯示所述列表項(xiàng)。在此，如圖3所示，在原生端僅僅基于前端定義的原型創(chuàng)建列表項(xiàng)模板即圖中的listcell原型實(shí)例，然后根據(jù)需要顯示的列表項(xiàng)內(nèi)容的多少對(duì)該列表項(xiàng)模板進(jìn)行復(fù)制，得到相應(yīng)數(shù)量的列表項(xiàng)，再將所述列表項(xiàng)內(nèi)容即圖3中的列表項(xiàng)數(shù)據(jù)1～n分別填入對(duì)應(yīng)的列表項(xiàng)中后進(jìn)行渲染顯示，從而可以節(jié)省下創(chuàng)建和布局新列表項(xiàng)所需的內(nèi)存和時(shí)間，提升性能。

本申請(qǐng)一種混合模型列表項(xiàng)重用的方法一優(yōu)選的實(shí)施例中，對(duì)所述列 表項(xiàng)模板進(jìn)行復(fù)制得到列表項(xiàng)，包括：

遍歷獲取列表項(xiàng)模板的所有子視圖；

創(chuàng)建包含所有子視圖及其屬性的列表項(xiàng)。在此，遞歸遍歷列表項(xiàng)模板的所有子view(視圖)，再復(fù)制一份列表項(xiàng)出來包含所有子視圖及每個(gè)子視圖對(duì)應(yīng)的屬性，從而實(shí)現(xiàn)對(duì)列表項(xiàng)的準(zhǔn)確復(fù)制。具體的，如圖4所示，列表項(xiàng)模板即圖4中的listcell原型的子視圖包括a、b、c、d、e，復(fù)制listcell原型即是創(chuàng)建包含listcell原型的所有子視圖及其屬性的列表項(xiàng)的過程，得到的列表項(xiàng)的子視圖包括a’、b’、c’、d’、e’。

本申請(qǐng)一種混合模型列表項(xiàng)重用的方法一優(yōu)選的實(shí)施例中，將獲取到的列表項(xiàng)內(nèi)容填入復(fù)制得到列表項(xiàng)中，包括：

將獲取到列表項(xiàng)內(nèi)容填入創(chuàng)建后的列表項(xiàng)的對(duì)應(yīng)的各個(gè)子視圖中。在此，可根據(jù)列表項(xiàng)內(nèi)容，將列表項(xiàng)內(nèi)容分別填入復(fù)制出來的列表項(xiàng)中的各對(duì)應(yīng)子視圖中，從而實(shí)現(xiàn)列表項(xiàng)內(nèi)容在列表項(xiàng)中相應(yīng)位置的準(zhǔn)確顯示。具體的，如圖4所示，本實(shí)施例中，將列表項(xiàng)內(nèi)容即圖4中的內(nèi)容數(shù)據(jù)分別填到復(fù)制得到的列表項(xiàng)的各對(duì)應(yīng)的子視圖a’、b’、c’、d’、e’中。

本申請(qǐng)一種混合模型列表項(xiàng)重用的方法一優(yōu)選的實(shí)施例中，所述列表項(xiàng)內(nèi)容從所述前端獲取。在此，如圖3所示，前端除了完成列表項(xiàng)的原型的定義，只要將列表項(xiàng)內(nèi)容即圖3中的列表項(xiàng)數(shù)據(jù)傳遞至原生端即可，從而減少前端數(shù)據(jù)處理的內(nèi)存消耗和時(shí)間消耗。

本申請(qǐng)一種混合模型列表項(xiàng)重用的方法一優(yōu)選的實(shí)施例中，對(duì)所述列表項(xiàng)模板進(jìn)行復(fù)制得到列表項(xiàng)中，

根據(jù)顯示區(qū)域能容納顯示的列表項(xiàng)的數(shù)量，來確定復(fù)制得到列表項(xiàng)的 數(shù)量。在此，尤其在顯示區(qū)域首次顯示列表項(xiàng)時(shí)，由于還沒有可復(fù)用列表項(xiàng)，此時(shí)需要根據(jù)顯示區(qū)域能容納顯示的列表項(xiàng)的數(shù)量，來復(fù)制對(duì)應(yīng)數(shù)量的列表項(xiàng)，例如，圖3中根據(jù)一屏能顯示的列表項(xiàng)的數(shù)量確定生成對(duì)應(yīng)數(shù)量的列表項(xiàng)，從而實(shí)現(xiàn)列表項(xiàng)的按需復(fù)制，節(jié)省下創(chuàng)建和布局新列表項(xiàng)所需的內(nèi)存和時(shí)間，提升性能，例如，有10個(gè)列表項(xiàng)內(nèi)容需要顯示，某一個(gè)顯示區(qū)域能容納顯示的列表項(xiàng)的數(shù)量為10個(gè)，那么此時(shí)需要復(fù)制10個(gè)的列表項(xiàng)。

本申請(qǐng)一種混合模型列表項(xiàng)重用的方法一優(yōu)選的實(shí)施例中，對(duì)所述列表項(xiàng)進(jìn)行復(fù)用，包括：

當(dāng)有列表項(xiàng)內(nèi)容移出所述顯示區(qū)域，將該移出的列表項(xiàng)內(nèi)容所屬的列表項(xiàng)回收為可復(fù)用的列表項(xiàng)；

當(dāng)有新的列表項(xiàng)內(nèi)容要移入所述顯示區(qū)域，判斷是否有可復(fù)用的列表項(xiàng)，

若有，將所述新的列表項(xiàng)內(nèi)容填入所述可復(fù)用列表項(xiàng)，顯示所述列表項(xiàng)；

若無，對(duì)所述列表項(xiàng)模板進(jìn)行復(fù)制得到列表項(xiàng)，將新的列表項(xiàng)內(nèi)容填入復(fù)制得到列表項(xiàng)中，顯示所述列表項(xiàng)。在此，如圖3所示，尤其在顯示區(qū)域首次顯示列表項(xiàng)之后，由于此時(shí)可能已經(jīng)有了可復(fù)用列表項(xiàng)，顯示新的列表項(xiàng)內(nèi)容時(shí)利用可復(fù)用列表項(xiàng)即可，即在列表滾動(dòng)過程中循環(huán)復(fù)用移動(dòng)顯示區(qū)域的列表項(xiàng)，從而，進(jìn)一步節(jié)省下創(chuàng)建和布局新列表項(xiàng)所需的內(nèi)存和時(shí)間，提升性能，當(dāng)然，如果沒有可復(fù)用的列表項(xiàng)，那么需要根據(jù)新的列表內(nèi)容對(duì)所述列表項(xiàng)模板進(jìn)行復(fù)制得到對(duì)應(yīng)數(shù)據(jù)列表項(xiàng)，例如，有15個(gè)列表項(xiàng)內(nèi)容需要顯示，某一個(gè)顯示區(qū)域能容納顯示的列表項(xiàng)的數(shù)量為10 個(gè)，首次顯示時(shí)需要復(fù)制10個(gè)的列表項(xiàng)，以顯示其中10個(gè)列表項(xiàng)內(nèi)容，當(dāng)剩余的5個(gè)列表項(xiàng)內(nèi)容需要顯示移入顯示區(qū)域時(shí)，相應(yīng)會(huì)有5個(gè)已經(jīng)顯示過的列表項(xiàng)內(nèi)容移出顯示區(qū)域，這5個(gè)移出顯示區(qū)域的列表項(xiàng)會(huì)可回收為可復(fù)用的列表項(xiàng)，那么剩余的5個(gè)列表項(xiàng)內(nèi)容即可復(fù)用該5個(gè)可復(fù)用的列表項(xiàng)。

如圖5所示，為了更好的理解本申請(qǐng)的原理和流程，以在一個(gè)具體的hybrid框架(react-native)上為例，來解釋本申請(qǐng)的實(shí)現(xiàn)原理和流程，具體如下：

步驟s51，前端層定義列表項(xiàng)的結(jié)構(gòu)和樣式；

步驟s52，前端層獲取列表的內(nèi)容數(shù)據(jù)即列表項(xiàng)內(nèi)容；

步驟s53，前端層根據(jù)定義列表項(xiàng)的結(jié)構(gòu)和樣式創(chuàng)建listcell的原型，及向原生端傳遞所述列表的內(nèi)容數(shù)據(jù)，后轉(zhuǎn)到步驟s56；

步驟s56，原生端層根據(jù)前端層創(chuàng)建的listcell的原型創(chuàng)建listcell原型實(shí)例，即列表項(xiàng)模板；

步驟s57，原生端判斷當(dāng)有新的列表項(xiàng)要移入顯示區(qū)域，轉(zhuǎn)到步驟s58；

步驟s57的同時(shí)，步驟s62，原生端判斷當(dāng)有列表項(xiàng)要移出顯示區(qū)域，轉(zhuǎn)到步驟s63；

步驟s63，原生端將移動(dòng)顯示區(qū)域的列表項(xiàng)作為可復(fù)用的列表項(xiàng)后轉(zhuǎn)到步驟s58；

步驟s58，原生端判斷是否有可復(fù)用的列表項(xiàng)；

若有，步驟s59，原生端直接復(fù)用所述可復(fù)用的列表項(xiàng)后轉(zhuǎn)到步驟s61；在此，原生端根據(jù)可顯示區(qū)域能容納顯示的列表項(xiàng)的數(shù)量，來決定哪些列表項(xiàng)可以被復(fù)用；

若無，步驟s60，原生端根據(jù)列表的內(nèi)容數(shù)據(jù)，從listcell原型實(shí)例復(fù)制列表項(xiàng)后轉(zhuǎn)到步驟s61；在此，原生端會(huì)根據(jù)前端層傳遞過來的列表的內(nèi)容數(shù)據(jù)，復(fù)制其他listcell；

步驟s61，對(duì)列表項(xiàng)進(jìn)行渲染后轉(zhuǎn)到步驟s54；

步驟s54，前端層用戶滾動(dòng)列表；

步驟s55，前端層觸發(fā)刷新后，轉(zhuǎn)到步驟s53，此時(shí)，無需再創(chuàng)建listcell的原型，僅向原生端傳遞刷新后的所述列表的內(nèi)容數(shù)據(jù)，即新的待顯示的列表的內(nèi)容數(shù)據(jù)。

如圖6所示，根據(jù)本申請(qǐng)的另一面還提供一種混合模型列表項(xiàng)重用的設(shè)備，所述設(shè)備100包括：

定義裝置1，用于在混合模型的前端對(duì)列表項(xiàng)的原型進(jìn)行定義；

復(fù)制及復(fù)用裝置2，用于在所述混合模型的原生端根據(jù)所述列表項(xiàng)的原型復(fù)制得到列表項(xiàng)，并對(duì)所述列表項(xiàng)進(jìn)行復(fù)用。本申請(qǐng)通過在前端實(shí)現(xiàn)列表項(xiàng)(listcell)的原型定義，在原生端(native)通過對(duì)列表項(xiàng)的原型的復(fù)制，原生端根據(jù)當(dāng)前列表展現(xiàn)的位置，對(duì)于已經(jīng)不在可見范圍的列表項(xiàng)進(jìn)行重用，來實(shí)現(xiàn)在前端定義列表項(xiàng)的原型，而在原生端自由的創(chuàng)建、渲染和復(fù)用列表項(xiàng)，達(dá)到了既保留了混合模型(hybrid)開發(fā)對(duì)列表項(xiàng)定義的靈活自由，又可以在原生端復(fù)用列表項(xiàng)，大大提升了大列表的展現(xiàn)和操作性能。本申請(qǐng)技術(shù)方案的核心，是在hybrid開發(fā)中，解決在前端定義listcell的結(jié)構(gòu)和樣式，而在native進(jìn)行l(wèi)istcell的創(chuàng)建和復(fù)用的問題，以達(dá)到在列表頁面中復(fù)用listcell，提升渲染和操作的性能。本申請(qǐng)適用于所有hybridapp開發(fā)，并且在react-native框架上，得到了非常好的實(shí)施效果。

本申請(qǐng)一種混合模型列表項(xiàng)重用的設(shè)備一優(yōu)選的實(shí)施例中，所述定義裝置1，用于對(duì)列表項(xiàng)的原型的結(jié)構(gòu)布局和樣式進(jìn)行定義。在此，對(duì)列表項(xiàng)(listcell)的原型進(jìn)行定義包括對(duì)列表項(xiàng)的結(jié)構(gòu)和樣式進(jìn)行定義，實(shí)現(xiàn)混合模型(hybrid)開發(fā)中前端對(duì)listcell靈活自由地進(jìn)行定義。

本申請(qǐng)一種混合模型列表項(xiàng)重用的設(shè)備一優(yōu)選的實(shí)施例中，所述列表項(xiàng)的原型為單個(gè)列表項(xiàng)的原型。在此，在前端層，僅僅創(chuàng)建了列表項(xiàng)的原型這一個(gè)實(shí)例，后續(xù)可在原生端也僅僅基于這個(gè)原型創(chuàng)建一個(gè)列表項(xiàng)模板，然后在需要時(shí)對(duì)該列表項(xiàng)模板進(jìn)行復(fù)制，從而可以節(jié)省下創(chuàng)建和布局新列表項(xiàng)所需的內(nèi)存和時(shí)間，提升性能。

本申請(qǐng)一種混合模型列表項(xiàng)重用的設(shè)備一優(yōu)選的實(shí)施例中，所述復(fù)制及復(fù)用裝置2，用于根據(jù)所述列表項(xiàng)的原型創(chuàng)建列表項(xiàng)模板；對(duì)所述列表項(xiàng)模板進(jìn)行復(fù)制得到列表項(xiàng)；將獲取到的列表項(xiàng)內(nèi)容填入復(fù)制得到列表項(xiàng)中，并顯示所述列表項(xiàng)。在此，如圖3所示，在原生端僅僅基于前端定義的原型創(chuàng)建列表項(xiàng)模板即圖中的listcell原型實(shí)例，然后根據(jù)需要顯示的列表項(xiàng)內(nèi)容的多少對(duì)該列表項(xiàng)模板進(jìn)行復(fù)制，得到相應(yīng)數(shù)量的列表項(xiàng)，再將所述列表項(xiàng)內(nèi)容即圖3中的列表項(xiàng)數(shù)據(jù)1～n分別填入對(duì)應(yīng)的列表項(xiàng)中后進(jìn)行渲染顯示，從而可以節(jié)省下創(chuàng)建和布局新列表項(xiàng)所需的內(nèi)存和時(shí)間，提升性能。

本申請(qǐng)一種混合模型列表項(xiàng)重用的設(shè)備一優(yōu)選的實(shí)施例中，所述復(fù)制及復(fù)用裝置2，用于遍歷獲取列表項(xiàng)模板的所有子視圖；創(chuàng)建包含所有子視圖及其屬性的列表項(xiàng)。在此，遞歸遍歷列表項(xiàng)模板的所有子view(視圖)，再復(fù)制一份列表項(xiàng)出來包含所有子視圖及每個(gè)子視圖對(duì)應(yīng)的屬性，從而實(shí)現(xiàn)對(duì)列表項(xiàng)的準(zhǔn)確復(fù)制。具體的，如圖4所示，列表項(xiàng)模板即圖4中的listcell 原型的子視圖包括a、b、c、d、e，復(fù)制listcell原型即是創(chuàng)建包含listcell原型的所有子視圖及其屬性的列表項(xiàng)的過程，得到的列表項(xiàng)的子視圖包括a’、b’、c’、d’、e’。

本申請(qǐng)一種混合模型列表項(xiàng)重用的設(shè)備一優(yōu)選的實(shí)施例中，所述復(fù)制及復(fù)用裝置2，用于將獲取到列表項(xiàng)內(nèi)容填入創(chuàng)建后的列表項(xiàng)的對(duì)應(yīng)的各個(gè)子視圖中。在此，可根據(jù)列表項(xiàng)內(nèi)容，將列表項(xiàng)內(nèi)容分別填入復(fù)制出來的列表項(xiàng)中的各對(duì)應(yīng)子視圖中，從而實(shí)現(xiàn)列表項(xiàng)內(nèi)容在列表項(xiàng)中相應(yīng)位置的準(zhǔn)確顯示。具體的，如圖4所示，本實(shí)施例中，將列表項(xiàng)內(nèi)容即圖4中的內(nèi)容數(shù)據(jù)分別填到復(fù)制得到的列表項(xiàng)的各對(duì)應(yīng)的子視圖a’、b’、c’、d’、e’中。

本申請(qǐng)一種混合模型列表項(xiàng)重用的設(shè)備一優(yōu)選的實(shí)施例中，所述列表項(xiàng)內(nèi)容從所述前端獲取。在此，如圖3所示，前端除了完成列表項(xiàng)的原型的定義，只要將列表項(xiàng)內(nèi)容即圖3中的列表項(xiàng)數(shù)據(jù)傳遞至原生端即可，從而減少前端數(shù)據(jù)處理的內(nèi)存消耗和時(shí)間消耗。

本申請(qǐng)一種混合模型列表項(xiàng)重用的設(shè)備一優(yōu)選的實(shí)施例中，所述復(fù)制及復(fù)用裝置2，用于根據(jù)顯示區(qū)域能容納顯示的列表項(xiàng)的數(shù)量，來確定復(fù)制得到列表項(xiàng)的數(shù)量。在此，尤其在顯示區(qū)域首次顯示列表項(xiàng)時(shí)，由于還沒有可復(fù)用列表項(xiàng)，此時(shí)需要根據(jù)顯示區(qū)域能容納顯示的列表項(xiàng)的數(shù)量，來復(fù)制對(duì)應(yīng)數(shù)量的列表項(xiàng)，例如，圖3中根據(jù)一屏能顯示的列表項(xiàng)的數(shù)量確定生成對(duì)應(yīng)數(shù)量的列表項(xiàng)，從而實(shí)現(xiàn)列表項(xiàng)的按需復(fù)制，節(jié)省下創(chuàng)建和布局新列表項(xiàng)所需的內(nèi)存和時(shí)間，提升性能，例如，有10個(gè)列表項(xiàng)內(nèi)容需要顯示，某一個(gè)顯示區(qū)域能容納顯示的列表項(xiàng)的數(shù)量為10個(gè)，那么此時(shí)需要復(fù)制10個(gè)的列表項(xiàng)。

本申請(qǐng)一種混合模型列表項(xiàng)重用的設(shè)備一優(yōu)選的實(shí)施例中，所述復(fù)制及復(fù)用裝置2，用于當(dāng)有列表項(xiàng)內(nèi)容移出所述顯示區(qū)域，將該移出的列表項(xiàng)內(nèi)容所屬的列表項(xiàng)回收為可復(fù)用的列表項(xiàng)；當(dāng)有新的列表項(xiàng)內(nèi)容要移入所述顯示區(qū)域，判斷是否有可復(fù)用的列表項(xiàng)，若有，將所述新的列表項(xiàng)內(nèi)容填入所述可復(fù)用列表項(xiàng)，顯示所述列表項(xiàng)；若無，對(duì)所述列表項(xiàng)模板進(jìn)行復(fù)制得到列表項(xiàng)，將新的列表項(xiàng)內(nèi)容填入復(fù)制得到列表項(xiàng)中，顯示所述列表項(xiàng)。在此，如圖3所示，尤其在顯示區(qū)域首次顯示列表項(xiàng)之后，由于此時(shí)可能已經(jīng)有了可復(fù)用列表項(xiàng)，顯示新的列表項(xiàng)內(nèi)容時(shí)利用可復(fù)用列表項(xiàng)即可，即在列表滾動(dòng)過程中循環(huán)復(fù)用移動(dòng)顯示區(qū)域的列表項(xiàng)，從而，進(jìn)一步節(jié)省下創(chuàng)建和布局新列表項(xiàng)所需的內(nèi)存和時(shí)間，提升性能，當(dāng)然，如果沒有可復(fù)用的列表項(xiàng)，那么需要根據(jù)新的列表內(nèi)容對(duì)所述列表項(xiàng)模板進(jìn)行復(fù)制得到對(duì)應(yīng)數(shù)據(jù)列表項(xiàng)，例如，有15個(gè)列表項(xiàng)內(nèi)容需要顯示，某一個(gè)顯示區(qū)域能容納顯示的列表項(xiàng)的數(shù)量為10個(gè)，首次顯示時(shí)需要復(fù)制10個(gè)的列表項(xiàng)，以顯示其中10個(gè)列表項(xiàng)內(nèi)容，當(dāng)剩余的5個(gè)列表項(xiàng)內(nèi)容需要顯示移入顯示區(qū)域時(shí)，相應(yīng)會(huì)有5個(gè)已經(jīng)顯示過的列表項(xiàng)內(nèi)容移出顯示區(qū)域，這5個(gè)移出顯示區(qū)域的列表項(xiàng)會(huì)可回收為可復(fù)用的列表項(xiàng)，那么剩余的5個(gè)列表項(xiàng)內(nèi)容即可復(fù)用該5個(gè)可復(fù)用的列表項(xiàng)。

綜上所述，本申請(qǐng)通過在前端實(shí)現(xiàn)列表項(xiàng)的原型定義，在原生端通過對(duì)列表項(xiàng)的原型的復(fù)制，原生端根據(jù)當(dāng)前列表展現(xiàn)的位置，對(duì)于已經(jīng)不在可見范圍的列表項(xiàng)進(jìn)行重用，來實(shí)現(xiàn)在前端定義列表項(xiàng)的原型，而在原生端自由的創(chuàng)建、渲染和復(fù)用列表項(xiàng)，達(dá)到了既保留了混合模型開發(fā)對(duì)列表項(xiàng)定義的靈活自由，又可以在原生端復(fù)用列表項(xiàng)，大大提升了大列表的展現(xiàn)和操作性能。本申請(qǐng)技術(shù)方案的核心，是在混合模型開發(fā)中，解決在前端定義列表項(xiàng)的結(jié)構(gòu)和樣式，而在原生端進(jìn)行列表項(xiàng)的創(chuàng)建和復(fù)用的問題，以達(dá)到在列表頁面中復(fù)用列表項(xiàng)，提升渲染和操作的性能。

顯然，本領(lǐng)域的技術(shù)人員可以對(duì)本申請(qǐng)進(jìn)行各種改動(dòng)和變型而不脫離本申請(qǐng)的精神和范圍。這樣，倘若本申請(qǐng)的這些修改和變型屬于本申請(qǐng)權(quán)利要求及其等同技術(shù)的范圍之內(nèi)，則本申請(qǐng)也意圖包含這些改動(dòng)和變型在內(nèi)。

需要注意的是，本申請(qǐng)可在軟件和/或軟件與硬件的組合體中被實(shí)施，例如，可采用專用集成電路(asic)、通用目的計(jì)算機(jī)或任何其他類似硬件設(shè)備來實(shí)現(xiàn)。在一個(gè)實(shí)施例中，本申請(qǐng)的軟件程序可以通過處理器執(zhí)行以實(shí)現(xiàn)上文所述步驟或功能。同樣地，本申請(qǐng)的軟件程序(包括相關(guān)的數(shù)據(jù)結(jié)構(gòu))可以被存儲(chǔ)到計(jì)算機(jī)可讀記錄介質(zhì)中，例如，ram存儲(chǔ)器，磁或光驅(qū)動(dòng)器或軟磁盤及類似設(shè)備。另外，本申請(qǐng)的一些步驟或功能可采用硬件來實(shí)現(xiàn)，例如，作為與處理器配合從而執(zhí)行各個(gè)步驟或功能的電路。

另外，本申請(qǐng)的一部分可被應(yīng)用為計(jì)算機(jī)程序產(chǎn)品，例如計(jì)算機(jī)程序指令，當(dāng)其被計(jì)算機(jī)執(zhí)行時(shí)，通過該計(jì)算機(jī)的操作，可以調(diào)用或提供根據(jù)本申請(qǐng)的方法和/或技術(shù)方案。而調(diào)用本申請(qǐng)的方法的程序指令，可能被存儲(chǔ)在固定的或可移動(dòng)的記錄介質(zhì)中，和/或通過廣播或其他信號(hào)承載媒體中的數(shù)據(jù)流而被傳輸，和/或被存儲(chǔ)在根據(jù)所述程序指令運(yùn)行的計(jì)算機(jī)設(shè)備的工作存儲(chǔ)器中。在此，根據(jù)本申請(qǐng)的一個(gè)實(shí)施例包括一個(gè)裝置，該裝置包括用于存儲(chǔ)計(jì)算機(jī)程序指令的存儲(chǔ)器和用于執(zhí)行程序指令的處理器，其中，當(dāng)該計(jì)算機(jī)程序指令被該處理器執(zhí)行時(shí)，觸發(fā)該裝置運(yùn)行基于前述根據(jù)本申請(qǐng)的多個(gè)實(shí)施例的方法和/或技術(shù)方案。

對(duì)于本領(lǐng)域技術(shù)人員而言，顯然本申請(qǐng)不限于上述示范性實(shí)施例的細(xì)節(jié)，而且在不背離本申請(qǐng)的精神或基本特征的情況下，能夠以其他的具體形式實(shí)現(xiàn)本申請(qǐng)。因此，無論從哪一點(diǎn)來看，均應(yīng)將實(shí)施例看作是示范性的，而且是非限制性的，本申請(qǐng)的范圍由所附權(quán)利要求而不是上述說明限定，因此旨在將落在權(quán)利要求的等同要件的含義和范圍內(nèi)的所有變化涵括 在本申請(qǐng)內(nèi)。不應(yīng)將權(quán)利要求中的任何附圖標(biāo)記視為限制所涉及的權(quán)利要求。此外，顯然“包括”一詞不排除其他單元或步驟，單數(shù)不排除復(fù)數(shù)。裝置權(quán)利要求中陳述的多個(gè)單元或裝置也可以由一個(gè)單元或裝置通過軟件或者硬件來實(shí)現(xiàn)。第一，第二等詞語用來表示名稱，而并不表示任何特定的順序。