一種網(wǎng)頁(yè)視圖交互處理方法及系統(tǒng)的制作方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及網(wǎng)頁(yè)處理技術(shù)領(lǐng)域，尤其涉及一種網(wǎng)頁(yè)視圖交互處理方法及系統(tǒng)。
【背景技術(shù)】
[0002]傳統(tǒng)的網(wǎng)頁(yè)(Web)開(kāi)發(fā)方式中，網(wǎng)頁(yè)頁(yè)面的展示和交互的方式通常為采用document (文件節(jié)點(diǎn)交互方式，以下簡(jiǎn)稱為dom)節(jié)點(diǎn)的方式進(jìn)行交互。采用dom方式進(jìn)行網(wǎng)頁(yè)的交互和展示會(huì)使得業(yè)務(wù)邏輯代碼和視圖操作代碼混淆在一起，耦合度高，代碼變得非常復(fù)雜且難以維護(hù)，并且網(wǎng)頁(yè)交互工具體積臃腫，不適用于對(duì)帶寬和加載速度要求比較高的移動(dòng)端項(xiàng)目。網(wǎng)頁(yè)開(kāi)發(fā)的學(xué)習(xí)曲線也比較陡峭，其中定義了很多自定義的api接口需要開(kāi)發(fā)人員一一記住。

【發(fā)明內(nèi)容】

[0003]根據(jù)現(xiàn)有技術(shù)中存在的上述問(wèn)題，現(xiàn)提供一種網(wǎng)頁(yè)視圖交互處理方法及系統(tǒng)的技術(shù)方案，旨在降低網(wǎng)頁(yè)代碼維護(hù)和變更的復(fù)雜程度，減少網(wǎng)頁(yè)相關(guān)工具中不必要的功能模塊，且便于開(kāi)發(fā)人員理解和掌握。
[0004]上述技術(shù)方案具體包括:
[0005]—種網(wǎng)頁(yè)視圖交互處理方法，其中，包括:
[000?]步驟SI，對(duì)html文件進(jìn)行掃描并得到所述html文件中帶有預(yù)設(shè)標(biāo)簽的文件節(jié)點(diǎn)；
[0007]步驟S2，對(duì)所有掃描得到的所述文件節(jié)點(diǎn)進(jìn)行解析，以得到關(guān)聯(lián)于每個(gè)所述文件節(jié)點(diǎn)的視圖數(shù)據(jù)以及對(duì)應(yīng)的視圖模型；
[0008]步驟S3，建立并保存關(guān)聯(lián)于每個(gè)所述文件節(jié)點(diǎn)的所述視圖數(shù)據(jù)與所述視圖模型之間的對(duì)應(yīng)關(guān)系；
[0009]步驟S4，采用視圖渲染器，結(jié)合所述視圖數(shù)據(jù)和對(duì)應(yīng)的所述視圖模型進(jìn)行渲染，并將渲染結(jié)果顯示在網(wǎng)頁(yè)上供使用者查看。
[0010]優(yōu)選的，該網(wǎng)頁(yè)視圖交互處理方法，其中，關(guān)聯(lián)于每個(gè)所述文件節(jié)點(diǎn)的所述預(yù)設(shè)標(biāo)簽包括:
[0011 ]關(guān)聯(lián)于每個(gè)所述文件節(jié)點(diǎn)的原生標(biāo)簽，以及
[0012]設(shè)置于每個(gè)所述原生標(biāo)簽之前的預(yù)設(shè)前綴。
[0013]優(yōu)選的，該網(wǎng)頁(yè)視圖交互處理方法，其中，執(zhí)行所述步驟S3的同時(shí)，執(zhí)行下述步驟:
[0014]步驟Al，判斷所述文件節(jié)點(diǎn)是否支持用戶的輸入操作；
[0015]若否，則退出；
[0016]步驟A2，監(jiān)控所述文件節(jié)點(diǎn)上是否存在關(guān)聯(lián)于用戶的新的所述輸入操作的輸入數(shù)值，并在存在有所述輸入數(shù)值時(shí)轉(zhuǎn)向步驟A3;
[0017]步驟A3，采用所述輸入數(shù)值對(duì)所述視圖數(shù)據(jù)進(jìn)行更新；
[0018]步驟A4，刷新所述網(wǎng)頁(yè)，并重新執(zhí)行所述步驟S4。
[0019]優(yōu)選的，該網(wǎng)頁(yè)視圖交互處理方法，其中，執(zhí)行所述步驟A3之前，首先執(zhí)行下述判斷:
[0020]步驟A31，判斷所述輸入數(shù)值是否與對(duì)應(yīng)的所述視圖數(shù)據(jù)不同；
[0021 ]若是，則轉(zhuǎn)向所述步驟A3;
[0022]若否，則退出。
[0023]優(yōu)選的，該網(wǎng)頁(yè)視圖交互處理方法，其中，所述視圖數(shù)據(jù)、所述視圖模型以及所述對(duì)應(yīng)關(guān)系被保存在系統(tǒng)內(nèi)存中。
[0024]一種網(wǎng)頁(yè)視圖交互處理系統(tǒng)，其中，包括:
[0025]掃描單元，用于對(duì)html文件進(jìn)行掃描并得到所述html文件中帶有預(yù)設(shè)標(biāo)簽的文件節(jié)點(diǎn)；
[0026]解析單元，連接所述掃描單元，用于對(duì)所有掃描得到的所述文件節(jié)點(diǎn)進(jìn)行解析，以得到關(guān)聯(lián)于每個(gè)所述文件節(jié)點(diǎn)的視圖數(shù)據(jù)以及對(duì)應(yīng)的視圖模型；
[0027]關(guān)系建立單元，連接所述解析單元，用于建立關(guān)聯(lián)于每個(gè)所述文件節(jié)點(diǎn)的所述視圖數(shù)據(jù)與所述視圖模型之間的對(duì)應(yīng)關(guān)系；
[0028]存儲(chǔ)單元，連接所述關(guān)系建立單元，用于保存所述對(duì)應(yīng)關(guān)系；
[0029]渲染單元，連接所述存儲(chǔ)單元，用于應(yīng)用視圖渲染器，結(jié)合所述視圖數(shù)據(jù)和對(duì)應(yīng)的所述視圖模型進(jìn)行渲染，并將渲染結(jié)果顯示在網(wǎng)頁(yè)上供使用者查看。
[0030]優(yōu)選的，該網(wǎng)頁(yè)視圖交互處理系統(tǒng)，其中，關(guān)聯(lián)于每個(gè)所述文件節(jié)點(diǎn)的所述預(yù)設(shè)標(biāo)簽包括:
[0031 ]關(guān)聯(lián)于每個(gè)所述文件節(jié)點(diǎn)的原生標(biāo)簽，以及
[0032]設(shè)置于每個(gè)所述原生標(biāo)簽之前的預(yù)設(shè)前綴。
[0033]優(yōu)選的，該網(wǎng)頁(yè)視圖交互處理系統(tǒng)，其中，還包括:
[0034]判斷單元，連接所述掃描單元，用于判斷掃描得到的所述文件節(jié)點(diǎn)是否支持用戶的輸入操作，并輸入判斷結(jié)果；
[0035]監(jiān)控單元，連接判斷單元，用于根據(jù)所述判斷結(jié)果，監(jiān)控所述文件節(jié)點(diǎn)上是否存在關(guān)聯(lián)于用戶的新的所述輸入操作的輸入數(shù)值，并輸出監(jiān)控結(jié)果；
[0036]更新單元，分別連接所述監(jiān)控單元和所述存儲(chǔ)單元，用于根據(jù)所述監(jiān)控結(jié)果，采用所述輸入數(shù)值對(duì)所述存儲(chǔ)單元中保存的所述視圖數(shù)據(jù)進(jìn)行更新；
[0037]刷新單元，分別連接所述更新單元和所述渲染單元，用于在所述更新單元完成更新后，控制所述渲染單元刷新所述網(wǎng)頁(yè)，并重新應(yīng)用視圖渲染器，結(jié)合所述視圖數(shù)據(jù)和對(duì)應(yīng)的所述視圖模型進(jìn)行渲染，并將渲染結(jié)果顯示在網(wǎng)頁(yè)上供使用者查看。
[0038]優(yōu)選的，該網(wǎng)頁(yè)視圖交互處理系統(tǒng)，其中，所述更新單元包括:
[0039]比對(duì)模塊，用于比對(duì)所述輸入數(shù)值是否與對(duì)應(yīng)的所述視圖數(shù)據(jù)不同，并輸出比對(duì)結(jié)果；
[0040]更新模塊，連接所述比對(duì)模塊，用于根據(jù)所述比對(duì)結(jié)果，在所述輸入數(shù)值與所述視圖數(shù)據(jù)不同時(shí)，采用所述輸入數(shù)值對(duì)所述視圖數(shù)據(jù)進(jìn)行更新。
[0041]優(yōu)選的，該網(wǎng)頁(yè)視圖交互處理系統(tǒng)，其中，所述存儲(chǔ)單元為系統(tǒng)內(nèi)存。
[0042]上述技術(shù)方案的有益效果是:
[0043]I)提供一種網(wǎng)頁(yè)視圖交互處理方法，能夠降低網(wǎng)頁(yè)代碼維護(hù)和變更的復(fù)雜程度，減少網(wǎng)頁(yè)相關(guān)工具中不必要的功能模塊，且便于開(kāi)發(fā)人員理解和掌握；
[0044]2)提供一種網(wǎng)頁(yè)視圖交互處理系統(tǒng)，能夠支持實(shí)現(xiàn)上述網(wǎng)頁(yè)視圖交互處理方法。
【附圖說(shuō)明】
[0045]圖1是本發(fā)明的較佳的實(shí)施例中，一種網(wǎng)頁(yè)視圖交互處理方法的總體流程示意圖；
[0046]圖2-3是本發(fā)明的較佳的實(shí)施例中，于圖1的基礎(chǔ)上，網(wǎng)頁(yè)視圖交互處理方法的分步驟流程示意圖；
[0047]圖4是本發(fā)明的較佳的實(shí)施例中，一種網(wǎng)頁(yè)視圖交互處理系統(tǒng)的總體結(jié)構(gòu)示意圖；
[0048]圖5是本發(fā)明的較佳的實(shí)施例中，于圖4的基礎(chǔ)上，更新單元的結(jié)構(gòu)示意圖。
【具體實(shí)施方式】
[0049]下面將結(jié)合本發(fā)明實(shí)施例中的附圖，對(duì)本發(fā)明實(shí)施例中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實(shí)施例僅僅是本發(fā)明一部分實(shí)施例，而不是全部的實(shí)施例?；诒景l(fā)明中的實(shí)施例，本領(lǐng)域普通技術(shù)人員在沒(méi)有作出創(chuàng)造性勞動(dòng)的前提下所獲得的所有其他實(shí)施例，都屬于本發(fā)明保護(hù)的范圍。
[0050]需要說(shuō)明的是，在不沖突的情況下，本發(fā)明中的實(shí)施例及實(shí)施例中的特征可以相互組合。
[0051]下面結(jié)合附圖和具體實(shí)施例對(duì)本發(fā)明作進(jìn)一步說(shuō)明，但不作為本發(fā)明的限定。
[0052]本發(fā)明的較佳的實(shí)施例中，基于現(xiàn)有技術(shù)中存在的上述問(wèn)題，現(xiàn)提供一種網(wǎng)頁(yè)視圖交互處理方法，其步驟具體如圖1所示，包括:
[0053]步驟SI，對(duì)html文件進(jìn)行掃描并得到html文件中帶有預(yù)設(shè)標(biāo)簽的文件節(jié)點(diǎn)；
[0054]步驟S2，對(duì)所有掃描得到的文件節(jié)點(diǎn)進(jìn)行解析，以得到關(guān)聯(lián)于每個(gè)文件節(jié)點(diǎn)的視圖數(shù)據(jù)以及對(duì)應(yīng)的視圖模型；
[0055]步驟S3，建立并保存關(guān)聯(lián)于每個(gè)文件節(jié)點(diǎn)的視圖數(shù)據(jù)與視圖模型之間的對(duì)應(yīng)關(guān)系;
[0056]步驟S4，采用視圖渲染器，結(jié)合視圖數(shù)據(jù)和對(duì)應(yīng)的視圖模型進(jìn)行渲染，并將渲染結(jié)果顯示在網(wǎng)頁(yè)上供使用者查看。
[0057]在一個(gè)具體實(shí)施例中，首先獲取關(guān)聯(lián)于該網(wǎng)頁(yè)的html文件，由于在該實(shí)施例中，采用如上文中所述的dom方式管理html文件的交互，因此在上述html文件中包括多個(gè)dom節(jié)點(diǎn)(即上文中所述的文件節(jié)點(diǎn))。則在上述步驟SI中，掃描上述html文件并獲取其中帶有預(yù)設(shè)標(biāo)簽的dom節(jié)點(diǎn)。
[0058]在該實(shí)施例中，獲取上述帶有預(yù)設(shè)標(biāo)簽的dom節(jié)點(diǎn)后，對(duì)這些dom節(jié)點(diǎn)進(jìn)行解析，以從其標(biāo)簽中得到關(guān)聯(lián)于每個(gè)文件節(jié)點(diǎn)的視圖數(shù)據(jù)以及對(duì)應(yīng)的視圖模型；
[0059]在該實(shí)施例中，隨后根據(jù)獲取到的視圖數(shù)據(jù)和視圖模型形成上述視圖數(shù)據(jù)和視圖模型的對(duì)應(yīng)關(guān)系。上述對(duì)應(yīng)關(guān)系不一定只適用于一個(gè)dom節(jié)點(diǎn)。例如，以關(guān)聯(lián)于用戶名的輸入框作為dom節(jié)點(diǎn)，則該dom節(jié)點(diǎn)的標(biāo)簽中可以包括信息:Value = username，其中Value為視圖模型，而username為視圖數(shù)據(jù)，因此可以形成Value和username之間的對(duì)應(yīng)關(guān)系。則Value= Username這一對(duì)應(yīng)關(guān)系可能同樣適用于其他關(guān)聯(lián)于用戶名輸入的dom節(jié)點(diǎn)。
[0060]在該實(shí)施例中，建立上述視圖數(shù)據(jù)與視圖模型的對(duì)應(yīng)關(guān)系之后(可以包括多個(gè)對(duì)應(yīng)關(guān)系)，保存這些對(duì)應(yīng)關(guān)系，具體地，將這些已經(jīng)建立的對(duì)應(yīng)關(guān)系保存于系統(tǒng)內(nèi)存中，以供隨時(shí)進(jìn)行調(diào)用。
[0061]在該實(shí)施例中，最后，采用視圖渲染器，結(jié)合視圖數(shù)據(jù)和對(duì)應(yīng)的視圖模型進(jìn)行渲染，并將渲染結(jié)果顯示在網(wǎng)頁(yè)上供使用者查看，即利用上述視圖數(shù)據(jù)與視圖模型之間的對(duì)應(yīng)關(guān)系，將相應(yīng)的網(wǎng)頁(yè)呈現(xiàn)給使用者查看。
[0062]本發(fā)明的較佳的實(shí)施例中，關(guān)聯(lián)于每個(gè)文件節(jié)點(diǎn)的預(yù)設(shè)標(biāo)簽包括:
[0063]關(guān)聯(lián)于每個(gè)文件節(jié)點(diǎn)的原生標(biāo)簽，以及
[0064]設(shè)置于每個(gè)原生標(biāo)簽之前的預(yù)設(shè)前綴。
[0065]具體地，本發(fā)明的較佳的實(shí)施例中，為了便于開(kāi)發(fā)人員學(xué)習(xí)和記憶，上述預(yù)設(shè)標(biāo)簽可以包括兩部分:一部分為dom節(jié)點(diǎn)自帶的傳統(tǒng)標(biāo)簽，與現(xiàn)有技術(shù)中相同，另一部分為設(shè)置于上述傳統(tǒng)標(biāo)簽之前的預(yù)設(shè)前綴。換言之，在原生標(biāo)簽前增加預(yù)設(shè)前綴形成上述的預(yù)設(shè)標(biāo)簽。
[0066]本發(fā)明的一個(gè)較佳的實(shí)施例中，上述預(yù)設(shè)前綴可以為uku-，即在需要進(jìn)行視圖和視圖模型綁定的html文件的各個(gè)dom節(jié)點(diǎn)的原生標(biāo)簽前增加uku-，即可形成帶有預(yù)設(shè)標(biāo)簽的dom節(jié)點(diǎn)。在上述步驟SI的掃描過(guò)程中，只要掃描到帶有uku-前綴的標(biāo)簽，則認(rèn)為對(duì)應(yīng)的dom節(jié)點(diǎn)需要進(jìn)行進(jìn)一步解析。
[0067]本發(fā)明的較佳的實(shí)施例中，執(zhí)行步驟S3的同時(shí)，執(zhí)行如圖2所示的下述步驟:
[0068]步驟Al，判斷文件節(jié)點(diǎn)是