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

【發(fā)明內容】

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